How to test Async Storage with Jest?

by

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.

More Related Contents:

  1. Is using async componentDidMount() good?
  2. how to change jest mock function return value in each test?
  3. Is there a “Best Practices” on designing an application written both in React and React-Native?
  4. How to resolve “Cannot use import statement outside a module” in jest
  5. Hide keyboard in react-native
  6. How to re-render flatlist?
  7. Axios get in url works but with second parameter as object it doesn’t
  8. Testing with React’s Jest and Enzyme when simulated clicks call a function that calls a promise
  9. How to debug react native apps in visual studio code?
  10. When to use useImperativeHandle, useLayoutEffect, and useDebugValue
  11. Requires Babel “7.0.0-0” but was loaded with “6.26.3”
  12. Testing React components that fetches data using Hooks
  13. What is the difference between using constructor vs getInitialState in React / React Native?
  14. Axios: chaining multiple API requests
  15. How to resolve “Cannot use import statement outside a module” from Jest when running tests?
  16. Found 4 vulnerabilities on npm install
  17. Invariant Violation: The navigation prop is missing for this navigator
  18. VirtualizedList: You have a large list that is slow to update
  19. Jest setup “SyntaxError: Unexpected token export”
  20. React native change listening port
  21. How to add sourcemap in React Native for Production?
  22. Jest test fails : TypeError: window.matchMedia is not a function
  23. How to solve the “update was not wrapped in act()” warning in testing-library-react?
  24. How to test a react component that is dependent on useContext hook?
  25. Importing images breaks jest test
  26. how to async/await redux-thunk actions?
  27. PhaseScriptExecution [CP-User] error in React Native
  28. Failed to run jetifier React Native
  29. react native post form data with object and file in it using axios
  30. How to update array state in react native?

Leave a Comment