Test suite failed to run with @react-navigation/stack

Question

I started writing unit testing in React Native app. I created new project in Typescript using the following command.

npx react-native init rn_jest --template react-native-template-typescript

When i executed npm test in root of project i got the below results

PASS tests/App-test.tsx (7.472s) ✓ renders correctly (4329ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 7.64s Ran all test suites.

Next i integrated React Navigation in app and executed npm test again, but this time i got following error

FAIL tests/App-test.tsx ● Test suite failed to run

/Users/macbookpro/Documents/Manheium_Express/rn_jest/node_modules/@react-navigation/stack/lib/commonjs/views/assets/back-icon.png:1
�PNG

SyntaxError: Invalid or unexpected token

  at Runtime._execModule (node_modules/jest-runtime/build/index.js:1157:58)

console.error react-native-gesture-handler module was not found. Make sure you're running your app on the native platform and your code is linked properly (cd ios && pod install && cd ..).

For installation instructions, please refer to https://docs.swmansion.com/react-native-gesture-handler/docs/#installation

  at Object.<anonymous> (node_modules/react-native-gesture-handler/lib/commonjs/RNGestureHandlerModule.ts:5:3)

Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 3.229s Ran all test suites. npm ERR! Test failed. See above for more details.

I checked this link and not found any solution. here is code inside App-test.tsx file

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';

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

Below is the package.json

 "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.0.0",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.18.1"
  },

I followed this link also but no luck. if any one has solved this issue in unit test using jest please help me out

Answer 1

I handled that issue by following Jest documentation:

Testing with Jest

And following the Handling Static Assets section from this doc:

Handling Static Assets

My package.json looks like:

  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "setupFiles": [
      "<rootDir>/jest/setup.js"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    }

Finally, I ran:

yarn jest