async-storage: Getting [@RNC/AsyncStorage]: NativeModule: AsyncStorage is null. when running jest

Current behavior

I have two tests running with jest on react native code. One is for a component and one is for a service. Both are not using AsyncStorage but calling other classes, which do that. For simplicity I give you here the code for the Service, the class, which is called by the Service and the test for the Service. UserService:

import request from './request'
import * as Constants from '../../utils/Constants'

function getUser() {
    return request({
        url: Constants.USER,
        method: 'GET'
    }, true)
}

function login(user) {
    return request({
        url: Constants.LOGIN,
        method: 'POST',
        data: user
    }, false)
}

const UserService = {
    login, getUser
};

export default UserService;

request:

import axios from 'axios';
import AsyncStorage from '@react-native-community/async-storage';
import * as Constants from './../../utils/Constants'


/**
 * Request Wrapper with default success/error actions
 */

const request = async function (options, isHeader = true) {

let token = null;
let header = null;
if (isHeader) {
    token = await AsyncStorage.getItem("Auth"); /// Add header
    header = {
        // add special header to XHR requests
        'X-Requested-With': 'XMLHttpRequest',
        // add authorization
        'Authorization': `${JSON.parse(token).token}`
      }
}

const client = axios.create({
    baseURL: Constants.BASE_URL,
    headers: header

});

const onSuccess = function (response) {

    console.log('Request Successful!', response);
    return response.data;
}

const onError = function (error) {
    console.log('Request Failed:', error.config);

    if (error.response) {
        // Request was made but server responded with something
        // other than 2xx
        console.debug('Status:', error.response.status);
        console.debug('Data:', error.response.data);
        console.debug('Headers:', error.response.headers);

    } else {
        // Something else happened while setting up the request
        // triggered the error
        console.debug('Error Message:', error.message);
    }

    return Promise.reject(error.response || error.message);
}


return client(options)
    .then(onSuccess)
    .catch(onError);
}

export default request;

The test for UserService:

import mockAxios from 'jest-mock-axios';
import * as Constants from './../../utils/Constants'
import UserService from './UserService';
import sinon from 'sinon';
import MockStorage from './../../test/MockStorage';

const storageCache = {};
const AsyncStorage = new MockStorage(storageCache);

jest.setMock('AsyncStorage', AsyncStorage)

afterEach(() => {
    mockAxios.reset();
})

describe('UserService', () => {
    it('getUser should call axios get', async () => {
      const expectedUrl = `${Constants.BASE_URL}${Constants.USER}`;
      const user = {user:'test', password: 'test'};
      const expectedCallArgs = {
        method: 'GET',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      };
     var spy = sinon.spy(AsyncStorage, "getItem");
     await UserService.getUser();

     expect(mockAxios.get).toHaveBeenCalledWith(expectedUrl, expectedCallArgs);
     expect(spy.calledOnce).toBeTruthy();
     mockAxios.mockResponse({data: user});
    });
});

When running the test, I´m getting this error:

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

There are also steps written down to fix this issue, but none of them helped.

Expected behavior

The expected behavior would be, that AsyncStorage is used and is not null.

Repro steps

  • creating a project with react-native init
  • running react-native start
  • running react-native run-android (after this two steps app works like expected)
  • running npm run test (which runs jest)

Environment

  • Async Storage version: 1.6.1

  • React-Native version: 0.60.4

  • Platform tested: Android

  • Logs/Error that are relevant: 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 `--clearCache` 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://github.com/react-native-community/async-storage/blob/LEGACY/docs/Jest-integration.md
    

    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/AsyncStorage.js:22:9)
    at Object.<anonymous> (node_modules/@react-native-community/async-storage/lib/index.js:5:1)
    

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 18
  • Comments: 16 (1 by maintainers)

Most upvoted comments

Inside the ./src/, create __mocks__/@react-native-community/async-storage.js

Place this content inside the async-storage.js file: export default from '@react-native-community/async-storage/jest/async-storage-mock'

Your tests should work fine now.

~~For future visitors, the Jest + AsyncStorage integration moved to https://react-native-community.github.io/async-storage/docs/advanced/jest~~

The link changed again. See comment below.

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

Place this content inside the async-storage.js file: export default from '@react-native-async-storage/async-storage/jest/async-storage-mock.js'

It worked for me

i’m also facing this issue, i resolved it by adding the mock function given in jest docs to test Setup file. https://react-native-async-storage.github.io/async-storage/docs/advanced/jest/ jest.mock('@react-native-async-storage/async-storage', () => require('@react-native-async-storage/async-storage/jest/async-storage-mock') );

@Krizzu I checked the docs again and I missed the @react-native-community folder in mocks. So it is working now.

I will close the issue now.

Dentro de ./src/, crie __mocks__/@react-native-community/async-storage.js

Coloque este conteúdo dentro do arquivo async-storage.js: export default from '@react-native-community/async-storage/jest/async-storage-mock'

Seus testes devem funcionar bem agora.

GALERA, novembro de 2021, utilizei esse mesmo conceito, só que em vez de usar o '@react-native-community/async-storage/jest/async-storage-mock' usei export {} from '@react-native-async-storage/async-storage/jest/async-storage-mock';, pois hoje o react-native nao contem mais a lib @react-native-community dentro do node modules.

Thanks for this solution! FWIW, you can also move the __mocks__ folder into src/tests/ so it doesn’t litter up src/ directory.

@ElliDy

You’re getting this error in your tests because native module of Async Storage is not properly mocked. Checkout jest integration docs to get more details

@dsgithub2018 You need to link this library, if not using RN 0.60+.

@yazmnh87 Here are the docs explaining how autolinking with examples. You can checkout what’s missing in your configuration.

I am facing the same error in IOS also.

Dentro de ./src/, crie __mocks__/@react-native-community/async-storage.js Coloque este conteúdo dentro do arquivo async-storage.js: export default from '@react-native-community/async-storage/jest/async-storage-mock' Seus testes devem funcionar bem agora.

GALERA, novembro de 2021, utilizei esse mesmo conceito, só que em vez de usar o '@react-native-community/async-storage/jest/async-storage-mock' usei export {} from '@react-native-async-storage/async-storage/jest/async-storage-mock';, pois hoje o react-native nao contem mais a lib @react-native-community dentro do node modules.

Translated In English:

GUYS, November 2021, I used this same concept, only instead of using the ‘@react-native-community/async-storage/jest/async-storage-mock’ I used export {} from ‘@react-native-async-storage/async-storage/jest/async-storage-mock’;, because today react-native no longer contains the @react-native-community lib inside node modules .