react-native.md

id	title
react-native	Using with React Native

To use ts-jest with React Native + TypeScript and Babel 7, you'll first need to follow this tutorial.

After that, some little modifications will be required as follows:

Babel config

If you didn't yet, move any Babel config from .babelrc to babel.config.js. It should at least contain:

// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
}

TypeScript Configuration

Create a new tsconfig.spec.json at the root of your project with the following content

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

Jest config

In the same way that you moved Babel config, move Jest config from jest key of package.json to jest.config.js. It should look like this:

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

module.exports = {
  preset: 'react-native',
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.spec.json',
    },
  },
  transform: {
    '^.+\\.jsx$': 'babel-jest',
    '^.+\\.tsx?$': 'ts-jest',
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
}