How to resolve a NativeModule.RNLocalize is null error in test?

Question

I'm using the package react-native-localize to provide localization in an app. I've already linked the library and it works fine running on a device.

Issue:

When I test a component that imports react-native-localize. I get the error react-native-localize: NativeModule.RNLocalize is null. In order to resolve this null error I call jest.mock('react-native-localize'); at the top of the test file. But I still get an error pointing to NativeModule.RNLocalize is null. I've also provided the mock as mentioned in the package README to no avail.

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';
import * as RNLocalize from 'react-native-localize';

 // mocking the module here with jest.mock
jest.mock('react-native-localize');

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

Question:

How can you resolve a NativeModule.RNLocalize is null error in test?

Test Stack Trace:

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

    react-native-localize: NativeModule.RNLocalize is null. To fix this issue try these steps:
    • Run `react-native link react-native-localize` in the project root.
    • Rebuild and re-run the app.
    • If you are using CocoaPods on iOS, run `pod install` in the `ios` directory and then rebuild and re-run the app. You may also need to re-open Xcode to get the new pods.
    • Check that the library was linked correctly when you used the link command by running through the manual installation instructions in the README.
    * If you are getting this error while unit testing you need to mock the native module. Follow the guide in the README.
    If none of these fix the issue, please open an issue on the Github repository: https://github.com/react-native-community/react-native-localize 

      16 | 
      17 | import {NavigationContainer} from '@react-navigation/native';
    > 18 | import * as RNLocalize from 'react-native-localize';
         | ^
      19 | import {Icon} from 'native-base';
      20 | import {createStackNavigator} from '@react-navigation/stack';
      21 | const Stack = createStackNavigator();

      at Object.<anonymous> (node_modules/react-native-localize/lib/commonjs/module.js:17:9)
      at Object.<anonymous> (node_modules/react-native-localize/lib/commonjs/index.js:3:1)
      at Object.<anonymous> (src/modules/AppView.js:18:1)
      at Object.<anonymous> (src/modules/AppViewContainer.js:2:1)
      at Object.<anonymous> (App.js:23:1)
      at Object.<anonymous> (__tests__/App-test.js:7:1)

Lymphangial

Resolved this by creating a mock of react-native-localize in the mocks folder. The mock was created using a manual mock jest.genMockFromModule. see: jestjs.io/docs/en/manual-mocks#examples – Lymphangial

Answer 1

I fixed this issue in my tests by adding these lines in my jest configuration file

jest.mock("react-native-localize", () => {
  return {
    getLocales: jest.fn(),
    // you can add other functions mock here that you are using
  };
});

Strobel

Answer 2

I found the solution :- paste this code in your jest configuration file (setup.js)

jest.mock("react-native-localize", () => {
    getLocales: jest.fn(),   // use getLocales if you have used this, else use the one that you have used
    // you can add other functions mock here that you are using
  };
});

Krucik

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Clintonclintonia