While writing a front-end testing course recently, one of the most common questions I’ve heard is: How do I support ESM in JEST

A lot of students want to learn jEST do unit test when directly stuck here, that article to talk about how to solve

Problem scenario

So let’s start with your question what does the scenario look like

The first is the esM supported by the packaging tool in the project, and then you want to configure JEST to do the unit test, and then when you write the test, you find that you use esM syntax and you get an error

Packaging with WebPack Rollup Vite is the same and belongs to the packaging tool

// sum.spec.js
import { sum } from "./sum";

describe("sum".() = > {
  it("1 + 1 = 2".() = > {
    expect(sum(1.1)).toBe(2);
  });
});
Copy the code

Execute test command

yarn test
Copy the code

Then you will see coco ai Ai error message

Hey hey hey, do not know the card to the students here is you?

Jest runs on nodeJS, which does not support ESM by default, so jest does not know who ESM is

If we compile the code to nodeJS, jest will know it, and we can happily let Jest do its work.

For code compilation problems, we need to ask Babel big brother, to create a configuration Babel big brother work!!

Start with babel.config.js

// babel.config.js

module.exports = {

    presets: [['@babel/preset-env', {targets: {node: 'current']]}}};Copy the code

This configuration translates to having Babel compile the current code based on your current nodeJS version

Compile to nodeJS code

Next, let’s install some dependency libraries that Babel needs

yarn add --dev babel-jest @babel/core @babel/preset-env
Copy the code

Ok, here we are done, and then quickly to execute the test command to see

yarn test
Copy the code

The perfect solution

Nodejs is configured to support ESM scenarios

In addition to the common scenario above, there is actually another scenario

Nodejs can now actually be configured to support ESM

Let’s start with esM support for the NodeJS environment

Just configure the Type field in package.json

{
  "name": "support-esm"."version": "1.0.0"."description": "Explore if JEST supports nodeJS esM specification"."main": "index.js"."type": "module",}Copy the code

If you want to learn more about esM support in NodeJS, check out this video: How to use the ESM module specification in NodeJS

Now that we have the NODEJS environment supporting ESM, what about executing JEST at this point?

Oh no, this lovely error again!!

That I have to do how to do ？？？？

Don’t worry, you need to set the environment variables to let Jest know that you want to run in ESM form

// package.json
  "scripts": {
    "test": "NODE_OPTIONS=--experimental-vm-modules jest"
  },
Copy the code

Now you run the test command to see

Perfect problem solving

conclusion

In fact, there is no good summary, a total of two problem scenarios, know the corresponding solution is done

It’s just, since you’re seeing this, I’ll make a little AD

Recently in the writing of “front-end testing class”, thinking of front-end testing some knowledge summary summary to write out.

If you are interested in front-end testing, take a look at this REPO

By the way, in addition to the text version, I also have the video version, because it is too laborious to express things in words. So you can also learn by video

Also, if you have any questions about the front-end testing, leave a comment on Repo Issues, or leave a comment on Site B, and I’ll write an article and a video like this one today.