メインコンテンツへスキップ
Version: 29.4

はじめましょう

お気に入りのパッケージマネージャーを使用して Jest をインストールします。

npm install --save-dev jest

2つの数値を加算する関数のテストを書くことから始めてみましょう。 まずsum.js ファイルを作成します。

function sum(a, b) {
  return a + b;
}
module.exports = sum;

その後、sum.test.js というファイルを作成します。 このファイルに実際のテストが含まれます。

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

package.json に以下を追加します。

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

最後に、yarn test または npm test を実行すると、Jest は以下のメッセージを表示します。

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

あなたは Jest を使用して、最初のテストを書き、うまくいきました!

このテストは expect と、 toBe を使用し、2 つの値が同じかテストしました。 他の Jest でテスト可能なものについては、Using Matcher を参照してください。

コマンドラインからの実行​

Jest は、CLI から様々な便利なオプションを付けて、直接実行できます。 （実行するためには、例えば yarn global add jestまたはnpm install jest --global でインストールし、PATH でグローバルに利用可能になっている必要があります。 ）

ここでは my-test を Jest で実行し、実行後に OS の通知を表示する方法を示します。 そのとき構成ファイルとして config.json を使用します。

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

コマンドラインから Jest を実行する方法の詳細については、Jest CLI Options を参考にしてください。

追加設定​

基本の設定ファイルを生成する​

次のコマンドを実行すると、Jest はあなたのプロジェクトの構成に基づいたいくつかの質問をし、その回答から短いコメント付きの基本の設定ファイルを生成します。

jest --init

Babel を使用する​

Babel を使用するために、yarn で必要な依存関係をインストールしてください。

npm install --save-dev babel-jest @babel/core @babel/preset-env

Node.jsの現在のバージョンをターゲットにするためにBabelを定義するには、babel.config.jsというファイルをプロジェクトのルートに作ってください。

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

The ideal configuration for Babel will depend on your project. See Babel's docs for more details.

Babelの設定にJestを認識させる

Jest will set process.env.NODE_ENV to 'test' if it's not set to something else. You can use that in your configuration to conditionally setup only the compilation needed for Jest, e.g.

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

  return {
    // ...
  };
};
note

babel-jest is automatically installed when installing Jest and will automatically transform files if a babel configuration exists in your project. これを避けるには、 transform設定を明示的にリセットして下さい。

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

Webpack を使用する​

Jestは webpackでアセットやスタイル、コンパイル作業を管理するプロジェクトで使用できます。 webpack は他のツールよりもユニークで挑戦的な機能を提供しています。 具体的な使い方は webpack guide を参照してください。

Vite を使用する​

Jest can be used in projects that use vite to serve source code over native ESM to provide some frontend tooling, vite is an opinionated tool and does offer some out-of-the box workflows. Vite が提供するプラグインシステムの仕組みのため、Jest は vite を完全にはサポートしていませんが、vite-jest を使用した動作する第1級の Jest のインテグレーションがいくつか存在します。完全なサポートではないため、 vite-jest の制限も参照してください。 Refer to the vite guide to get started.

Using Parcel​

Jestは parcel-bundleで webpack と同様にアセットやスタイル、コンパイル作業を管理するプロジェクトで使用できます。 Parcelは設定が不要です。 使用を開始するには公式ドキュメントを参照してください。

TypeScript を使用する​

babel 経由で​

Jest は Babel 経由で TypeScript をサポートしています。 まず、 Babelを使用するを確認してください。 次に、@babel/preset-typescript をインストールします。

npm install --save-dev @babel/preset-typescript

最後に、@babel/preset-typescript を babel.config.js 内のプリセットのリストに追加してください。

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

BabelでTypeScriptを使う場合、いくつかの注意事項があります。 BabelはTypescriptを純粋なトランスパイルによりサポートしているため、Jestはテストの実行時にテストコードの型検査を行いません。 型検査を行いたい場合、代わりに ts-jest を使用するか、TypeScriptコンパイラ のtsc をテストとは別に(またはビルドプロセスの一部として)使用してください。

ts-jest 経由で​

ts-jestはJest用のソースマップをサポートするTypeScriptプリプロセッサです。こちらを使うことで、TypeScriptで書かれたプロジェクトをJestでテストできるようになります。

npm install --save-dev ts-jest

In order for Jest to transpile TypeScript with ts-jest, you may also need to create a configuration file.

Type definitions​

There are two ways to have Jest global APIs typed for test files written in TypeScript.

You can use type definitions which ships with Jest and will update each time you update Jest. Install the @jest/globals package:

npm install --save-dev @jest/globals

And import the APIs from it:

sum.test.ts
import {describe, expect, test} from '@jest/globals';
import {sum} from './sum';

describe('sum module', () => {
  test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
});
tip

See the additional usage documentation of describe.each/test.each and mock functions.

Or you may choose to install the @types/jest package. It provides types for Jest globals without a need to import them.

npm install --save-dev @types/jest
info

@types/jest is a third party library maintained at DefinitelyTyped, hence the latest Jest features or versions may not be covered yet. Try to match versions of Jest and @types/jest as closely as possible. For example, if you are using Jest 27.4.0 then installing 27.4.x of @types/jest is ideal.

Using ESLint​

Jest can be used with ESLint without any further configuration as long as you import the Jest global helpers (describe, it, etc.) from @jest/globals before using them in your test file. This is necessary to avoid no-undef errors from ESLint, which doesn't know about the Jest globals.

If you'd like to avoid these imports, you can configure your ESLint environment to support these globals by adding the jest environment:

{
  "overrides": [
    {
      "files": ["tests/**/*"],
      "env": {
        "jest": true
      }
    }
  ]
}

Or use eslint-plugin-jest, which has a similar effect:

{
  "overrides": [
    {
      "files": ["tests/**/*"],
      "plugins": ["jest"],
      "env": {
        "jest/globals": true
      }
    }
  ]
}