How do you test? (Invariant Violation: Native module cannot be null.)

[mehmetnyarar]

Hi,

I'm trying to test my root component which uses react-native-safarview and I receive the following error:

Invariant Violation: Native module cannot be null.

  at invariant (node_modules/fbjs/lib/invariant.js:25:15)
  at new NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:29:7)
  at Object.<anonymous> (node_modules/react-native-safari-view/SafariViewManager.ios.js:11:20)
  at Object.<anonymous> (node_modules/react-native-safari-view/index.js:7:26)

App.test.tsx

import React from "react";
import Enzyme, { shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import App from "../App";

Enzyme.configure({ adapter: new Adapter() });

it("renders correctly", () => {
  const wrapper = shallow(<App />);
  expect(wrapper).toMatchSnapshot();
});

I created a folder /jest/setup.js and updated my jest.config.js as it's suggested here.

jest.mock("Linking", () => {
  return {
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    openURL: jest.fn(),
    canOpenURL: jest.fn(),
    getInitialURL: jest.fn()
  };
});

but it didn't work. How can I fix it?

jest.config.js

module.exports = {
  cacheDirectory: ".jest/cache",
  preset: "react-native",

  globals: {
    "ts-jest": {
      useBabelrc: true
    }
  },
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  setupFiles: ["<rootDir>/jest/setup.js"],
  snapshotSerializers: ["enzyme-to-json/serializer"],
  transform: {
    "^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest",
    "^.+\\.tsx?$": "ts-jest"
  },
  transformIgnorePatterns: [
    "node_modules/(?!react-native|react-router-native)/"
  ],
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
  testPathIgnorePatterns: ["\\.snap$", "<rootDir>/node_modules/"]
};

"dependencies": {
    "axios": "^0.18.0",
    "react": "^16.4.1",
    "react-native": "0.55.4",
    "react-native-blur": "^3.2.2",
    "react-native-safari-view": "^2.1.0",
    "react-native-vector-icons": "^4.6.0",
    "react-redux": "^5.0.7",
    "react-router-native": "^4.3.0",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "rn-placeholder": "^1.2.0"
  },
  "devDependencies": {
    "@types/enzyme": "^3.1.11",
    "@types/enzyme-adapter-react-16": "^1.0.2",
    "@types/jest": "^23.1.2",
    "@types/react": "^16.4.2",
    "@types/react-dom": "^16.0.6",
    "@types/react-native": "^0.55.25",
    "@types/react-native-safari-view": "^2.0.3",
    "@types/react-native-vector-icons": "^4.6.1",
    "@types/react-redux": "^6.0.3",
    "@types/react-router-native": "^4.2.3",
    "@types/react-test-renderer": "^16.0.1",
    "@types/redux": "^3.6.0",
    "@types/redux-devtools-extension": "^2.13.2",
    "@types/redux-thunk": "^2.1.0",
    "babel-jest": "23.2.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react-native": "4.0.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.4",
    "jest": "23.2.0",
    "prettier": "^1.13.6",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "^16.4.1",
    "react-native-typescript-transformer": "^1.2.10",
    "react-test-renderer": "^16.4.1",
    "redux-devtools-extension": "^2.13.5",
    "redux-mock-store": "^1.5.3",
    "ts-jest": "^22.4.6",
    "typescript": "^2.9.2"
  }

[drop-george]

You need to mock this lib too in your jest/setup.js file just like you're doing for Linking

jest.mock('react-native-safari-view', () => ({
  show: () => {},
}))

[koenpunt]

What @drop-george is saying ^