React Native - Jest.mock must be an inline function. Trouble testing component that uses 'withNavigation'

Question

I'm using Jest and Enzyme in my React Native app to test my component and I keep getting this error when testing babel-plugin-jest-hoist: The second argument of 'jest.mock' must be an inline function. I don't really understand what I'm doing wrong because I am passing an inline function.

Here is my code in my test file (search-screen.tests.js):

// All necessary imports here

jest.mock('react-navigation', ({ withNavigation: (component) => component}));

describe("Search screen renders appropriately and function work", () => {
    it("renders correctly", () => {
        const searchScreen = renderer.create(<SearchScreen />).toJSON();
        expect(searchScreen).toMatchSnapshot();
    });
});

I used this stack overflow post for reference

The main reason I'm trying to mock react-navigation is because my search screen component is exported using 'withNavigation' (like so: export default withNavigation(SearchScreen) ) and it breaks a lot of tests if I don't attempt to do this, is this the right thing to do?

Here is my package.json file as well, just incase.

{
  "name": "app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "ios-build": "sh scripts/ios/build-ipa.sh",
    "test": "jest"
  },
  "dependencies": {
    "axios": "0.18.0",
    "prop-types": "15.6.2",
    "react": "16.4.1",
    "react-native": "0.56.0",
    "react-native-cookies": "3.3.0",
    "react-native-elements": "0.19.1",
    "react-native-google-analytics-bridge": "6.0.1",
    "react-native-maps": "0.21.0",
    "react-native-snackbar": "0.5.1",
    "react-native-vector-icons": "4.6.0",
    "react-native-version-number": "0.3.4",
    "react-navigation": "2.9.1",
    "rxjs": "6.2.2"
  },
  "devDependencies": {
    "babel-jest": "23.4.0",
    "babel-preset-react-native": "5.0.2",
    "@babel/core": "^7.0.0-beta.47",
    "@babel/preset-env": "^7.0.0-beta.47",
    "@babel/preset-flow": "^7.0.0-beta.47",
    "babel-core": "^7.0.0-beta.47",
    "babel-eslint": "^8.2.5",
    "babel-loader": "^7.1.5",
    "babel-runtime": "^6.26.0",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.6.0",
    "jest": "23.4.0",
    "react-dom": "^16.6.0",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|native-base|react-navigation)"
    ],
    "setupTestFrameworkScriptFile": "./setupTests.js",
    "setupFiles": [
      "./setupTests.js"
    ]
  }
}

So what can I do to stop getting the react-navigation error with Jest? Let me know if you need more information from me. Any ideas will be helpful.

Answer 1

I'm guessing that the problem is that, for all intents and purposes, you're passing an object as the second parameter to jest.mock. The arrow function is within the object in the withNavigation key.

I believe that you need to pass it an arrow function that returns that same object, like this:

jest.mock('react-navigation', () => ({ withNavigation: (component) => component}));

I hope this helps! Cheers.