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

【问题标题】：Sample use case to test Async Storage with Jest-expo?使用 Jest-expo 测试异步存储的示例用例？
【发布时间】：2021-02-17 19:52:02
【问题描述】：

我复制了一个示例来了解对 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 进行测试。

上述测试用例的输出是：

【问题讨论】：

尚不清楚您尝试使用 Example.test.js 实现什么（没有测试）。 jest.mock('AsyncStorage', () => mockImpl) 失败，因为没有名为 AsyncStorage 的模块。
我想模拟 Asyncstorage。我正在尝试实现类似于 hello world 项目的东西来模拟 Asyncstorage。我能做些什么来摆脱这个错误。请问我应该添加哪些额外的代码行。提前致谢。
模拟你用来导入它的同一个模块。如果是react-native，则模拟react-native。
从@react-native-community/async-storage 导入AsyncStorage。但是测试用例仍然抛出同样的错误。这是一个反应原生应用程序。我的最终意图是我应该从 Asynstorage 模拟中获取应用程序的用户名属性。
它抛出了同样的错误，因为你模拟了错误且不存在的模块。你需要模拟@react-native-community/async-storage。你试过了吗？

标签： javascript reactjs react-native jestjs asyncstorage

【解决方案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 将 username 的值设置为 testUser。然后使用 getItem 函数获取值。测试用例是比较usernameValue是否等于testUser。如果是，则测试用例通过，否则测试用例将失败。

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

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

【讨论】：