Jest gives an error: "SyntaxError: Unexpected token export"

Question

I'm using Jest to test my React app.

Recently, I added DeckGL to my app. My tests fail with this error:

Test suite failed to run

/my_project/node_modules/deck.gl/src/react/index.js:21
export {default as DeckGL} from './deckgl';
^^^^^^

SyntaxError: Unexpected token export

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
  at Object.<anonymous> (node_modules/deck.gl/dist/react/deckgl.js:9:14)
  at Object.<anonymous> (node_modules/deck.gl/dist/react/index.js:7:15)

This looks like an issue with Jest transforming a node module before running it's tests.

Here is my .babelrc:

{
  "presets": ["react", "es2015", "stage-1"]
}

Here is my jest setup:

"jest": {
    "testURL": "http://localhost",
    "setupFiles": [
      "./test/jestsetup.js"
    ],
    "snapshotSerializers": [
      "<rootDir>/node_modules/enzyme-to-json/serializer"
    ],
    "moduleDirectories": [
      "node_modules",
      "/src"
    ],
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/test/EmptyModule.js"
    }
  },

I seem to have the correct things necessary to transform export {default as DeckGL }. So any ideas whats going wrong?

Answer 1

This means, that a file is not transformed through TypeScript compiler, e.g. because it is a JS file with TS syntax, or it is published to npm as uncompiled source files. Here's what you can do.

Adjust your transformIgnorePatterns allowed list:

{
  "jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"
    ]
  }
}

By default Jest doesn't transform node_modules, because they should be valid JavaScript files. However, it happens that library authors assume that you'll compile their sources. So you have to tell this to Jest explicitly. Above snippet means that @ngrx, deck and ng-dynamic will be transforemed, even though they're node_modules.

Answer 2

This is because Node.js cannot handle ES6 modules.

You should transform your modules to CommonJS therefore.

Babel 7 >=

Install npm install --save-dev @babel/plugin-transform-modules-commonjs

And to use only for test cases add to .babelrc, Jest automatically gives NODE_ENV=test global variable.

"env": {
    "test": {
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
}

Babel 6 >=

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

to .babelrc

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

Answer 3

And if you are using 'create-react-app', it won't allow you to specify 'transformIgnorePatterns' via Jest property in package.json

As per this https://github.com/facebook/create-react-app/issues/2537#issuecomment-390341713

You can use CLI as below in your package.json to override and it works :

"scripts": {
  "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!your-module-name)/\"",
},

Answer 4

Jest by default won't compile files in the node_modules directory.

transformIgnorePatterns [array]

Default: ["/node_modules/"]

An array of regexp pattern strings that are matched against all source file paths before transformation. If the test path matches any of the patterns, it will not be transformed.Default: ["/node_modules/"]

DeckGL seems to be in ES6, to make jest able to read it, you need to compile this as well.
To do that, just add an exception for DeckGL in the transformignorePatterns

"transformIgnorePatterns": ["/node_modules/(?!deck\.gl)"]

https://facebook.github.io/jest/docs/en/configuration.html#transformignorepatterns-array-string