reactjs - 如何使用 Jest 测试异步存储？

Question

我正在使用 React Native 构建一个应用程序。我想尽量减少与数据库通信的频率，因此我大量使用 AsyncStorage。不过，DB 和 AsyncStorage 之间的转换存在很多错误。因此，我想通过对其运行自动化测试来确保 AsyncStorage 拥有我认为它拥有的数据。令人惊讶的是，我没有在网上找到任何有关如何执行此操作的信息。我自己尝试做这件事并没有成功。

使用 Jest :

it("can read asyncstorage", () => {
return AsyncStorage.getItem('foo').then(foo => {
  expect(foo).not.toBe("");
});  });

此方法失败并出现错误:

TypeError: RCTAsyncStorage.multiGet is not a function

删除返回将导致它立即运行而不等待值并错误地通过测试。

当我尝试使用await关键字测试它时，我遇到了完全相同的错误:

it('can read asyncstorage', async () => {
this.foo = "";
await AsyncStorage.getItem('foo').then(foo => {
    this.foo = foo;
});
expect(foo).not.toBe(""); });

关于如何成功针对 AsyncStorage 中的值运行断言有什么建议吗？我更愿意继续使用 Jest，但如果它只能通过一些替代测试库来完成，我对此持开放态度。

Answer 1

致所有在 > 2019 年看到此问题的人:

自 Nov 2020 , AsyncStorage 已重命名回 @react-native-async-storage/async-storage" ，如果您从 react-native 导入它，这会导致出现此警告:

Warning: Async Storage has been extracted from react-native core and will be removed in a future release.

新模块包含自己的模拟，因此您不必再担心编写自己的模拟。

Per the project's documentation ，您可以通过两种不同的方式进行设置:

带有模拟目录

• 在项目根目录中，创建一个 __mocks__/@react-native-community 目录。
• 在该文件夹中，创建 async-storage.js 文件。
• 在该文件内，导出异步存储模拟。

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

Jest 应该在所有测试中默认模拟 AsyncStorage。如果没有，请尝试在测试文件顶部调用 jest.mock(@react-native-async-storage/async-storage) 。

使用 Jest 安装文件

• 在您的 Jest 配置中(可能在 package.json 或 jest.config.js 中)添加安装文件的位置:

  "jest": {
    "setupFiles": ["./path/to/jestSetupFile.js"]
  }
  

• 在您的设置文件中，设置 AsyncStorage 模拟:

  import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
  
  jest.mock('@react-native-community/async-storage', () => mockAsyncStorage);
  

如果您使用 TypeScript，使用第二个选项(Jest 安装文件)会更容易，因为使用第一个选项(mocks 目录)它不会关联 @types/自动使用模拟进行react-native-community__async-storage。