メインコンテンツへスキップ
バージョン: 30.0

はじめに

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

お好みのパッケージマネージャーを使って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が検証できる他の機能については、マッチャーの使用方法をご覧ください。

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

Jestをグローバルにインストールしている場合（yarn global add jestやnpm install jest --globalでPATHに登録されている場合）、便利なオプションを指定してCLIから直接実行できます。

my-testにマッチするファイルに対して、設定ファイルとしてconfig.jsonを使用し、実行後にOS通知を表示する方法は次の通りです：

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.config.js
module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

Babelの最適な設定はプロジェクトによって異なります。詳細はBabelのドキュメントをご覧ください。

Making your Babel config jest-aware

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 {
    // ...
  };
};
メモ

babel-jest is automatically installed when installing Jest and will automatically transform files if a babel configuration exists in your project. To avoid this behavior, you can explicitly reset the transform configuration option:

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

バンドラーとの併用​

ほとんどの場合、異なるバンドラーと連携するために特別な設定は不要です。例外は、ファイル生成を行うプラグインや設定、カスタムファイル解決ルールがある場合です。

webpackの使用​

Jestはアセット、スタイル、コンパイル管理にwebpackを使用するプロジェクトでも利用できます。webpackには特有の課題があるため、開始方法はwebpackガイドを参照してください。

Viteの使用​

Viteのプラグインシステムとの互換性問題のため、JestはViteでサポートされていません。

vite-jestライブラリに統合例がありますが、このライブラリはVite 2.4.2以降と互換性がありません。

代替手段の一つとして、Vitestがあります。これはJestと互換性のあるAPIを備えています。

Parcelの使用​

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

TypeScriptの使用​

babel経由​

JestはBabel経由でTypeScriptをサポートしています。まず上記のBabelの使用手順を完了し、次に@babel/preset-typescriptをインストールします：

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

babel.config.jsのプリセットリストに@babel/preset-typescriptを追加します。

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 は、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 と mock functions の追加の使用法ドキュメントも参照してください。

あるいは @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 グローバルヘルパー（describe、it など）を @jest/globals からインポートすれば、追加設定なしで Jest を ESLint と併用できます。ESLint が Jest グローバルを認識しないため、これにより no-undef エラーを回避できます。

これらのインポートを避けたい場合は、ESLint 環境設定で jest 環境を追加してグローバルをサポートできます：

import {defineConfig} from 'eslint/config';
import globals from 'globals';

export default defineConfig([
  {
    files: ['**/*.js'],
    languageOptions: {
      globals: {
        ...globals.jest,
      },
    },
    rules: {
      'no-unused-vars': 'warn',
      'no-undef': 'warn',
    },
  },
]);

または同様の効果がある eslint-plugin-jest を使用することもできます：

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