w3resource

Jest Getting Started


You can install Jest using yarn:

yarn add -dev jest
Or you can use npm:
npm install --save-dev jest

Note: this documentation will use yarn commands, however, npm will also work.

To get started we will write a test for a hypothetical function that adds two numbers. The first thing we will do is to create a sum.js file:

function sum(first, second) {
  return first + second;
}
module.exports = sum;

Then, we will create a file named sum.test.js. this file contains our actual test:

const sum = require('./sum');
test('adds 2 + 4 to equal 6', () => {
  expect(sum(2, 4)).toBe(6);
});

Now add the following section to your package.json:

{
  "scripts": {
    "test": "jest"
  }
}

Finally, you need to run yarn test or npm run test and then, Jest will print the message below:

PASS  ./sum.test.js
? adds 1 + 2 to equal 3 (5ms)

You have successfully written your first test using Jest!

The test above used expect and toBe to test that two values were exactly identical.

Running from command line

You can use the CLI to run Jest (that is if it's globally available in your PATH, e.g. by using yarn global add jest or npm install jest --global) with a variety of useful options.

If you want to run Jest on files matching my-test, by using config.json as a configuration file and displaying a native OS notification after the run:

jest my-test --notify --config=config.json

Additional Configuration

Generate a basic configuration file

Depending on your project, Jest asks you a few questions and creates a basic configuration file with a short description for each option:

jest -init

Using Babel

If you want to Babel, you have to install required dependencies via yarn:

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

You should configure Babel to target your current version of Node by creating a babel.config.js file in the root of your project:

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

The ideal configuration for Babel depends on your project.

Making your babel config jest-aware

Jest sets process.env.NODE_ENV to 'test' if it's not set to something else. This can be used in your configuration conditionally setup only the compilation needed for Jest, e.g.

// babel.config.js
module.exports = api => {
  const isTest = api.env('test');
  // isTest can be used to determine what presets and plugins to use.

  return {
    // ...
  };
};

Note: babel-jest will be automatically installed when installing Jest and automatically transforms files if a babel configuration exists in your project. To avoid the illustrated behavior, you may explicitly reset the transform configuration option:

// jest.config.js
module.exports = {
  transform: {},
};

Babel 6 support

Jest 24 has dropped the support for Babel 6. It is highly recommended that you to upgrade to Babel 7, which is actively in maintenance. However, if you are not able to upgrade to Babel 7, you should either keep using Jest 23 or upgrade to Jest 24 while keeping babel-jest locked at version 23, as shown in the example below:

"dependencies": {
  "babel-core": "^6.26.3",
  "babel-jest": "^23.6.0",
  "babel-preset-env": "^1.7.0",
  "jest": "^24.0.0"
}

Although, we recommend that you use the same version of every Jest package, this workaround allows you to continue using the latest version of Jest with Babel 6 for now.

Using webpack

You can use Jest in projects that use webpack to manage assets, styles, and compilation. webpack offers some unique challenges over other tools

Using TypeScript

Jest also supports TypeScript, via Babel. First ensure you followed the instructions on using Babel above. Next, you need to install the @babel/preset-typescript via yarn:

yarn add --dev @babel/preset-typescript

Then you should add @babel/preset-typescript to the list of presets in your babel.config.js.

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

However, some caveats exist while using TypeScript with Babel. This is because TypeScript support in Babel is just transpilation, Jest will not perform type-check on your your tests as they are run. If you need that, you may use ts-jest.



Inviting useful, relevant, well-written and unique guest posts