Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jest encountered an unexpected token #937

Closed
mohsinulhaq opened this issue Jan 5, 2019 · 12 comments

Comments

@mohsinulhaq
Copy link

commented Jan 5, 2019

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.

@mohsinulhaq

This comment has been minimized.

Copy link
Author

commented Jan 12, 2019

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

@cgilmore

This comment has been minimized.

Copy link

commented 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',
  },
}
@ahnpnl

This comment has been minimized.

Copy link
Collaborator

commented Jan 22, 2019

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

@jimishshah

This comment has been minimized.

Copy link

commented Jan 23, 2019

I am having same issue.
@sikthought I tried your suggestion but now I get follow error.

import React from "react";
           ^^^^^

    SyntaxError: Unexpected identifier
@jimishshah

This comment has been minimized.

Copy link

commented 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)"]
};
@mohsinulhaq

This comment has been minimized.

Copy link
Author

commented Jan 23, 2019

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.

@jimishshah

This comment has been minimized.

Copy link

commented Jan 24, 2019

@mohsinulhaq can you share your working jest.config.js file ?

@mohsinulhaq

This comment has been minimized.

Copy link
Author

commented Jan 24, 2019

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

@kulshekhar

This comment has been minimized.

Copy link
Owner

commented Jan 24, 2019

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

@kulshekhar kulshekhar closed this Jan 24, 2019

@paveg paveg referenced this issue May 31, 2019
Merged
@zishe

This comment has been minimized.

Copy link

commented Jun 26, 2019

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

@avivash

This comment has been minimized.

Copy link

commented Jul 9, 2019

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'
      }
    }
@kevinlucero

This comment has been minimized.

Copy link

commented Jul 23, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
8 participants
You can’t perform that action at this time.