RNEncryptedStorage is undefined while running testing-library/react-native with Jest

Question

I am trying to setup my react-native test environment with react-native-testing-library and Jest. My react-native application uses react-native-encrypted-storage. When I run my first sample test (code below) it fails saying RNEcryptedStorage is undefined.

import React from "react";
import "react-native";
// Note: test renderer must be required after react-native.
import renderer from "react-test-renderer";
import App from "../App";
    
it("renders correctly", () => {
    console.log("Rendering");
    renderer.create(<App />);
});

Full error:

RNEncryptedStorage is undefined

at Object. (node_modules/react-native-encrypted-storage/lib/commonjs/EncryptedStorage.ts:7:9) at Object. (node_modules/react-native-encrypted-storage/lib/commonjs/index.ts:1:1)

This is first time I am setting up my test environment so not sure where do I start for resolving this issue.

Answer 1

The above will work, but if you mock other aspects of react-native it could create a problem with the other mocks. If you want to mock RNEncryptedStorage on its own, you could try a slight variation of the above solution:

__mocks__/react-native-encrypted-storage/index.js


const RNEncryptedStorage = {
  setItem: jest.fn(() => Promise.resolve()),
  getItem: jest.fn(() => Promise.resolve('{ "foo": 1 }')),
  removeItem: jest.fn(() => Promise.resolve()),
  clear: jest.fn(() => Promise.resolve()),
};

export default RNEncryptedStorage;

Answer 2

You can mock the RNEncryptedStorage native module during your tests by adding a react-native mock to your __mocks__ folder.

// tests/__mocks__/react-native.js

module.exports = {
    NativeModules: {
        RNEncryptedStorage: {
            setItem: jest.fn(() => Promise.resolve()),
            getItem: jest.fn(() => Promise.resolve('{ "foo": 1 }')),
            removeItem: jest.fn(() => Promise.resolve()),
            clear: jest.fn(() => Promise.resolve())
        }
    }
}