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 transformed, even though they're node_modules.

Answer 2

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 3

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 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

Answer 5

It was work around #1 on this page that fixed it for me though workaround #2 on that page is mentioned in above answers so they may also be valid.

"Specify the entry for the commonjs version of the corresponding package in the moduleNameMapper configuration"

jest.config.js

    moduleNameMapper: {
        "^uuid$": require.resolve("uuid"), 
        "^jsonpath-plus$": require.resolve("jsonpath-plus") 
...

Answer 6

In my case I use this config in the file package.json:

"jest": {
    "transformIgnorePatterns": [
      "!node_modules/"
    ]
  }

Answer 7

I was having this issue with a monorepo. A package in the root node_modules was breaking my tests. I fixed by changing my local .babelrc file to babel.config.js. Explanation: https://github.com/facebook/jest/issues/6053#issuecomment-383632515

Answer 8

I was upgrading a project that uses a version of babel that reads the config from .babelrc, when I upgraded to a newer version I read:

https://babeljs.io/docs/en/configuration#whats-your-use-case

What's your use case?

You are using a monorepo?

You want to compile node_modules?

babel.config.json is for you!

On top of:

{
  "jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!(module))"
    ]
  }
}

I renamed .babelrc to babel.config.json too.

Answer 9

This code worked for me // .babelrc

{
  "presets": [
    ["env", {
      "modules": "commonjs", // <- Check and see if you have this line
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

jest understands commonJs so it needs babel to transform the code for it before use. Also jest uses caching when running code. So make sure you run jest --clearCache before running jest.

Tested Environment:
Node v8.13.0
Babel v6+
Jest v27

Answer 10

I'm using a monorepo (it contains multiple packages for the frontend and backend).

The package I'm testing imports a file from another package that uses the dependency uuid.

All the files are in Typescript (not Javascript).

The package I'm testing has a tsconfig file for testing only, called tsconfig.test.json. It has the properties commonjs and allowJs. Adding allowJs solves the problem when importing uuid, I don't know why.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "module": "commonjs",
    "types": [
      "jest",
      "node"
    ],
    // Necessary to import dependency uuid using CommonJS
    "allowJs": true
  },
  "include": [
    "jest.config.ts",
    "**/*.test.ts",
    "**/*.d.ts"
  ]
}

Answer 11

I got same error. Library A gave such error. I did not use this library in my code directly. I played with jest config a lot of time. But I found that I forget to mock library B in ...test.tsx file. After mocking there was not that error. Sounds pretty stupid but it works for me.

Answer 12

I had the exact same problem when using jest with vite+swc and a component using the d3 library (d3-array and d3-shape was having a problem).

This advice to add this to jest.config.js solved it:

transformIgnorePatterns: ['node_modules/(?!@ngrx|(?!deck.gl)|d3-scale)'],

This got me wondering why this worked because I don't use ngrx or deck.gl. But then I noticed that this is equivalent to:

 transformIgnorePatterns: ['(?!abc|(?!def))'],

The advice also works:

transformIgnorePatterns: ['!node_modules/'],

Which led me to the final answer of

transformIgnorePatterns: [],

Just adding this line with an empty array is the simplest answer which worked.

Answer 13

I had the same problem after upgrading 2 projects from Angular 12 to Angular 14 and 15.

After much searching, the ONLY thing that turned both projects in good ones again was by upgrading the 'Rxjs' package to a newer/newest version. The ONLY thing.

Be sure to have that RxJs upgraded. After that I made sure to have the tslib upgraded as well.

The base Jest configuration was via this course.

Answer 14

I had the same error of importing dataSet from vis-data.js library

import { DataSet } from 'vis-data/esnext';

So I just removed /esnext from the path and now it works:

import { DataSet } from 'vis-data';