メインコンテンツにスキップ
バージョン: 29.7

はじめに

お好みのパッケージマネージャーを使用して 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を使用して最初のテストを正常に作成しました！

このテストでは、2つの値が完全に同一であることをテストするために、expectとtoBeを使用しました。Jestがテストできるその他の詳細については、マッチャーの使用を参照してください。

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

Jestは、CLIから直接実行できます（yarn global add jestやnpm install jest --globalなどで、グローバルにPATHで使用可能な場合）。さまざまな便利なオプションがあります。

以下は、my-testに一致するファイルに対して、config.jsonを構成ファイルとして使用し、実行後にネイティブOS通知を表示してJestを実行する方法です。

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

コマンドラインからjestを実行する方法についてさらに詳しく知りたい場合は、Jest CLIオプションのページをご覧ください。

追加の構成​

基本構成ファイルの生成​

プロジェクトに基づいて、Jestはいくつかの質問を行い、各オプションの簡単な説明付きの基本構成ファイルを作成します。

npm init jest@latest

Babelの使用​

Babelを使用するには、必要な依存関係をインストールします。

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

プロジェクトのルートにbabel.config.jsファイルを作成して、現在のNodeのバージョンをターゲットとするようにBabelを設定します。

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

Babelの理想的な構成は、プロジェクトによって異なります。詳細については、Babelのドキュメントを参照してください。

Babelの設定をJestに対応させる

Jestは、process.env.NODE_ENVが他の値に設定されていない場合、'test'に設定します。構成でこれを使用して、Jestに必要なコンパイルのみを条件付きで設定できます。例：

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

  return {
    // ...
  };
};
注

babel-jestは、Jestのインストール時に自動的にインストールされ、プロジェクトにbabel構成が存在する場合、ファイルを自動的に変換します。この動作を回避するには、transform構成オプションを明示的にリセットできます。

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

webpackの使用​

Jestは、アセット、スタイル、コンパイルを管理するためにwebpackを使用するプロジェクトで使用できます。webpackは、他のツールよりもいくつかの特有の課題を提供します。開始するには、webpackガイドを参照してください。

Viteの使用​

Jestは、ネイティブESMを介してソースコードを提供してフロントエンドツールを提供するviteを使用するプロジェクトで使用できます。viteは意見の強いツールであり、すぐに使えるいくつかのワークフローを提供します。Jestは、viteのプラグインシステムの動作方法により、viteによって完全にサポートされていませんが、vite-jestを使用したファーストクラスのjest統合に関するいくつかの動作例があります。これは完全にサポートされていないため、vite-jestの制限事項を読むこともできます。開始するには、viteガイドを参照してください。

Parcelの使用​

Jestは、webpackと同様にアセット、スタイル、コンパイルを管理するためにparcel-bundlerを使用するプロジェクトで使用できます。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プリプロセッサであり、Jestを使用してTypeScriptで記述されたプロジェクトをテストできます。

npm install --save-dev ts-jest

Jestがts-jestを使用してTypeScriptをトランスパイルするには、構成ファイルを作成する必要がある場合があります。

型定義​

TypeScriptで記述されたテストファイルに対してJestグローバルAPIを型付けする方法は2つあります。

Jestに付属し、Jestを更新するたびに更新される型定義を使用できます。@jest/globalsパッケージをインストールします。

npm install --save-dev @jest/globals

そして、そこからAPIをインポートします。

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);
  });
});
ヒント

describe.each/test.eachとモック関数の追加の使用ドキュメントを参照してください。

または、@types/jestパッケージをインストールすることもできます。これにより、インポートする必要なくJestグローバルの型が提供されます。

npm install --save-dev @types/jest
情報

@types/jestは、DefinitelyTypedで管理されているサードパーティライブラリであるため、最新のJest機能やバージョンはまだカバーされていない可能性があります。Jestと@types/jestのバージョンをできるだけ一致させようとします。たとえば、Jest 27.4.0を使用している場合は、@types/jestの27.4.xをインストールするのが理想的です。

ESLintの使用​

Jestは、テストファイルで使用する前に、@jest/globalsからJestグローバルヘルパー（describe、itなど）をインポートする限り、さらに構成しなくてもESLintで使用できます。これは、ESLintがJestグローバルについて認識していないため、ESLintからのno-undefエラーを回避するために必要です。

これらのインポートを回避する場合は、ESLint環境を構成して、jest環境を追加することでこれらのグローバルをサポートできます。

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

または、同様の効果のあるeslint-plugin-jestを使用します。

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