Jest: Cannot use import statement outside a module

Question

I got an error when I run test using Jest, I tried to fix this error for 2 hours. But, I couldn't fix it. My module is using gapi-script package and error is occurred in this package. However, I don't know why this is occurred and how to fix it.

jest.config.js

module.exports = {
  "collectCoverage": true,
  "rootDir": "./",
  "testRegex": "__tests__/.+\\.test\\.js",
  "transform": {
    '^.+\\.js?$': "babel-jest"
  },
  "moduleFileExtensions": ["js"],
  "moduleDirectories": [
    "node_modules",
    "lib"
  ]
}

babel.config.js

module.exports = {
  presets: [
    '@babel/preset-env',
  ]
};

methods.test.js

import methods, { typeToActions } from '../lib/methods';

methods.js

import { gapi } from "gapi-script";
...

Error Message

C:\haram\github\react-youtube-data-api\node_modules\gapi-script\index.js:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import { gapi, gapiComplete } from './gapiScript';

SyntaxError: Cannot use import statement outside a module

What is wrong with my setting?

Traitorous

Maybe you can read the comment here. github.com/facebook/jest/issues/9292#issuecomment-569673251 – Multiplicate

Did you try to import the package inside your test as well? Or mocking the gapi functions? I believe you have to mock it. – Ovate

Answer 1

As of this writing, Jest is in the process of providing support for ES6 modules. You can track the progress here:

https://jestjs.io/docs/en/ecmascript-modules

For now, you can eliminate this error by running this command:

node --experimental-vm-modules node_modules/.bin/jest

instead of simply:

jest

Be sure to check the link before using this solution.

Shelve

This is HUGE! I spent way too long looking for this solution. All tests were working, and then I did a bunch of hours of code, and everything is failing. Found lots of documentation on how to update your configs to get things to pass - tried and failed for a bit, then found this. – Rebellious

This is huge. Thanks so much for saving hours of babel crap! – Leatherjacket

Command returns error: basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')") ^^^^^^^ SyntaxError: missing ) after argument list – Decalogue

Answer 2

I solved this with the help of Paulo Coghi's answer to another question -

Does Jest support ES6 import/export?

Step 1:

Add your test environment to .babelrc in the root of your project:

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

Step 2:

Install the ECMAScript 6 transform plugin:

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

Libya

This works with VenillaJs, thanks – Rosannarosanne

Does not work on its own for typescript – Gabel

With Jest 29 this does not work. – Incompletion

Answer 3

Jest needs babel to work with modules. For the testing alone, you do not need jest.config.js, just name the testfiles xxx.spec.js or xxx.test.js or put the files in a folder named test.

I use this babel.config.js:

module.exports = function (api) {
  api.cache(true)

  const presets = [
    "@babel/preset-env"
  ]

  return {
    presets
  }
}

Adding "type": "module" in package.json or using mjs as stated in other answers is not necessary when your setup is not too complicated.

Ailina

Answer 4

I have also faced the same issue and this was resolved by adding following command-line option as a environment variable.

export NODE_OPTIONS=--experimental-vm-modules npx jest    //linux

setx NODE_OPTIONS "--experimental-vm-modules npx jest"    //windows

Goggle

Answer 5

Upgrading Jest (package.json) to version 29 (latest as of now) solved this problem for me.

Atheism