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

IT技术 javascript reactjs react-native jestjs asyncstorage
2021-05-04 16:15:00

我复制了一个例子来理解reactjs的Mock-async-storage的测试。欢迎对不同的测试方法提出任何建议。我试图从这个堆栈溢出页面复制用例:How to test Async Storage with Jest? 但我无法弄清楚这如何适合我的示例案例。所以我尝试了下面的 npm modulehttps://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 进行测试。

上述测试用例的输出是:

在此处输入图片说明

1个回答

针对以上问题的详细解决方案:

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

npm install --save mock-async-storage

在项目根目录下创建__mocks__\@react-native-community文件夹。在里面创建一个文件 async-storage.js。async-storage.js 中的代码

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

在 package.json 中配置 jest 如下:

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

在这里,我使用 jest-expo 进行测试。如果您使用的是 jest,那么预设值将是 jest 而不是 jest-expo。

在项目根目录下,在 jest.config.js 文件中创建一个名为 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);

在项目根目录下创建测试文件。这里我称它为 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 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 检查 Asyncstorage 中存在的内容

运行命令yarn test以运行测试。输出是:

在此处输入图片说明