Maxime Dupré
Maxime Dupré

Reputation: 5737

Error when running jest on a react native + typescript app (Jest encountered an unexpected token)

It seems like everyone and their mother are having a variation of this problem. Nothing worked from everything I have tried from all the SO questions and GH tickets.

It should actually be quite simple, since my project is pretty much a new barebone project. Yet I still can't figure out what is wrong for the life of me.

When I run jest:

/Desktop/Dropbox/Programming/iphone-app/fe/App.spec.tsx:11
    const tree = react_test_renderer_1.default.create(<App_1.default />).toJSON();
                                                      ^

SyntaxError: Unexpected token <

My config files:

// jest.config.js

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

-

// tsconfig.json

{
    "compilerOptions": {
        "allowJs": false,
        "allowSyntheticDefaultImports": true,
        "noFallthroughCasesInSwitch": true,
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "isolatedModules": true,
        "jsx": "react-native",
        "lib": [
            "es6"
        ],
        "moduleResolution": "node",
        "noEmit": true,
        "strict": true,
        "target": "esnext"
    },
    "exclude": [
        "node_modules"
    ]
}

-

// babel.config.js

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ['babel-preset-expo'],
    };
};

EDIT #1

Just to be clear, I have tried using the react-native preset in the jest config file, with no success (same error):

// jest.config.js

module.exports = {
    preset: 'react-native',
    transform: {
        '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
        '^.+\\.tsx?$': 'ts-jest'
    },
    globals: {
        'ts-jest': {
            tsConfig: 'tsconfig.json'
        }
    },
    testEnvironment: 'node',
};

Upvotes: 7

Views: 1769

Answers (2)

Maxime Dupr&#233;
Maxime Dupr&#233;

Reputation: 5737

It works with this config file:

const { defaults } = require('jest-config');

module.exports = {
    preset: 'react-native',
    transform: {
        '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
        '^.+\\.tsx?$': 'ts-jest'
    },
    moduleFileExtensions: [
        'tsx',
        ...defaults.moduleFileExtensions
    ],
};

I needed to add

...
moduleFileExtensions: [
    'tsx',
    ...defaults.moduleFileExtensions
],
...

Or else the import App from './App'; in my test would resolve to some other file. By adding tsx as the topmost priority in the moduleFileExtensions option, the app resolves the correct file.

Also the jsx compiler option in tsconfig.json needs to be set to "jsx": "react". I'm not sure why I can't set it to react-native yet, but everything seems to work for now.

EDIT

'^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js' is not needed in newer versions of react-native. Keeping it may also cause a problem.

Upvotes: 2

ibrahimatay
ibrahimatay

Reputation: 59

I think, the problems are opening and closing. Can you try editing your code as follows?

import 'react-native'
import renderer from 'react-test-renderer'
import { App } from './app'
import React from 'react'

test('renders correctly', () => {
  const tree = renderer.create(
    <App />
  )
  expect(tree).toBeDefined()
})

Upvotes: 0

Related Questions