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.

@HradeshKumar No, I abandoned this way of testing, since most of the sevices/functionalities needed to be mocked which will not give real testing outcome according to me — me_digvijay, Sep 09 '21 at 15:03

score 6 · Answer 1 · answered Sep 03 '21 at 07:55

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;

score 3 · Answer 2 · answered Jun 13 '21 at 13:57

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())
        }
    }
}

Source: https://github.com/emeraldsanto/react-native-encrypted-storage/blob/master/src/__mocks__/react-native.js — Vasyl Nahuliak, Jun 13 '21 at 17:17

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

2 Answers2

Linked