Unexpected Token Import for ES6 modules

[RyanCCollins]

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
I am using the same testing setup in several projects right now, all from my boilerplate. This problem has popped up in all of them recently, but I haven't yet been able to track it down. It seems that Jest is missing the babel configuration in my package.json and the test suite is failing with 'Unexpected Token Import'. Please keep in mind that up until a week ago, this configuration was working successfully in several projects, so I am assuming it's a regression and figured I should report it.

Note that when I add a .babelrc file the test suite passes for all but one test, where I get the same Unexpected Token Import, which seems bizarre considering there are a dozen passing tests that all use ES6 imports. Without the .babelrc all 14 tests are failing.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal repository on GitHub that we can npm install and npm test.

It can be reproduced from my boilerplate by installing npm run setup and running npm run test.

What is the expected behavior?
I expect that the Jest configuration that worked previously would still work. It would seem that my preprocessor is no longer running with babel-jest as it was previously.

Run Jest again with --debug and provide the full configuration it prints. Please mention your node and npm version and operating system.

jest version = 16.0.2
test framework = jasmine2
config = {
  "scriptPreprocessor": "/Users/myMac/Developer/works-in-progress/open-source-maintaining/scalable-react-boilerplate/config/testing/preprocessor.js",
  "moduleFileExtensions": [
    "js",
    "jsx",
    "json"
  ],
  "moduleDirectories": [
    "node_modules",
    "bower_components",
    "shared"
  ],
  "rootDir": "/Users/myMac/Developer/works-in-progress/open-source-maintaining/scalable-react-boilerplate",
  "name": "-Users-myMac-Developer-works-in-progress-open-source-maintaining-scalable-react-boilerplate",
  "setupFiles": [],
  "testRunner": "/Users/myMac/Developer/works-in-progress/open-source-maintaining/scalable-react-boilerplate/node_modules/jest-jasmine2/build/index.js",
  "automock": false,
  "bail": false,
  "browser": false,
  "cacheDirectory": "/var/folders/nq/7kdqy15d3m399326f7wtb_6w0000gn/T/jest",
  "clearMocks": false,
  "coveragePathIgnorePatterns": [
    "/node_modules/"
  ],
  "coverageReporters": [
    "json",
    "text",
    "lcov",
    "clover"
  ],
  "globals": {},
  "haste": {
    "providesModuleNodeModules": []
  },
  "mocksPattern": "__mocks__",
  "moduleNameMapper": {},
  "modulePathIgnorePatterns": [],
  "noStackTrace": false,
  "notify": false,
  "preset": null,
  "preprocessorIgnorePatterns": [
    "/node_modules/"
  ],
  "resetModules": false,
  "testEnvironment": "jest-environment-jsdom",
  "testPathDirs": [
    "/Users/myMac/Developer/works-in-progress/open-source-maintaining/scalable-react-boilerplate"
  ],
  "testPathIgnorePatterns": [
    "/node_modules/"
  ],
  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.jsx?$",
  "testURL": "about:blank",
  "timers": "real",
  "useStderr": false,
  "verbose": null,
  "watch": false,
  "cache": true,
  "watchman": true,
  "testcheckOptions": {
    "times": 100,
    "maxSize": 200
  }
}

[Maftalion]

I have this same issue with React-Native and Jest,
If you start a new project with:
react-native init AwesomeProject
cd AwesomeProject

then install a module like npm install native-base --save
import any component from native-base into your index.ios.js file

npm test will throw this error:
../test/node_modules/native-base/index.js:4
import Drawer from './Components/vendor/react-native-drawer';
^^^^^^
SyntaxError: Unexpected token import

[cpojer]

See http://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns-customization

[fuyi]

I am having the same issue, the link @cpojer provided doesn't seem to help 😕

[DmitrySkripunov]

Hi! 'transformIgnorePatterns' does....mmmm...that it must does - ignoring)
But how I can use that import in package from node_modules?

[paveltretyakovru]

This props helped me :)

{
  "jest": {
    "verbose": true,
    "moduleDirectories": ["node_modules", "src"]
  },
}

UPD1
Currently, my Jest config is:

"jest": {
    "verbose": true,
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.(css|scss|less)$": "jest-css-modules"
    },
    "globals": {
      "NODE_ENV": "test"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules",
      "src/frontend",
      "src/shared"
    ]
  },

... and it's working for me :)

Best regards, Pavel Tretyakov

[rlage]

Hi guys, I am still hacing this problem, but I am not using react native. The problem is always fixed using jest --no-cache. Is there a way to make jest work using cache, without throwing this error?

[danderson00]

I cannot get this transform to work with my create-react-app application. Always get "Unexpected token import" on any test files containing ES6 import. I've tried all suggestions I could find. no-cache has no impact. I obviously can't ignore these files from the transform (they need to be transformed!).

I give up. Happy to provide any required information.

[joshjung]

I seem to also be experiencing this issue.

[miketeix]

Same here

[dangreenisrael]

Same here

[cpojer]

You are all likely running into this problem because ES modules are not supported in Node and you deliberately stopped compiling them with your build pipeline (webpack, rollup) when you are shipping them to the browser.

You need to enable compilation from ES modules to CommonJS for the "test" env in your babelrc, see https://babeljs.io/docs/usage/babelrc/#env-option and https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/

{
  "env": {
    "production": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

[rlage]

Thanks for your response, cpojer. Yesterday I removed my node env settings and let it ran with default node env, because jest was working globally, but not while using node scripts. It seemed to solve the issue, so I believe that my problem was with node-env settings. But it is still something to monitor.

EDIT: This did not work at all. @cpojer's fix worked like a charm. Thanks.

[heyjordn]

@cpojer 's fix worked for me, thanks