transformIgnorePatterns for StackNavigator and DrawerNavigator

[niyowski]

transformIgnorePatterns for StackNavigator and DrawerNavigator are different in the current documentation and produce different errors:

transformIgnorePatterns for StackNavigator

'node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation)',

node_modules/react-native-reanimated/src/reanimated2/mock.ts:4:1 - error TS1208: 'mock.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

4 const NOOP = () => {
~~~~~

transformIgnorePatterns for DrawerNavigator

'node_modules/(?!(jest-)?react-native|@react-native-community|@react-navigation)',

/node_modules/@react-native/polyfills/error-guard.js:14
type ErrorHandler = (error: mixed, isFatal: boolean) => void;
^^^^^^^^^^^^

SyntaxError: Unexpected identifier

1. Why are they different? Is it a typo or intentional?
2. How could I possibly solve this?

react-native: 0.71.3
react-native-reanimated: ^3.0.2
babel-jest: ^29.2.1
jest: ^29.2.1
ts-jest: ^29.0.5

jest.config.json:

const { defaults: tsjPreset } = require('ts-jest/presets');

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  ...tsjPreset,
  preset: 'react-native',
  transform: {
    '^.+\\.jsx$': 'babel-jest',
    '^.+\\.tsx?$': [
      'ts-jest',
      {
        tsconfig: 'tsconfig.spec.json',
      },
    ],
  },
  transformIgnorePatterns: [
    'node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation)',
    'node_modules/(?!(jest-)?react-native|@react-native-community|@react-navigation)',
  ],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  moduleNameMapper: {
    '^~/(.*)$': '<rootDir>/src/$1',
    '^test/(.*)$': '<rootDir>/test/$1',
    '\\.(png|jpg|ico|jpeg|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mock__/AssetMock.js',
    '\\.svg': '<rootDir>/__mocks__/svgMock.js',
  },
  setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
};

test/setup.ts:

import '@testing-library/jest-native/extend-expect';
import 'react-native-gesture-handler/jestSetup';

jest.mock('react-native-reanimated', () => {
  const Reanimated = require('react-native-reanimated/mock.js');
  Reanimated.default.call = () => {};

  return Reanimated;
});

jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

tsconfig.spec.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "jsx": "react"
  }
}

[mdjastrzebski]

@niyowski our React Navigation documentation is outdated, most of it haven't been touched for last two years. That being said, our React Navigation example is fairly new. Pls check it out, it should contain correct configuration.

Additionally the issues you are facing might be related to using ts-jest which we do not recommend. Rather using regular jest with proper TypeScript setting should be enough. Pls check our basic example for such setup.

[niyowski]

@mdjastrzebski, thanks for your reply.

the issues you are facing might be related to using ts-jest

Could you provide any evidence if that's the case?

which we do not recommend

On which basis ts-jest is not recommended, what is the reasoning?

[thymikee]

If your codebase is not dependent on Babel-unsupported features, there's simply no reason for extra overhead running tsc again when testing. Jest supports TS by default and you most likely do typecheck separately anyway.

[mdjastrzebski]

@niyowski pls note that TS Jest comment is rather a personal opinion rather than scientific fact. The important part is that we do provide example setup for React Navigation & TypeScript (for regular Jest) in our example projects linked above.

As for TS Jest, you can trust @thymikee recommendation, as he's Jest team member. That being said, with enough tinkering you should be able to make TS Jest work for you with React Native (and RNTL). It's worth noting that the issue you quoted is between the TS Jest, React Native and Reanimated packages. There is no RNTL involved in that yet.

[niyowski]

@thymikee, @mdjastrzebski, thank you both for your constructive comments and suggestions.

indeed, when I switched from ts-jest to babel-jest with typescript and configured jest based on your suggestion, I didn't encounter any issues, the tests passed successfully.

having said that, I still find it worth mentioning that I hadn't had any issues with ts-jest until I introduced react-native-reanimated and DrawerNavigator to the project. I personally prefer using ts-jest in my projects, so I'd still be looking out for a solution.

I also want to point out two different transformIgnorePatterns settings on the same page, one for the StackNavigator, and one for DrawerNavigator. since they produce different kinds of errors, I think one of the regexes (not sure which one is best) could be used in order to prevent confusion and have consistency.

[mdjastrzebski]

We definitely have to update the outdated React Navigation page.

If you're looking for "correct" regex,. try the one from our React Navigation example app:

 'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|@react-navigation)'