jest

このスキルを使用するタイミング

ユーザーが以下を希望する場合は、いつでもこのスキルを使用してください。

• Jest でユニットテストや統合テストを作成する
• プロジェクトに Jest をセットアップする
• Jest のマッチャーとアサーションを使用する
• 非同期コードをテストする
• 関数、モジュール、依存関係をモックする
• スナップショットテストを作成する
• さまざまな環境向けに Jest を設定する
• TypeScript、React、Vue、その他のフレームワークで Jest を使用する
• テストを実行してカバレッジレポートを生成する
• Jest CLI コマンドを使用する
• テスト環境（jsdom、node）をセットアップする
• Vite で Jest を使用する（vite-jest 経由。ただし、新しい Vite プロジェクトでは Vitest を推奨します）

このスキルの使用方法

このスキルは、Jest の公式ドキュメントの構成（https://jestjs.io/docs/getting-started、https://jestjs.io/docs/api）に沿って整理されています。Jest を使用する際は、以下の手順に従ってください。

1. ユーザーのリクエストからトピックを特定します。

   • はじめに／クイックスタート → examples/getting-started/installation.md または examples/getting-started/using-matchers.md
   • テスト／テスト → examples/testing/asynchronous.md または examples/testing/setup-teardown.md
   • モック関数／モック関数 → examples/testing/mock-functions.md
   • モックモジュール／モックモジュール → examples/testing/manual-mocks.md
   • スナップショット／スナップショット → examples/testing/snapshot-testing.md
   • 設定／設定 → examples/configuration/jest-config.md
   • CLI／コマンドライン → examples/configuration/cli-options.md

2. examples/ ディレクトリから適切なサンプルファイルを読み込みます。

   はじめに（クイックスタート） - examples/getting-started/：

   • examples/getting-started/installation.md - Jest のインストールと基本的なセットアップ
   • examples/getting-started/using-matchers.md - Jest のマッチャーとアサーションの使用

   テスト - examples/testing/：

   • examples/testing/asynchronous.md - 非同期コードのテスト
   • examples/testing/setup-teardown.md - セットアップ関数とティアダウン関数
   • examples/testing/mock-functions.md - 関数のモック
   • examples/testing/manual-mocks.md - 手動モック
   • examples/testing/snapshot-testing.md - スナップショットテスト
   • examples/testing/timer-mocks.md - タイマーのモック
   • examples/testing/es6-class-mocks.md - ES6 クラスのモック

   設定 - examples/configuration/：

   • examples/configuration/jest-config.md - Jest の設定オプション
   • examples/configuration/cli-options.md - CLI オプションとフラグ
   • examples/configuration/babel.md - Babel での Jest の使用
   • examples/configuration/typescript.md - TypeScript での Jest の使用

   ガイド - examples/guides/：

   • examples/guides/migrating-to-jest.md - Jest への移行
   • examples/guides/testing-react-apps.md - React アプリケーションのテスト
   • examples/guides/testing-vue-apps.md - Vue アプリケーションのテスト

3. 構文、構成、ベストプラクティスについて、そのサンプルファイルに記載された具体的な手順に従います。

   重要な注意事項：

   • すべてのサンプルは Jest のベストプラクティスに従っています
   • 該当する場合、サンプルには JavaScript 版と TypeScript 版の両方が含まれています
   • 各サンプルファイルには、主要な概念、コード例、要点が含まれています
   • ベストプラクティスや一般的なパターンについては、必ずサンプルファイルを確認してください

4. 必要に応じて、api/ ディレクトリの API ドキュメントを参照します。

   • api/expect.md - expect() API とマッチャー
   • api/mock-functions.md - モック関数 API
   • api/jest-object.md - Jest オブジェクト API
   • api/test.md - test() および describe() API
   • api/cli.md - CLI コマンドとオプション

5. templates/ ディレクトリのテンプレートを使用します。

   • templates/jest-config.md - Jest 設定テンプレート
   • templates/test-template.md - テストファイルのテンプレート
   • templates/setup-file.md - セットアップファイルのテンプレート

ドキュメントの対応関係（https://jestjs.io/docs/getting-started、https://jestjs.io/docs/api と一対一で対応）

はじめに（クイックスタート）:

• examples/getting-started/installation.md → https://jestjs.io/docs/getting-started
• examples/getting-started/using-matchers.md → https://jestjs.io/docs/using-matchers

テスト:

• examples/testing/asynchronous.md → https://jestjs.io/docs/asynchronous
• examples/testing/setup-teardown.md → https://jestjs.io/docs/setup-teardown
• examples/testing/mock-functions.md → https://jestjs.io/docs/mock-functions
• examples/testing/manual-mocks.md → https://jestjs.io/docs/manual-mocks
• examples/testing/snapshot-testing.md → https://jestjs.io/docs/snapshot-testing
• examples/testing/timer-mocks.md → https://jestjs.io/docs/timer-mocks
• examples/testing/es6-class-mocks.md → https://jestjs.io/docs/es6-class-mocks

設定:

• examples/configuration/jest-config.md → https://jestjs.io/docs/configuration
• examples/configuration/cli-options.md → https://jestjs.io/docs/cli

API リファレンス:

• api/expect.md → https://jestjs.io/docs/expect
• api/mock-functions.md → https://jestjs.io/docs/mock-functions
• api/jest-object.md → https://jestjs.io/docs/jest-object
• api/test.md → https://jestjs.io/docs/api#testname-fn-timeout
• api/cli.md → https://jestjs.io/docs/cli

サンプルとテンプレート

このスキルには、公式ドキュメントの構成に合わせて整理された詳細なサンプルが含まれています。すべてのサンプルは examples/ ディレクトリにあります（上記の対応関係を参照）。

サンプルを使用するには:

• ユーザーのリクエストからトピックを特定します
• 上記の対応関係から適切なサンプルファイルを読み込みます
• そのファイルの手順、構文、ベストプラクティスに従います
• コードサンプルを具体的なユースケースに合わせて調整します

テンプレートを使用するには:

• よく使われるスキャフォールディングについては、templates/ ディレクトリ内のテンプレートを参照します
• テンプレートを具体的なニーズやコーディングスタイルに合わせて調整します

ベストプラクティス

1. テスト名をわかりやすくする: 明確で説明的なテスト名を使用します
2. 適切なマッチャーを使用する: 各アサーションに適したマッチャーを選びます
3. 外部依存関係をモックする: 外部 API、データベース、サービスをモックします
4. エッジケースをテストする: 正常系とエラーケースの両方をテストします
5. テストを分離する: 各テストは独立させます
6. セットアップとティアダウンを使用する: リソースを適切にクリーンアップします
7. スナップショットテスト: UI コンポーネントにはスナップショットを使用し、変更内容を確認します
8. カバレッジの目標: 高い割合だけを目指すのではなく、意味のあるカバレッジを目指します
9. テストを整理する: describe ブロックを使用して、関連するテストをグループ化します
10. 非同期テスト: async/await またはプロミスを使用して、非同期コードを適切に処理します

リソース

• 公式ドキュメント: https://jestjs.io/
• はじめに: https://jestjs.io/docs/getting-started
• API リファレンス: https://jestjs.io/docs/api
• GitHub リポジトリ: https://github.com/jestjs/jest

キーワード

Jest、テスト、ユニットテスト、統合テスト、モック、スパイ、スナップショット、マッチャー、アサーション、非同期テスト、セットアップ、ティアダウン、カバレッジ、CLI、設定、TypeScript、React、Vue、Babel、テスト、ユニットテスト、統合テスト、モック、スナップショット、マッチャー、アサーション、非同期テスト、カバレッジ、設定