Jest SyntaxError: Unexpected token <

Question

I'm want to test a component in a React app using Jest Enzyme with TypeScript. I follow the instructions on the Jest site, but for some reason I get:

SyntaxError: Unexpected token <

I can test test some functions. There isn't any problem with that, but when I use a component, I get an error.

This is the Jest configuration in file package.json:

"jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "testMatch": ["**/__tests__/*.(ts|tsx)"],
    "snapshotSerializers": ["enzyme-to-json/serializer"],
    "setupFilesAfterEnv": ["<rootDir>/src/setupEnzyme.ts"],
    "unmockedModulePathPatterns": ["node_modules/react/", "node_modules/enzyme/"]
  }

Enzyme configuration

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

export default class TesComponent extends Component {
    render(){
        return (
            <div>test</div>
        )
    }
}

import { shallow } from 'enzyme'
import TestCompoenent from '../TestComponent'

test('component testing', () => {
    const component = shallow(<TestCompoenent />)
    expect(component.contains(<div>test</div>)).toBeTruthy()
})

This is the error:

Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g., it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /home/user/Documents/local-platform/frontend/src/pages/__tests__/settigs.test.tsx:9
        var component = enzyme_1.shallow(<TestComponent_1.default />);
                                         ^

    SyntaxError: Unexpected token <

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)

I expect for the tests to pass, because Test Component does include <div>test</div>.

One line says "`TesComponent`", without "t" (`export default class TesComponent`), another says "`TestCompoenent`", an extra "e" (`import TestCompoenent from '../TestComponent'`), and yet another "`TestComponent`". Which one is it???? — Peter Mortensen, Jan 29 '23 at 04:30

score 27 · Answer 1 · answered Jun 18 '20 at 08:45

27

Try changing tsconfig.json

"jsx": "preserve" -> "jsx": "react"

answered Jun 18 '20 at 08:45

Pramod Mali

1,588
1
17
29

1

This option specifies how the output should be generated(i.e. JSX syntax converted to, type checking). Details https://www.typescriptlang.org/docs/handbook/jsx.html#basic-usage – Pramod Mali Jun 15 '21 at 04:35
4

Finally!! Just in case, changing it to "react" fixed my main issue. However, it throws some other errors. Solved by replacing it with `react-jsx`, as mentioned by Dan Barclay (https://stackoverflow.com/a/65539274/1883199) – Hans Araya Nov 09 '21 at 08:39
2

This is not working in nextjs. ``- jsx was set to preserve (next.js implements its own optimized jsx transform)`` – programandoconro Sep 28 '22 at 05:46

score 3 · Answer 2 · answered May 25 '23 at 13:50

Adding the @babel/plugin-transform-react-jsx as plugin to babel in babel.config.js resolved this issue for me.

module.exports = {
  presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
  plugins: ['@babel/plugin-transform-react-jsx'],
};

I hope that will be helpful to anyone. Spent a few hours trying different approaches before finding that

score 2 · Answer 3 · edited Jan 29 '23 at 04:34

2

It seems that your configuration does not process the TypeScript file (.tsx) properly.

Here is part of my working configuration:

"jest": {
    "transform": {
       "^.+\\.tsx?$": "ts-jest",
    },
    "moduleFileExtensions": [
       "ts",
       "tsx",
       "js",
       "json"
    ],
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupSpecs.ts"
}

I have used setupTestFrameworkScriptFile instead of setupFilesAfterEnv.

edited Jan 29 '23 at 04:34

Peter Mortensen

30,738
21
105
131

answered Jun 28 '19 at 11:52

Tomasz Białecki

1,041
6
10

i get message saying `Option "setupTestFrameworkScriptFile" was replaced by configuration "setupFilesAfterEnv", which supports multiple paths`, when i press enter to continue i get the same error – Davit Yeritsyan Jun 28 '19 at 12:07
how about adding "moduleFileExtension" ? – Tomasz Białecki Jun 30 '19 at 18:59
please provide test repo, with miniam l package json, jest config, and those 2 simple tsx files – Tomasz Białecki Jul 01 '19 at 09:44
Please see my answer. https://stackoverflow.com/a/70270290/7387345 – sajadab Dec 08 '21 at 05:19

Jest SyntaxError: Unexpected token <

Enzyme configuration

3 Answers3