26

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?

skyboyer
  • 22,209
  • 7
  • 57
  • 64
undefined
  • 978
  • 1
  • 12
  • 30
  • Maybe you can read the comment here. https://github.com/facebook/jest/issues/9292#issuecomment-569673251 – Tong Jan 23 '20 at 04:52
  • Did you try to import the package inside your test as well? Or mocking the gapi functions? I believe you have to mock it. – Lucas Andrade May 13 '20 at 19:19

5 Answers5

16

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.

Seth
  • 6,514
  • 5
  • 49
  • 58
  • 1
    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. – nycynik May 30 '21 at 04:48
  • 1
    This is huge. Thanks so much for saving hours of babel crap! – Robert Moskal Oct 03 '22 at 21:48
  • Command returns error: basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')") ^^^^^^^ SyntaxError: missing ) after argument list – Julius Goddard Jan 28 '23 at 16:44
8

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
Marcellia
  • 204
  • 2
  • 9
6

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.

Onno van der Zee
  • 314
  • 3
  • 9
2

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
Aravinda Meewalaarachchi
  • 2,551
  • 1
  • 27
  • 24
0

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

jorjun
  • 115
  • 1
  • 2
  • 6