21 April 2021

Setting up Jest with ESM

Here are some different ways on how to set up Jest to support ES modules.

Rico Sta. Cruz @rstacruz

Here are some different ways on how to set up Jest to support ESM. This applies for Jest v25, Node v13, and Babel v7.

Method A: Native Node.js support

Node v14 and Jest v26 support ESM natively with the --experimental-vm-modules flag. Install cross-env 1, then add NODE_OPTIONS to the scripts.test in package.json 2. See tne Jest documentation for more info (jest.io).

Terminal
yarn add --dev cross-env
package.json
"scripts": {
  "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest"
}

Method B: Using Babel

Add babel-jest (1). Configure Babel (2). We’ll use env.test here so not to interfere with your build process.

Terminal
yarn add --dev \
  @babel/core \
  @babel/plugin-transform-modules-commonjs \
  babel-jest
package.json
module.exports = {
  env: {
    test: {
      plugins: ['@babel/plugin-transform-modules-commonjs'],
    },
  },
}
jest.config.js
module.exports = {
  transform: {
    '^.+\\.[t|j]sx?$': 'babel-jest',
  },
}

Method C: Using jest-esm-transformer

Add jest-esm-transformer - this is a preset configuration of Babel to support ESM transpilation.

Terminal
yarn add --dev jest-esm-transformer
package.json
module.exports = {
  transform: {
    '\\.m?jsx?$': 'jest-esm-transformer',
  },
}

Method D: Using standard-things/esm

As of March 2020, using esm is currently not possible. Follow these threads for details.

Method E: Using buble

See buble-jest. Buble is an alternative to Babel. Note that as of 2021, this package hasn’t been updated since 2018.

Thanks for reading! I'm Rico Sta Cruz, I write about web development and more. Subscribe to my newsletter!