用用例来测试与Jest-expo的异步存储吗? [英] Sample use case to test Async Storage with Jest-expo?

问题描述

我已经复制了一个示例，以了解对Reactjs的Mock-async-storage的测试.欢迎对不同的测试方法提出任何建议.我试图从此堆栈溢出页面复制用例:

解决方案

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

使用以下命令安装模块:从项目的根目录运行此命令.

  npm install --save模拟异步存储 

在项目根目录中，创建 __ mocks __ \ @ react-native-community 文件夹.在其中创建一个文件async-storage.js.async-storage.js中的代码

 从'@ react-native-community/async-storage/jest/async-storage-mock'导出默认值 

在package.json内部配置笑话如下:

 笑话":{"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的文件.该文件中的代码是:

 从'mock-async-storage'导入MockAsyncStorage;const mockImpl =新的MockAsyncStorage();jest.mock('@ react-native-community/async-storage'，()=> gtockImpl); 

在项目根目录中创建测试文件.在这里，我称它为Example.test.js.

 从'@ react-native-community/async-storage'导入AsyncStorage;beforeEach(()=> {AsyncStorage.clear();//console.log(`数据重置后:`)//console.log(AsyncStorage)});it('可以读取asyncstorage'，async()=> {等待AsyncStorage.setItem('username'，'testUser')let usernameValue =等待AsyncStorage.getItem('用户名')//console.log(`设置数据后:`)//console.log(AsyncStorage)Expect(usernameValue).toBe('testUser')}); 

在此处使用AsyncStorage.setItem将用户名的值设置为testUser.然后使用getItem函数获取值.测试用例是比较usernameValue是否等于testUser.如果是，则测试用例通过，否则测试用例将失败.

使用beforeEach以便每次运行测试用例时，Asyncstorage都会被清除并且为空.如果需要，可以使用console.log

检查Asyncstorage中的内容.

运行命令 yarn test 来运行测试.输出为:

I have replicated an example to understand the testing of Mock-async-storage for reactjs. Any suggestions for a different approach of testing are welcome. I tried to replicate the use case from this stack overflow page : How to test Async Storage with Jest? but I couldn't figure out how that would fit for my sample case. So I tried the below npm module https://github.com/devmetal/mock-async-storage, but that didn't help either.

Code written in 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')
});

Code in jest.config.js file :

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

Code in setup-tests.js

import MockAsyncStorage from 'mock-async-storage';

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

Created the mocks folder in root directory and then created @react-native-community folder in it. Then created at async-storage.js file with the following code :

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

I am using jest-expo for testing.

The output of the above test case is :

解决方案

Detailed Solution for the above:

Install the module using the command : Run this command from the root directory of the project.

npm install --save mock-async-storage

In the project root directory create __mocks__\@react-native-community folder. Inside that create a file async-storage.js. Code in async-storage.js

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

Inside package.json configure the jest as follows:

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

Here I am using jest-expo for testing. If you are using jest then the preset value will be jest not jest-expo.

In the project root directory create a file called jest.config.js Configuration inside the jest.config.js file:

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

In the project root directory create a file called setup-tests.js. Code in this file is :

import MockAsyncStorage from 'mock-async-storage';

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

In the project root directory create the test file. Here I am calling it 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')
});

Here setting the value of username to testUser using AsyncStorage.setItem. Then fetching the value using getItem function. The test case is to compare whether the usernameValue is equal to testUser. If yes then the test case passes else the test case will fail.

Using beforeEach so that every time a test case is being run Asyncstorage is being cleared and is empty. If needed one can check what is present in Asyncstorage using console.log

Run the command yarn test to run the tests. The output is:

这篇关于用用例来测试与Jest-expo的异步存储吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！