どんなに優れたアプリケーションでも、品質保証のためのテストがなければ安心してリリースできません。この回では、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のテストを実行するには、アプリケーションがローカルで起動している必要があります。
-
ブラウザで挙動確認:
→ テストランナーが起動し、GUIでテストを選択・実行できます。
npm run cypress:open -
ターミナルでテスト結果のみ確認:
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で拡張 |
| 学習コスト | 中〜高（ただし、習得すれば高機能で効率的な開発が可能） |