どんなに優れたアプリケーションでも、品質保証のためのテストがなければ安心してリリースできません。この回では、Reactで最もよく使われるテストツールとその戦略を解説します。

🛡️ React開発におけるテスト戦略

Reactのテストは、その目的と範囲に応じて主に3つのレベルに分類され、それぞれに適切なツールが存在します。

ツール	テストの種類	何をテストする？	実行速度	例えるなら
Jest	単体テスト（Unit）	関数やロジックが正しいか	⚡ とても速い	部品レベルの品質チェック
Testing Library	コンポーネントテスト（UI）	コンポーネントの表示・イベント	⚡ 速い	ボタンやUIの動作チェック
Cypress	E2Eテスト（統合テスト）	ブラウザ上での実際の操作	🐢 やや遅い	ユーザーが使う流れの再現

通常、npx create-react-app でプロジェクトを作成した場合、Jest と Testing Library はデフォルトで導入されます。
テストファイルは、__test__ ディレクトリ内に配置したり、テスト対象ファイルと同じ階層に ファイル名.test.js(x) や ファイル名.spec.js(x) の形式で配置することが多いです。

1. JestとTesting Library

Jest（Unit Test）

JavaScriptコードの最小単位（関数、クラスなど）が意図通りに動作するかを確認します。

React Testing Library (RTL)（Component Test）

コンポーネントテストの中心的なツールです。実装の詳細（例: 内部のState）ではなく、ユーザー視点でコンポーネントが正しく動作するかをテストします。

よく使うマッチャー

マッチャーとは、期待する結果を判定するためのメソッドです。

カテゴリ	必須マッチャー	説明
DOM存在	`toBeInTheDocument()`	要素がDOM上に存在するか
文言	`toHaveTextContent("text")`	要素が特定のテキストを含むか
ボタン状態	`toBeEnabled()` / `toBeDisabled()`	ボタンなどが有効か無効か
属性・class	`toHaveAttribute()` / `toHaveClass()`	属性やCSSクラスが一致するか

Jest モック関連マッチャー

関数が呼ばれたか、どのような引数で呼ばれたかを検証します。

マッチャー	説明
`toHaveBeenCalled()`	モック関数が呼ばれたか
`toHaveBeenCalledTimes(n)`	呼ばれた回数が $n$ 回か
`toHaveBeenCalledWith(arg)`	特定の引数で呼ばれたか

例：

// buttonというRoleを持つ要素が無効化されていることを確認
expect(screen.getByRole("button")).toBeDisabled(); 

// モック関数が { id: 1 } という引数で呼ばれたことを確認
expect(mockFn).toHaveBeenCalledWith({ id: 1 });

2. Cypress（E2E Test）

End-to-End (E2E) テスト のためのツールです。実際のブラウザ環境で、ユーザーがアプリケーションを操作する一連の流れ（ログイン、商品購入、フォーム送信など）をシミュレーションしてテストします。

Cypress実行の注意点

Cypressのテストを実行するには、アプリケーションがローカルで起動している必要があります。

ブラウザで挙動確認:
```
npm run cypress:open
```
→ テストランナーが起動し、GUIでテストを選択・実行できます。
ターミナルでテスト結果のみ確認:
```
npm run cypress:run
```

CypressとTypeScriptを併用する場合の注意点

JestやReact Testing LibraryとCypressを併用する場合、TypeScriptの設定ファイル（tsconfig.json）がテストファイルを誤って読み込み、マッチャーの競合などの干渉を起こすことがあります。

干渉を避けるため、tsconfig.json に以下の様に exclude 設定を追記することが推奨されます。

  "exclude": [
    "node_modules",
    "cypress", // Cypressのディレクトリを除外
    "cypress.config.ts" // Cypressの設定ファイルを除外
  ]

📚 Reactの特徴まとめ

最後に、これまでのシリーズで学んだReactの特徴をまとめます。

項目	内容
UI構築	コンポーネント指向で、UIを部品化
描画性能	仮想DOMでDOM操作を最小限に抑え、最適化
SEO	SPAのため弱め（Next.jsなどのSSRで改善可能）
状態管理	Hooks（useState, useEffect...）やContext、TanStack Queryで拡張
学習コスト	中〜高（ただし、習得すれば高機能で効率的な開発が可能）

参考

【Reactテスト入門】JestとTesting Libraryを使ってReactテスト開発を体感してみよう