Ts-jest: Unable to use ts-jest with JSX

[stephenotalora]

Issue :

I'm unable to run react tests as these fail with the same error described bellow.
I have tried to set my tsconfig.json to all jsx enum options and I still fail to get jest to run with jsx. any help on this would be highly appreciated!

Please note that non react tests work as expected, however all react tests fail with the same error. I have tried to set my tsconfig.json to all jsx enum options and I still fail to get jest to run with jsx. BTW I have tried both manual jest.config.js as well as jest.preset set to ts-jest and I always seem to run into the same issue.

Expected behavior :

Able to run React16 / jest files containing jsx.

Debug log:

log file content

Error when jsx is set to react

yarn test
yarn run v1.9.4
$ jest
 FAIL  packages/common/tests/components/Container.test.tsx
  ● Test suite failed to run

    /personal-projects/beluga-apps/node_modules/react-native/Libraries/StyleSheet/StyleSheet.js:18
    import type {
           ^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.get StyleSheet [as StyleSheet] (node_modules/react-native/Libraries/react-native/react-native-implementation.js:255:12)
      at Object.<anonymous> (node_modules/styled-components/native/dist/styled-components.native.cjs.js:6478:44)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.654s

error when jsx is set to react-native or preserve

 component: enzyme_1.shallow(<Container_1.default {...props}/>)
                                    ^

    SyntaxError: Unexpected token <
input on this would be much appreciated. Thanks!

yarn test
yarn run v1.9.4
$ jest
 FAIL  packages/common/tests/components/Container.test.tsx
  ● Test suite failed to run

    /personal-projects/beluga-apps/node_modules/react-native/Libraries/StyleSheet/StyleSheet.js:18
    import type {
           ^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.get StyleSheet [as StyleSheet] (node_modules/react-native/Libraries/react-native/react-native-implementation.js:255:12)
      at Object.<anonymous> (node_modules/styled-components/native/dist/styled-components.native.cjs.js:6478:44)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.654s

**error when jsx is set to react-native or preserve**

 component: enzyme_1.shallow(<Container_1.default {...props}/>)
                                    ^

    SyntaxError: Unexpected token <
input on this would be much appreciated. Thanks!

jest.config.js

module.exports = {
  verbose: true,
  resetMocks: true,
  testEnvironment: 'node',
  cacheDirectory: '.jest',
  coverageDirectory: 'coverage',
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
  globals: {
    'ts-jest': {
      tsConfig: './tsconfig.jest.json',
      diagnostics: {
        pathRegex: /\.(spec|test)\.ts$/,
        ignoreCodes: [151001],
      },
    },
  },
  moduleFileExtensions: [
    'ts',
    'tsx',
    'js'
  ],
  notify: true,
  notifyMode: 'always',
  roots: ['<rootDir>/packages'],
  testMatch: [
    '**/tests/*.+(tsx|js)',
    '**/*.test.+(ts|tsx|js)',
  ],
  transform: {
    '^.+\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest',
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },
  transformIgnorePatterns: [
    "<rootDir>/node_modules"
  ],

  // Enzyme setup
  setupTestFrameworkScriptFile: '<rootDir>/jest/setup.js',
  snapshotSerializers: ['enzyme-to-json/serializer']
};

tsconfig.jest.json

{
  "compilerOptions": {
    "target": "es2018",
    "jsx": "react-native",
    "moduleResolution": "node"
  },
  "include": ["packages"],
  "exclude": [
    "node_modules",
  ]
}

IMPORTANT: Please note that this is the only component of my monorepo project that I can't seem to be able to get to work properly 😭

[GeeWee]

It seems like "import type" is an uncompiled flow construct. You're going to want to compile the react-native package with just babel.

You can either use the jest react-native preset, as stated here:
https://kulshekhar.github.io/ts-jest/user/react-native/

or if that's not alright, you can see how it works here:
https://github.com/facebook/react-native/blob/master/jest-preset.json

[stephenotalora]

@GeeWee we're using expo, after a few days of severe straggle we figured this one out by using babel7 and jest.config.js transformIgnorePatterns with ts-jest global config. docs helped quite a bit. Thanks!

[takahser]

@stephenotalora I might have the same issue. Would you mind posting the contents of your jest.config.js?