Koki's personal blog

Koki's personal blog

Another fine, responsive site template by HTML5 UP.

About installing Jest, and how to set up intellisense and how solving an import error.

This article explains how to install Jest, how to set up intellisense and how solving an import error.

Koki

2-Minute Read

[17/03/2022] Fix the npm install command in the set up intellisense section.

This article explains how to install Jest, how to set up intellisense and how solving an import error.

The following lists are the table of contents about this article.

Target audience

  • Those who want to build Jest environment.

Environment

  • Windows 10 (Ver. 21H2, Build. 19044.1526)
  • WSL 2 (Ubuntu 20.04 LTS)
  • Visual Studio Code

Preconditions

  • Installed npm and yarn

Install Jest

npm install --save-dev jest

Set up intellisense

Firstly, execute the below command to install Jest type definitions.

npm install --save-dev @types/jest

Then create a jsconfig.json to the project root directory.
Content is the below.

{
  "typeAcquisition": {
    "include": [
      "jest"
    ]
  }
}

Set up for solving an import error

You need to set up another thing because an import error is happening when you use Jest if you use it as it is.
Firstly, execute the below command to build babel environment.

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

Then create a babel.config.cjs to the project root directory, which’s content is the below.

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

Digression

Why did I choose Jest for JavaScript testing?

From the below three reasons.

  1. The number of users is the highest in the world. (From npm trends) So it is easy to get information even if we are bothered by Jest.
  2. Easy to build environment
  3. Jest supports various JavaScript libraries and frameworks.

Why do I use both npm and yarn?

Because yarn is needed to build the babel environment. (I mean npm can not build it.)

Reference articles

Configuring Jest
npm trends (chai vs cypress vs jasmine vs jest vs mocha)

Recent Posts

Categories