Jest

Name: Jest
Author: jestjs

公式Agent-ready

github.com開発ツール45.5kjest4 週間前に更新

リポジトリ公式サイト

Jest について

Jest はゼロ設定の JavaScript テストフレームワークで、組み込みアサーション、モッキング、カバレッジ分析を備えています。npx jest でテストを実行し、スナップショットで出力の一貫性を検証し、詳細なコードカバレッジレポートを生成します。

主な機能

01JavaScript ユニットテストを実行し、詳細な失敗診断を提供する
02スナップショットテストで UI コンポーネントとオブジェクト構造を検証する
03テストされていないコードパスを識別するカバレッジレポートを生成する
04外部依存なしで組み込みのモッキングとスパイユーティリティを使用できる

活用シーン

01コーディングエージェントワークフローでテストスイートの検証とコード品質チェックを自動化する
02CI/CD パイプラインでユニットテストを実行しカバレッジレポートを生成する
03リファクタリング後のコード動作の一貫性を検証する

インストール

OS またはパッケージマネージャーを選び、コマンドをターミナルで実行します。

npm install -D jest

インストール後にjest --versionを実行して確認します。

コマンド例

よく使うコマンドを使う順に並べています。

npx jest

npx jest --coverage

詳細

README の画像

🃏 楽しい JavaScript テスト

👩🏻‍💻 開発者にやさしい: 包括的な JavaScript テストソリューションです。ほとんどの JavaScript プロジェクトでそのまま動作します。

🏃🏽 即時フィードバック: 高速でインタラクティブなウォッチモードは、変更されたファイルに関連するテストファイルのみを実行します。

📸 スナップショットテスト: 大きなオブジェクトのスナップショットを取得することで、テストを簡素化し、時間の経過に伴う変化を分析できます。

詳細は jestjs.io をご覧ください

はじめに

Jest を yarn でインストールします：

yarn add --dev jest

または npm でインストールします：

npm install --save-dev jest

注意: Jest のドキュメントでは yarn コマンドを使用していますが、npm でも動作します。yarn と npm のコマンドは、yarn のドキュメントのこちらで比較できます。

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 は CLI から直接実行できます（PATH でグローバルに利用可能な場合、たとえば yarn global add jest や npm install jest --global でインストールした場合）。さまざまな便利なオプションを利用できます。

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

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

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

追加の設定

基本的な設定ファイルの生成

プロジェクトに基づいて、Jest はいくつかの質問をし、各オプションの簡単な説明を含む基本的な設定ファイルを作成します:

yarn create jest

Babel の使用

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

yarn add --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 は独断的なツールであり、いくつかのすぐに使えるワークフローを提供します。vite のプラグインシステムの仕組みにより、Jest は vite によって完全にはサポートされていませんが、vite-jest を使用したファーストクラスの jest 統合のいくつかの動作例があります。これは完全にはサポートされていないため、vite-jest の制限も読むとよいでしょう。始めるには vite ガイドを参照してください。

Parcel の使用

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

TypeScript の使用

Jest は Babel を介して TypeScript をサポートしています。まず、上記の Babel の使用の手順に従っていることを確認してください。次に、yarn で @babel/preset-typescript をインストールします:

yarn add --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 を別途実行します（またはビルドプロセスの一部として実行します）。

ドキュメント

Jest の公式サイトで使用方法の詳細を学びましょう！

バッジ

Jest を使用していることを世界に示しましょう →

[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg?logo=jest)](https://github.com/jestjs/jest)
[![jest tested](https://img.shields.io/badge/Jest-tested-eee.svg?logo=jest&labelColor=99424f)](https://github.com/jestjs/jest)
[![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/jestjs/jest)