'Jest - SyntaxError: Cannot use import statement outside a module

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

Solution 1:^[1]

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

Solution 2:^[2]

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',
}

Solution 3:^[3]

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.

Solution 4:^[4]

Without installing babel, try experimental ESM as in this answer: https://stackoverflow.com/a/70200697/5078874

Solution 5:^[5]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Audwin Oyong
Solution 2	snowyBunny
Solution 3	applemonkey496
Solution 4	Adrian Escutia Soto
Solution 5	Lars Flieger

'Jest - SyntaxError: Cannot use import statement outside a module

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]