writing-tests

テストの作成

既存のコードへのテスト追加、テストカバレッジの改善、特定のファイルやモジュールのテスト作成をユーザーから依頼された場合に、このスキルを使用します。

手順

1. テスト環境を確認する — すでに設定されている内容を確認します。

   # Check package.json for test runner
   cat package.json | grep -E "jest|vitest|mocha|playwright|cypress"
   

   設定ファイルを探します：vitest.config.ts、jest.config.ts、playwright.config.ts、.mocharc.*。既存のテストファイルを確認し、プロジェクトのテストパターンや規約を把握します。

2. テストランナーが存在しない場合 — 設定します。

   npm install -D vitest @testing-library/react @testing-library/jest-dom
   

   package.json に test スクリプトを追加します。

   { "test": "vitest run", "test:watch": "vitest" }
   

3. 対象コードを分析する — テストするファイルを読み、以下を特定します。

   • 公開 API：エクスポートされた関数、クラス、コンポーネント、フック
   • コードパス：条件分岐、エラー処理、エッジケース
   • 依存関係：モックが必要な外部サービス、データベース、API
   • 副作用：ファイル I/O、ネットワーク呼び出し、DOM の変更

4. テストファイルを作成する — プロジェクトの規約に合わせて、ソースファイルの隣または __tests__/ ディレクトリに配置します。

   • src/utils/format.ts → src/utils/format.test.ts
   • src/components/Button.tsx → src/components/Button.test.tsx

5. 次の構成に従ってテストを記述します。

   import { describe, it, expect, vi } from "vitest";
   
   describe("functionName", () => {
     // Happy path
     it("returns formatted output for valid input", () => { ... });
   
     // Edge cases
     it("handles empty string", () => { ... });
     it("handles null/undefined input", () => { ... });
   
     // Error cases
     it("throws on invalid argument", () => { ... });
   
     // Boundary conditions
     it("handles maximum length input", () => { ... });
   });
   

6. 外部依存関係をモックする — 単体テストでは実際の API 呼び出しやデータベースクエリを実行しないでください。

   vi.mock("@/lib/db", () => ({
     query: vi.fn().mockResolvedValue([{ id: 1, name: "test" }]),
   }));
   

   React コンポーネントでは、データを取得するフックをモックします。

   vi.mock("@/hooks/useUser", () => ({
     useUser: () => ({ user: { name: "Test" }, isLoading: false }),
   }));
   

7. Testing Library で React コンポーネントをテストします。

   import { render, screen, fireEvent } from "@testing-library/react";
   
   it("renders the button and handles click", () => {
     const onClick = vi.fn();
     render(<Button onClick={onClick}>Click me</Button>);
     fireEvent.click(screen.getByRole("button", { name: "Click me" }));
     expect(onClick).toHaveBeenCalledOnce();
   });
   

8. テストを実行し、成功することを確認します。

   npm test
   

   失敗するテストがある場合は、テストの期待値と実装のどちらが誤っているかに応じて、テストまたはコードを修正します。

テスト対象

• 必ずテストする項目：公開 API、エラー処理、エッジケース（空、null、ゼロ、負の値）、状態遷移、非同期動作
• テストを省略する項目：非公開の実装詳細、サードパーティライブラリの内部処理、単純な getter/setter、型のみのコード

注意事項

• プロジェクトで既存のテストスタイルに合わせます。it() ではなく test() を使用している場合は、同じようにします。
• 実装の詳細ではなく、動作と出力をテストします。内部メソッドの呼び出しはテストしないでください。
• シナリオがわかる説明的なテスト名を付けます。「test1」ではなく、「カートが空の場合に 0 を返す」のようにします。
• テストごとにアサーションの概念を 1 つにします。同じ動作を検証する場合は、複数の expect 呼び出しを使用してもかまいません。
• 非同期コードでは、必ず結果を await するか、resolves／rejects マッチャーを使用します。