JEST - [@RNC/AsyncStorage]: NativeModule: AsyncStorage is null

You want to:

While running npm jest, I was thrown by this error here.

 FAIL  __tests__/App-test.js
  ● Test suite failed to run

    [@RNC/AsyncStorage]: NativeModule: AsyncStorage is null.

    To fix this issue try these steps:

      • Run `react-native link @react-native-community/async-storage` in the project root.

      • Rebuild and restart the app.

      • Run the packager with `--reset-cache` flag.

      • If you are using CocoaPods on iOS, run `pod install` in the `ios` directory and then rebuild and re-run the app.

      • If this happens while testing with Jest, check out docs how to integrate AsyncStorage with it: https://react-native-community.github.io/async-storage/docs/advanced/jest

    If none of these fix the issue, please open an issue on the Github repository: https://github.com/react-native-community/react-native-async-storage/issues

      at Object.<anonymous> (node_modules/@react-native-community/async-storage/lib/commonjs/AsyncStorage.native.js:17:9)
      at Object.<anonymous> (node_modules/@react-native-community/async-storage/lib/commonjs/index.js:5:1)

Details:

As of current, I’m not doing any unit test that has anything to do with AsyncStorage. Was simply running the default test given while project creation

/**
 * @format
 */

import 'react-native';
import React from 'react';
import App from '../App';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  renderer.create(<App />);
});

However I’ve also tired setting up the mock directory according to the steps given from AsyncStorage lib. Which end up with another error as following:

New Error

 FAIL  __tests__/App-test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'default' of undefined

      1 | import mockAsyncStorage from './__mocks__/@react-native-async-storage/async-storage';
    > 2 | 
        | ^
      3 | jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);

      at jest.setup.js:2:24
      at Object.<anonymous> (jest.setup.js:7:44)

Files /__mocks__/@react-native-async-storage/async-storage.js

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

package.json (only the Jest part is showing)

"jest": {
    "preset": "react-native",
    "setupFiles": [
      "./jest.setup.js"
    ]
  }

jest.setup.js

import mockAsyncStorage from './__mocks__/@react-native-async-storage/async-storage';

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

[BenjaminSAILcloud]

Hi everyone,

I have the same issue where even if I follow the doc, I still get errors for the two ways.

I am only trying to run the default RN test:

/**
 * @format
 */

import 'react-native';

import App from '../src/index';
import React from 'react';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  renderer.create(<App />);
});

Details for Jest setup file

Error:

 FAIL  __tests__/App.test.tsx
  ● Test suite failed to run

    [@RNC/AsyncStorage]: NativeModule: AsyncStorage is null.

    To fix this issue try these steps:

      • Run `react-native link @react-native-async-storage/async-storage` in the project root.

      • Rebuild and restart the app.

      • Run the packager with `--reset-cache` flag.

      • If you are using CocoaPods on iOS, run `pod install` in the `ios` directory and then rebuild and re-run the app.

      • If this happens while testing with Jest, check out docs how to integrate AsyncStorage with it: https://react-native-async-storage.github.io/async-storage/docs/advanced/jest

    If none of these fix the issue, please open an issue on the Github repository: https://github.com/react-native-async-storage/react-native-async-storage/issues

      at Object.<anonymous> (node_modules/@react-native-async-storage/async-storage/lib/commonjs/AsyncStorage.native.js:17:9)
      at Object.<anonymous> (node_modules/@react-native-async-storage/async-storage/lib/commonjs/index.js:6:1)

package.json

"jest": {
    "setupFiles": [
      "./tests/jest.setup.js"
    ]
  }

tests/jest.setup.js

import {jest} from '@jest/globals'; // tried with and without this line
import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';

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

Details for direct mock

Error:

 FAIL  __tests__/App.test.tsx
  ● Test suite failed to run

    TypeError: Cannot read property 'default' of undefined

      11 | import renderer from 'react-test-renderer';
      12 |
    > 13 | jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);
         |                                                              ^
      14 |
      15 | it('renders correctly', () => {
      16 |   renderer.create(<App />);

      at __tests__/App.test.tsx:13:62
      at Object.<anonymous> (src/providers/global_provider.js:3:1)
      at Object.<anonymous> (src/index.js:3:1)

__mocks__/@react-native-async-storage/async-storage.js

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

App.test.tsx

/**
 * @format
 */

import 'react-native';

import App from '../src/index';
import React from 'react';
import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

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

it('renders correctly', () => {
  renderer.create(<App />);
});

[radko93]

1. Using async storage directly in the project codebase works.
2. Importing a node module that uses async storage under the hood does not work.

Seems like it might be a jest issue.

Our current setup: “@react-native-async-storage/async-storage”: “^1.15.2”, “jest”: “^26.6.3”

import { jest } from '@jest/globals';
import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';

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

"jest": {
    "setupFiles": [
      "./jestSetupFile.js"
    ],
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "globals": {
      "window": {}
    }
  }