Jest - SyntaxError: Cannot use import statement outside a module

Question

I am using jest:24.9.0 without any configuration, installed globally from a create-react-app. Inside these files I am using es6 modules. There is no error when using "test": "react-scripts test"

However when I move to use jest with "test": "jest --config jest.config.js", I see the below error.

 FAIL  src/configuration/notifications.test.js
  ● Test suite failed to run

    /var/www/management/node/src/configuration/notifications.test.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import notifications from './notifications';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

score 64 · Accepted Answer · edited Dec 23 '21 at 08:13

64

Jest doesn't support ES6 module and hence throwing this error when you directly run the test with Jest. if you want to run like that then you have to add babel.

On the other side, when you run the test with react-scripts it uses babel behind the scene to Transpile the code.

In newer version of jest, babel-jest is now automatically loaded by Jest and fully integrated

Hope this answer your question.

Adding babel in jest.

Installation

babel-jest is now automatically loaded by Jest and fully integrated. This step is only required if you are using babel-jest to transform TypeScript files.

npm install --save-dev babel-jest

Usage

In your package.json file make the following changes:

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    }
  }
}

Create .babelrc configuration file

Create a babel.config.json config in your project root and enable some presets.

To start, you can use the env preset, which enables transforms for ES2015+

npm install @babel/preset-env --save-dev

In order to enable the preset you have to define it in your babel.config.json file, like this:

{
  "presets": ["@babel/preset-env"]
}

Check for more details on Babel official site

edited Dec 23 '21 at 08:13

Audwin Oyong

2,247
3
15
32

answered Jan 23 '20 at 13:50

Sohail Ashraf

10,078
2
26
42

3

How do you "add babel"? – Kees de Kooter Apr 27 '20 at 10:05
1

NB that `.babelrc` doesn't work you have to name it `babel.config.json` – Gunar Gessner Jun 30 '21 at 14:51
1

I had to `npm install regenerator-runtime` and also `import 'regenerator-runtime/runtime'` at the top of my testfile – Rishi Latchmepersad Jan 11 '22 at 01:10
1

@GunarGessner is there a particular reason why .babelrc doesnt work? – blu10 Jul 26 '22 at 11:40
1

@blu10 it just didn't work for me I guess – Gunar Gessner Jul 27 '22 at 14:50
1

Solution doesn't work for me either. – Julius Goddard Jan 28 '23 at 16:46
Is the guidance here to modify package.json and ALSO add .babelrc? Or just one or the other? – Woodchuck Mar 06 '23 at 17:02
When creating `.babelrc` file you should add at least `{}` or a json parse error will throw – Adriano Tornatore Mar 24 '23 at 10:33
The new version of Jest does support ES6, just upgrade it – Malki Jun 18 '23 at 10:26

score 17 · Answer 2 · edited Nov 08 '21 at 03:41

As answers above have described, Jest doesn't support ES6 modules. So, we need transform the code to a supported module type. We could use babel-jest or ts-jest. I recommend using ts-jest for simplicity.

Step 1: installation:

npm i -D ts-jest @types/jest or yarn add --dev ts-jest @types/jest

Step 2: Configuration

Option 1: create a jest configration file jest.config.js

module.exports = {
    transform: {
        '^.+\\.(ts|tsx)$': 'ts-jest',
    },
};

Option 2: add jest configration into package.json

"jest": {
    "transform": {
        "^.+\\.(ts|tsx)$": "ts-jest"
    }
}

Step 3: Execute your script. Everything should be all set now.

OP didn't try to make it work for typescript – imrok Aug 23 '22 at 07:53 — imrok, Aug 23 '22 at 07:53

score 4 · Answer 3 · edited Jan 23 '23 at 22:33

4

Since jest is not working with esmodules well, you need to add these configurations in jest.config.js to tell Jest to use commonJS builds instead

moduleNameMapper : {
        '^react-dnd$': 'react-dnd/dist/cjs',
        '^react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
        '^dnd-core$': 'dnd-core/dist/cjs',
}

edited Jan 23 '23 at 22:33

BanksySan

27,362
33
117
216

answered Dec 11 '20 at 10:58

snowyBunny

365
4
8

score 1 · Answer 4 · answered Oct 07 '22 at 09:05

The error

SyntaxError: Cannot use import statement outside a module

might also come from some imported library under node_modules, for example

...\node_modules\node-fetch\src\index.js:9
    import http from 'node:http';
    ^^^^^^

The trick for me was to use the transformIgnorePatterns option in jest config:

transformIgnorePatterns: [
    'node_modules/(?!' + 
        [
            'node-fetch',
            'fetch-blob',
            'data-uri-to-buffer',
            'jest-runtime',
            'formdata-polyfill'
        ].join('|') +
    ')',
],

Also see

How to setup jest with node_modules that use es6

This worked for me when I got the error on an import statement for the node module `lucide-svelte`. Thanks a bunch! — Snailedlt, Apr 27 '23 at 13:25

score 0 · Answer 5 · answered May 09 '22 at 10:55

0

When you are using Typescript with ECMAScript. The simplest solution is to use use ts-jest, a TypeScript preprocessor:

Install

npm i -D ts-jest @types/jest

Run tests

jest

npm, github

answered May 09 '22 at 10:55

Lars Flieger

2,421
1
12
34

score 0 · Answer 6 · answered Nov 28 '22 at 18:34

I received this same error using react-scripts to run tests. I was able to resolve this issue by changing the line in package.json

"test": "react-scripts test",

to

"test": "NODE_OPTIONS=--experimental-vm-modules react-scripts test",

From the error message which provides the link that suggests this resolution:

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.

score 0 · Answer 7 · answered Feb 03 '23 at 13:56

0

I wanted to add how I easily caused this issue for myself.. I freaking prevented myself from committing my jest.config.js file by including all *.js in my .gitignore. Every time my CI ran, I would get this error, because there was no version controlled jest.config.js in my repo. Be careful out there folks! stay frosty.

answered Feb 03 '23 at 13:56

rjminchuk

899
9
13

What did you put in your jest.config.js to avoid the "Cannot use import statement outside a module" error? – Woodchuck Mar 06 '23 at 16:46

Jest - SyntaxError: Cannot use import statement outside a module

7 Answers7

Linked