question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Jest encountered an unexpected token

See original GitHub issue

Issue :

I am using ts-jest to test my typescript library. When I run jest, I get the following 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:

    /Users/mohsinulhaq/Documents/react-popper-tooltip/tests/TooltipTrigger.spec.tsx:9
    const BasicTooltipTrigger = ({ tooltip, children, hideArrow, ...props }) => (<src_1.default {...props} tooltip={({ getTooltipProps, getArrowProps, placement }) => (<div {...getTooltipProps({
                                                                                 ^

    SyntaxError: Unexpected token <

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

Here is my jest.config.js:

module.exports = {
  preset: 'ts-jest',
  globals: {
    'ts-jest': {
      diagnostics: false
    }
  }
};

and my babel.config.js:

module.exports = {
  presets: ['@babel/typescript', ['@babel/env', {loose: true}], '@babel/react'],
  plugins: [['@babel/proposal-class-properties', {loose: true}]]
};

In my package.json, I do have jest, ts-jest, babel-jest and babel-core@7.0.0-bridge.0 installed. Please help. Thanks.

EDIT: I get the same output with the babel config file removed. Looks like ts-jest is not picking the babel config file up.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:16
  • Comments:34 (1 by maintainers)

github_iconTop GitHub Comments

208reactions
jimishshahcommented, Jan 23, 2019

@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)"]
};
149reactions
cgilmorecommented, Jan 18, 2019

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

// jest.config.js

module.exports = {
  preset: 'ts-jest',
  transform: {
    '^.+\\.tsx?$': 'babel-jest',
  },
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Jest encountered an unexpected token - Stack Overflow
json when using create-react-app. I have issues with Jest picking up an internal library, Jest would display 'unexpected token' errors wherever ...
Read more >
How I Fixed The Unexpected Token Error In Jest
Jest encountered an unexpected token. Depending upon your setup, you might see the error on the first line of the code file or...
Read more >
Jest encountered an unexpected token inside ts-jest ... - GitHub
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...
Read more >
test suite failed to run jest encountered an unexpected token ...
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...
Read more >
TypeScript Jest: Unexpected Token Export - Reddit
But most likely you will want to use common JS modules. Check your ts-config module settings to output to commonjs, and update your...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found