ts-jest: Jest encountered an unexpected token

@mohsinulhaq I was able to fix the error similiar to yours by changing jsx property of tsconfig.json. I changed "jsx": "preserve" -> "jsx": "react" So my tsconfig.json looks like this

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "react",
    "lib": ["dom", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext",
  },
  "include": [
    "**/*.ts",
    "**/*.tsx"
  ],
}

jest.config.js

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testMatch: ["**/__tests__/**/*.ts?(x)", "**/?(*.)+(test).ts?(x)"]
};

I was having this same problem, and this seems to work:

// jest.config.js

module.exports = {
  preset: 'ts-jest',
  transform: {
    '^.+\\.tsx?$': 'babel-jest',
  },
}

The only issue, when I run a project it changes jsx back to preserve

@zishe i was seeing the same issue. I ended up creating a tsconfig.json and a tsconfig.test.json. the latter extends tsconfig.json and changes compilerOptions.jsx to be react.

then i added this to my jest config:

   globals: {
      'ts-jest': {
        tsConfig: 'tsconfig.test.json'
      }
    }

Wrestled with this error and finally got ts-jest to work in my project. To do so, I created a bare bones repo, got it working there, and then applied what I learned to my project. To summarize:

• In tsconfig.json, I had to change "jsx": "preserve" to "jsx": "react"
• After I made that change, I had to run yarn jest --clearCache as @ahnpnl mentioned. Without this step, it the unexpected token error would still to occur whenever I ran tests.

Here is the bare bones repo for anyone that’s interested. It’s using testing-library/react, but it should work with other packages. Also note, it doesn’t rely on babel.

I have since switched to babel-jest + @babel/preset-typescript, which seems to be a much better and well-supported alternative.

for me adding “js” to transform fixed the issue

This is before

"transform": {
-       "^.+\\.(ts|tsx)$": "ts-jest"
}

This is after

"transform": {
+        "^.+\\.(ts|tsx|js)$": "ts-jest"
 }

For anyone still getting this error after reading all the responses above, this helped fix it for me. I’m only using ts-jest, without any babel dependencies whatsoever in my package.json.

1. Copy your tsconfig.json to tsconfig.test.json

2. Add this line to your jest.config.js:

  globals: {
    "ts-jest": {
      tsConfig: "tsconfig.test.json"
    }
  }

1. Paste this to your tsconfig.test.json

{
  "compilerOptions": {
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "target": "es5"
  }
}

The only issue, when I run a project it changes jsx back to preserve

all I had to do to fix this was create a file jest.config.js with the contents of:

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

while having also installed ts-jest

The best solution is to give up on writing tests in JavaScript. Come back in another ten years.

So I came across this solution in my Google travels. It worked for me. If it is incorrect, please explain my mistake.

.babelrc

"env": {
    "test": {
        "presets": ["next/babel"]
    }
}

https://github.com/mohsinulhaq/react-popper-tooltip here my repository where I use the above config

Jest expects module in your tsconfig.spec.ts to set to commonjs. After setting it to commonjs, you have to run jest --clearCache and then run your tests again

same issue and it works for mine:

1. execute jest --init, create jest.config.ts
2. edit jest.config.ts:

export default {
  ...
  "transform": {
    "^.+\\.(js|ts|tsx)$": "ts-jest"
  },
  ...
}

I had a similar problem. Exact problem was this:

    Details:

    SyntaxError: useHover_test.tsx: Unexpected token (8:53)


       6 | 
       7 | const DummyComponent: React.FC = props => {
    >  8 |   const [ref, isHovering] = useHover<HTMLDivElement>();
         |                                                      ^
       9 |   return <div ref={ref}>{isHovering && props.children}</div>;
      10 | };
      11 | describe('useHover', () => {

I’m using babel 7 and jest 24.9. Changing .babelrc to babel.config.js didn’t resolve the problem. Content of the file was:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: {
            browsers: [
              'last 2 Chrome versions',
              'last 2 Edge versions',
              'last 2 Firefox versions',
              'last 2 Safari versions',
              'IE 11',
            ],
          },
          loose: true,
          modules: false,
          useBuiltIns: 'usage',
          corejs: {
            version: 3,
            proposals: true,
          },
        },
      ],
      '@babel/preset-react',
      '@babel/preset-flow',
    ],
    plugins: [
      '@babel/plugin-transform-spread',
      '@babel/plugin-syntax-dynamic-import',
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: false,
        },
      ],
    ],
    ignore: ['node_modules'],
    overrides: [
      {
        test: ['./src/**/*.ts', './src/**/*.tsx'],
        presets: [
          '@babel/preset-typescript',
          [
            '@babel/preset-env',
            {
              targets: {
                node: 'current',
              },
            },
          ],
          '@babel/preset-react',
        ],
      },
    ],
    env: {
      test: {
        plugins: ['babel-plugin-rewire-ts'],
        presets: ['@babel/preset-env', '@babel/preset-react'],
      },
    },
  };
};

The problem in it was missing @babel/preset-typescript in env. I changed it to

    env: {
      test: {
        plugins: ['babel-plugin-rewire-ts'],
        presets: ['@babel/preset-typescript', '@babel/preset-env', '@babel/preset-react'],
      },
    },

The only issue, when I run a project it changes jsx back to preserve

@zishe i was seeing the same issue. I ended up creating a tsconfig.json and a tsconfig.test.json. the latter extends tsconfig.json and changes compilerOptions.jsx to be react.

then i added this to my jest config:

   globals: {
      'ts-jest': {
        tsConfig: 'tsconfig.test.json'
      }
    }

thanks, this worked for me.

I think it’s much better now to rely on babel for compiling typescript after babel 7, no ts-jest needed as there is an official typescript babel preset (https://babeljs.io/docs/en/babel-preset-typescript). You can wire it to jest using babel-jest like you would normally do for non-ts projects.

For whom having this issue in typescript 4.1 or later, and have explicitly set ‘jsxImportSource’ option in tsconfig.json file, you could probably try setting ‘jsx’ to ‘react-jsx’, as ‘react’ mode would make ‘jsxImportSource’ yelling.

e.g.

{ “compilerOptions”: { “jsx”: “react-jsx”, “jsxImportSource”: “@emotion/react”, } }

I was able to get the JS node module with the offending import statement transpiled by doing:

and use the js-with-ts preset:

module.exports = {
  testEnvironment: "node",
  preset: "ts-jest/presets/js-with-ts",
  transformIgnorePatterns: [ "/node_modules/(?!MODULE_NAME_HERE).+\\.js$"],
};

For me the error occured in a non-React project, and the cause was simple: I’ve run npx ts-jest config:init in a subdirectory (by accident) instead of the root folder where tsconfig.json resides. Moving jest.config.js file up the tree fixed the problem.

@jubairsaidi I just want to add onto this, if you have anything in the transform object, remove it. I originally had this which was causing problems with `preset: “ts–jest”

  transform: {
    // "^.+\\.(js|ts|jsx|tsx)$": "<rootDir>/node_modules/ts-jest", << removed
    "^.+\\.css$": "<rootDir>/config/jest/cssTransform.ts",
  },

closing as there’s no minimal repo and because this isn’t required by the OP any more