使用Jest-expo测试异步存储的示例使用案例？

Question

我已经复制了一个例子来理解用于reactjs的模拟异步存储的测试。欢迎对不同的测试方法提出任何建议。我尝试从这个堆栈溢出页面复制用例：How to test Async Storage with Jest?，但我不知道它如何适合我的样例。所以我尝试了下面的npm模块https://github.com/devmetal/mock-async-storage，但是也没有用。

用Example.test.js编写的代码

import  AsyncStorage  from '@react-native-community/async-storage';

beforeEach(() => {
    AsyncStorage.clear();
    // console.log(`After the data is being reset :`)
    // console.log(AsyncStorage)
});

it('can read asyncstorage', async () => {

    await AsyncStorage.setItem('username', 'testUser')
    let username = await AsyncStorage.getItem('username')
    // console.log(`After the data is being set :`)
    // console.log(AsyncStorage)
    expect(username).toBe('testUser')
});

jest.config.js文件中的代码：

module.exports = {
    setupFilesAfterEnv: [
      './setup-tests.js',
    ],
  };

setup-tests.js中的代码

import MockAsyncStorage from 'mock-async-storage';

const mockImpl = new MockAsyncStorage();
jest.mock('@react-native-community/async-storage', () => mockImpl);

在根目录中创建了mocks文件夹，然后在其中创建了@react-native-community文件夹。然后使用以下代码在async-storage.js文件中创建：

export default from '@react-native-community/async-storage/jest/async-storage-mock'

我正在使用jest-expo进行测试。

上述测试用例的输出为：

​

​

Answer 1

上述问题的具体解决方案：

使用以下命令安装模块:从项目的根目录运行此命令。

npm install --save mock-async-storage

在其中创建一个async-storage.js文件。async-storage.js中的代码

export default from '@react-native-community/async-storage/jest/async-storage-mock'

"jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns" : ["/node_modules/@react-native-community/async-storage/(?!(lib))"]
  },

这里我使用jest-expo进行测试。

在项目根目录中，在jest.config.js文件中创建一个名为jest.config.js Configuration的文件：

module.exports = {
    setupFilesAfterEnv: [
      './setup-tests.js',
    ],
  };

在项目根目录中，创建一个名为setup-tests.js的文件。此文件中的代码为：

import MockAsyncStorage from 'mock-async-storage';

const mockImpl = new MockAsyncStorage();
jest.mock('@react-native-community/async-storage', () => mockImpl);

在项目根目录中创建测试文件。

import  AsyncStorage  from '@react-native-community/async-storage';

beforeEach(() => {
    AsyncStorage.clear();
    // console.log(`After the data is being reset :`)
    // console.log(AsyncStorage)
});

it('can read asyncstorage', async () => {

    await AsyncStorage.setItem('username', 'testUser')
    let usernameValue = await AsyncStorage.getItem('username')
    // console.log(`After the data is being set :`)
    // console.log(AsyncStorage)
    expect(usernameValue).toBe('testUser')
});

此处使用AsyncStorage.setItem将用户名的值设置为testUser。然后使用getItem函数获取该值。测试用例是比较usernameValue是否等于testUser。如果是，则测试用例通过，否则测试用例将失败。

使用beforeEach，这样每次运行测试用例时，Asyncstorage都会被清除，并且为空。如果需要，可以使用console.log检查异步存储中的内容

输出为：

​

​