184

If I use import/export from ES6 then all my Jest tests fail with error:

Unexpected reserved word

I convert my object under test to use old school IIFE syntax and suddenly my tests pass. Or, take an even simpler test case:

   var Validation = require('../src/components/validation/validation'); // PASS
   //import * as Validation from '../src/components/validation/validation' // FAIL

Same error. Obviously there's a problem with import/export here. It's not practical for me to rewrite my code using ES5 syntax just to make my test framework happy.

I have babel-jest. I tried various suggestions from GitHub issues. It is no go so far.

File package.json

 "scripts": {
    "start": "webpack-dev-server",
    "test": "jest"
  },
      "jest": {
        "testPathDirs": [
          "__tests__"
        ],
        "testPathIgnorePatterns": [
          "/node_modules/"
        ],
        "testFileExtensions": ["es6", "js"],
        "moduleFileExtensions": ["js", "json", "es6"]
      },

File babelrc

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-decorators-legacy"]
}

Is there a fix for this?

9
  • does this help at all?
    – user3854359
    Mar 2, 2016 at 19:49
  • 1
    @GeorgePompidou - Possibly. I'm not sure if/how the solution applies to babel-jest Mar 2, 2016 at 19:51
  • it's a matter of specifying something like "presets": ["es2015"] in a package.json or a .babelrc. you are using babel, after all.
    – user3854359
    Mar 2, 2016 at 19:59
  • @GeorgePompidou - In that case the solution does not work. I already have a babelrc containing es2015, react presets. Standard transpilation works, inside of gulp. It's just the Jest framework that can't handle it. Mar 2, 2016 at 20:01
  • 5
    This question is from 5 years ago and yet jest's support for ES modules is experimental.
    – aderchox
    Dec 17, 2021 at 21:31

12 Answers 12

179

From my answer to another question, this can be simpler:


The only requirement is to configure your test environment to Babel, and add the ECMAScript 6 transform plugin:


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

And that's it. Jest will enable compilation from ECMAScript modules to CommonJS automatically, without having to inform additional options to your jest property inside package.json.

11
  • 35
    If you don't want to pollute your project with .babelrc, you can add the env key above under a babel key in package.json. Mar 25, 2019 at 5:04
  • 6
    I believe the more recent @babel/plugin-transform-modules-commonjs replaces transform-es2015-modules-commonjs
    – Albizia
    Jul 19, 2019 at 11:15
  • 3
    Man this was taking me forever! Thanks! Mar 17, 2020 at 10:32
  • 2
    This should be the correct answer, so dead simple. Apr 23, 2021 at 16:24
  • 1
    @P.Brian.Mackey sure! If you already tested the new approach, and Babel isn't needed anymore, this is good news and it's important to update the community about the updated approach. :) Dec 7, 2021 at 15:44
119

UPDATE 2020 - native support of ECMAScript modules (ESM)


According to this issue, there is native support of ESM from [email protected]. So you won't have to use babel anymore. At the time of writing this answer (05/2020), to activate that you need to do three simple things:

  • Make sure you don't transform away import statements by setting transform: {} in config file
  • Run node@^12.16.0 || >=13.2.0 with --experimental-vm-modules flag
  • Run your test with jest-environment-node or jest-environment-jsdom-sixteen.

So your Jest configuration file should contain at least this:

export default {
    testEnvironment: 'jest-environment-node',
    transform: {}
    ...
};

And to set --experimental-vm-modules flag, you will have to run Jest as follows:

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

Also note in the Github issue that this approach does not yet support the jest object. So you may need to import it manually:

import {jest} from '@jest/globals'

(I hope this will change in the future)

10
  • 3
    What is the 'jest-environment-node' and how does it differ from an environment 'node'?
    – akauppi
    Aug 6, 2020 at 11:26
  • 26
    NODE_OPTIONS='--experimental-vm-modules' jest is a bit cleaner to run jest
    – Relisora
    Sep 23, 2020 at 13:35
  • 8
    As an important note, native support does not support mocking as of yet Mar 7, 2021 at 20:42
  • 5
    4th thing to do to make this work: package.json should contain "type": "module" for Node to detect files as ESM, see nodejs.org/api/packages.html#packages_determining_module_system May 2, 2021 at 15:41
  • 3
    I only needed NODE_OPTIONS='--experimental-vm-modules' jest on node v14.6.1 and jest v26.6.3. No config. May 9, 2021 at 16:29
41

For an updated configuration, I'm using https://babeljs.io/setup#installation

Select JEST and be happy:

As a reference, the current configuration:

npm install --save-dev babel-jest

In your package.json file, make the following changes:

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }
  }
}

Install babel preset:

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

Create a .babelrc file:

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

Run your tests:

npm run test
3
  • Worked for me! The babel docs have been updated to specify .ts files too in the regex. Didn't need any other dependency for typescript like ts-jest. I did need @babel/preset-typescript. Added it to the list of presets in the .babelrc file. Mar 24, 2021 at 15:40
  • 1
    This is basically the correct answer. Here is another good reference page from jest's own docs jestjs.io/docs/getting-started#using-babel
    – Colin D
    Aug 26, 2021 at 3:13
  • 1
    thanks this worked for me. As of now, you do not need to add the transform to your package.json. It is now default. Dec 7, 2021 at 16:05
9

In package.json, kindly set like this one: "test": "node --experimental-vm-modules node_modules/.bin/jest"

Should be good!

4
  • 4
    Nope! won't do it! Mocks will not work.
    – avepr
    Oct 8, 2021 at 15:47
  • Sorry to hear that. There are some nuances to getting jest to work and even on Windows vs Mac sometimes issues. NS what you are trying to do exactly, but here is a template repo that I use for Node stuff that has a fully working jest (using nodemon). It includes other stuff that you may or may not want, but you can at least use as a guide?
    – CodeFinity
    Jan 8, 2022 at 14:10
  • I followed this answer instead. stackoverflow.com/a/52224329/985942 basically use babel to transform everything back to commonjs
    – avepr
    Jan 9, 2022 at 23:19
  • Right. That's what that repo ends up doing. 🆒
    – CodeFinity
    Jan 10, 2022 at 14:38
3

It's a matter of adding stage-0 to your .babelrc file. Here is an example:

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-decorators-legacy"]
}
2
  • 1
    PS: don't forget to install the stage-0 preset through npm Apr 20, 2016 at 13:04
  • 4
    Don’t ever use stage-0 or any stage-* in production. This answer is bad practice. Use preset-env
    – fregante
    Jan 14, 2019 at 3:48
3

I encountered the same issue.

These are what I did:

yarn add --dev babel-jest @babel/core @babel/preset-env

Make file jest.config.js in rootDir.

module.exports = {
    moduleFileExtensions: ["js", "json", "jsx", "ts", "tsx", "json"],
    transform: {
        '^.+\\.(js|jsx)?$': 'babel-jest'
    },
    testEnvironment: 'node',
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/$1'
    },
    testMatch: [
        '<rootDir>/**/*.test.(js|jsx|ts|tsx)', '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))'
    ],
    transformIgnorePatterns: ['<rootDir>/node_modules/']
};

Then make file babal.config.js in rootDir.

Go like this:

module.exports = {
    "presets": ["@babel/preset-env"]
}
1

Below is how I setup jest, typescript and ES Modules for my project.

jest.config.js

/**
 * @type {import('ts-jest/dist/types').InitialOptionsTsJest} 
 * To configure ESM support, see: https://kulshekhar.github.io/ts-jest/docs/guides/esm-support
 * 
 **/
export default {
    preset: 'ts-jest/presets/default-esm',
    testEnvironment: 'node',
    extensionsToTreatAsEsm: ['.ts'],
    globals: {
        'ts-jest': {
            useESM: true
        }
    },
    setupFiles: ['<rootDir>/__tests__/setup.ts'],
};

tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "outDir": "./dist",
        "moduleResolution": "node",
       // "strict": true,
        "esModuleInterop": true,
        "inlineSourceMap": true,
    }
}

package.json scripts and devDependencies

"scripts": {
    "start": "node ./dist/server.js",
    "dev": "tsc-watch --onSuccess \"node ./dist/server.js\"",
    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest"
  },
"devDependencies": {
    "@jest/globals": "^27.4.4",
    "@types/express": "^4.17.13",
    "@types/jest": "^27.4.0",
    "@types/supertest": "^2.0.11",
    "cross-env": "^7.0.3",
    "supertest": "^6.2.1",
    "ts-jest": "^27.1.3"
  }

__tests__/setup.ts

import dotenv from 'dotenv';


dotenv.config({
    path: './.env.test'
});
4
  • And how would you specify ESM modules if it were JS instead of TS?
    – Petruza
    Jul 31, 2022 at 16:20
  • What do you mean? I don't understand
    – Gilbert
    Aug 1, 2022 at 0:07
  • I mean would this work if using JS instead of TS? because I tried Jest with JS code with ES6 modules and Jest doesn't even recognize the import keyword and complains about an unknown token.
    – Petruza
    Aug 3, 2022 at 16:05
  • 1
    @Petruza of course Jest recognizes the import keyword. You just have to use experimental-vm-modules parameter. Btw you want to make sure that jest targets the build output that is in javascript and not the typescript that has not yet been built. Your tests can be written in javascript although the source code is in typescript.
    – Gilbert
    Aug 3, 2022 at 17:32
1

all is explained in the jest docs: jest docs

1.

npm install --save-dev babel-jest @babel/core @babel/preset-env
  1. in file: babel.config.js

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

As for today, with node 16 and jest 29 I only needed to define a test script as below:

package.json

"type": "module",
...
"scripts": {
    ...
    "test": "NODE_OPTIONS='--experimental-vm-modules' jest ."
  },
1
  • I just tried this in a new project, and it doesn't work
    – sc3000
    Apr 25 at 15:51
0

In addition to installing babel-jest (which comes with Jest by default now) be sure to install regenerator-runtime.

1
  • 1
    If I configured jest with a babel config like this {presets: [['@babel/preset-env', {targets: {node: 'current'}}]]}; then regenerator runtime was not needed (without the node:'current' part it did warn about this). See jestjs.io/docs/getting-started#using-babel
    – Colin D
    Aug 26, 2021 at 3:16
0

To add support for React and react-testing-library it may be useful to eject CreateReactApp and take all needed Jest configuration from the package.json. It is ready to use with another bundler, Rollup in my case.

0

To solve you need to add on package.json

"type": "module",

And set test property on package.json to

"test": "node --experimental-vm-modules node_modules/.bin/jest"

It works for me on node version v16.19.0. Reference - kevinhooke

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.