目次
フロントエンドのテスト手法
- Static Test（静的解析）
- コードを実行せずに、「書かれたコードそのもの」をチェックする工程です。
- 文法ミス、型の不一致、コーディングルールの違反を見つける
- Unit Test（単体テスト）
- 関数やコンポーネントなど、「最小単位」が正しく動くかを確認します。
- 例）「この関数にAを入れたらBが返るか？」「ボタンを押したら関数が呼ばれるか？」を検証する。
- Integration Test（結合テスト）
- 複数の部品（コンポーネントや関数）が「組み合わさった時」に正しく動くかを確認します。
- 例）「フォームに入力して送信ボタンを押した時、バリデーションが表示され、APIリクエストが送られるか？」といった一連の流れを検証
- End-to-End Test (E2Eテスト)
- 「ユーザーの操作」をブラウザ上でシミュレートして、システム全体を確認
- 実際にブラウザを立ち上げ、ログインから買い物完了まで、本物のデータベースやAPIを使ってテストする
代表的なツール
単体テスト
- Vitest
- Jest
- React Testing Library
E2Eテスト
- Playwright
- Cypress
React開発での具体例
- ユニットテストはコンポーネントや関数単位でする
- 結合テストはユニットテストを複数まとめてすること
