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

Question

我复制了一个示例来了解对 reactjs 的 Mock-async-storage 的测试。欢迎任何有关不同测试方法的建议。我试图从这个堆栈溢出页面复制用例: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

在项目根目录下创建__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 来测试用户。然后使用 getItem 函数获取值。
测试用例是比较usernameValue是否等于testUser。
如果是，则测试用例通过，否则测试用例将失败。
使用 beforeEach 以便每次运行测试用例时 Asyncstorage 都会被清除并且为空。
如果需要，可以使用 console.log 检查 Asyncstorage 中存在的内容
运行命令yarn test运行测试。输出是: