Skip to main content
Version: 29.0

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:

// jest.config.js
/** @type {import('ts-jest').JestConfigWithTsJest} */
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')

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
preset: 'react-native',
transform: {
'^.+\\.jsx$': 'babel-jest',
'^.+\\.tsx?$': [
'ts-jest',
{
tsconfig: 'tsconfig.spec.json',
},
],
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
}