Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Test ES6 modules with Jest

How to test ES6 modules with Jest.


Example:

sum.js

const sum = function (a, b) {
  return a + b;
}

export default sum;

sum.test.js

import sum from './sum';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});
like image 764
Paulo Coghi Avatar asked Apr 04 '18 17:04

Paulo Coghi


People also ask

Does jest support es6 modules?

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

How do I enable ECMAScript modules in jest?

To access this object in ESM, you need to import it from the @jest/globals module or use import. meta . import {jest} from '@jest/globals'; jest.

Does jest require Babel?

Jest supports TypeScript, via Babel. First, make sure you followed the instructions on using Babel above.

How do you mock an import in jest?

To mock an imported function with Jest we use the jest. mock() function. jest. mock() is called with one required argument - the import path of the module we're mocking.


2 Answers

The only requirement is to config your test environment to Babel, and add the es2015 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 es2015 transform plugin:

npm install --save-dev @babel/plugin-transform-modules-commonjs

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

like image 140
Paulo Coghi Avatar answered Oct 11 '22 20:10

Paulo Coghi


The solutions above didn't work for me. I was able to solve with this:

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

babel.config.js

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

where I'm using typescript.

Reference.

like image 3
GarouDan Avatar answered Oct 11 '22 20:10

GarouDan