Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

reactjs - How to test Async Storage with Jest?

I'm building an app with React Native. I want to minimize how often I communicate to the database, so I make heavy use of AsyncStorage. There's a lot of room for bugs in the translation between DB and AsyncStorage though. Therefore, I want to make sure that AsyncStorage has the data I believe it does by running automated tests against it. Surprisingly, I haven't found any information on how to do that online. My attempts to do it on my own haven't worked out.

Using Jest:

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

This method failed with an error:

TypeError: RCTAsyncStorage.multiGet is not a function

Removing the return will cause it to run instantly without waiting for the value and improperly pass the test.

I got hit with the exact same error when I tried to test it using the await keyword:

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

Any suggestions on how to successfully run assertions against the values in AsyncStorage? I'd prefer to continue using Jest but if it can only be done with some alternate testing library I'm open to that.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

For everyone who sees this question in > 2019:

Since Nov 2020, AsyncStorage was renamed back to @react-native-async-storage/async-storage", which causes this warning to appear if you're importing it from react-native:

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

The new module includes its own mock, so you don't have to worry about writing your own anymore.

Per the project's documentation, you can set it up in 2 different ways:

##With mocks directory

  • In your project root directory, create a __mocks__/@react-native-community directory.
  • Inside that folder, create async-storage.js file.
  • Inside that file, export Async Storage mock.
    export default from '@react-native-async-storage/async-storage/jest/async-storage-mock'
    

Jest should then mock AsyncStorage by default in all your tests. If it doesn't, try calling jest.mock(@react-native-async-storage/async-storage) at the top of your test file.

With Jest setup file

  • In your Jest config (probably in package.json or jest.config.js) add the setup file's location:
    "jest": {
      "setupFiles": ["./path/to/jestSetupFile.js"]
    }
    
  • Inside your setup file, set up the AsyncStorage mock:
    import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
    
    jest.mock('@react-native-community/async-storage', () => mockAsyncStorage);
    

If you're using TypeScript, using the 2nd option (Jest setup file) is way easier, since with the 1st one (mocks directory) it won't associate @types/react-native-community__async-storage with the mock automatically.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...