Question

我已经复制了一个示例来了解对reactjs的Mock-async-storage的测试。欢迎对其他测试方法提出任何建议。我试图从以下堆栈溢出页面中复制用例：How to test Async Storage with Jest?，但我无法弄清楚它如何适合我的示例案例。因此，我尝试了下面的npm模块https://github.com/devmetal/mock-async-storage，但这也无济于事。

用Example.test.js编写的代码

Widget _buildSoftUIMenu(icon, color, title) {
  return InkWell(
    onTap: onTapCallback,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        ....
        ....
        ....
      ],
    );
  );
}

jest.config.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')
});

setup-tests.js中的代码

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

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

import MockAsyncStorage from 'mock-async-storage';

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

我正在使用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": {
    "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以运行测试。输出为：

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

1 个答案: