ウェブアプリケーションのテスト戦略

ウェブアプリケーションのテスト：単体テストからエンドツーエンドまで

テストは、アプリケーションが正しく動作することを確認するための方法です。テストがなければ、すべての変更は信仰の飛躍です。優れたテストスイートがあれば、何かを壊した場合にすぐにわかるため、自信を持って変更を加えることができます。

テストピラミッド

テストピラミッドは、各タイプのテストをどれだけ持つべきかを考える方法です。底部には、個々の関数を独立してテストする、多くの高速でシンプルな単体テストがあります。中間には、システムの異なる部分が連携して動作することを確認する、より少ない数の統合テストがあります。上部には、完全なユーザーフローをテストする少数のエンドツーエンドテストがあります。

この形状の理由は、速度と信頼性です。単体テストはミリ秒で実行され、非常に信頼性が高いです。失敗した場合、何が問題か正確にわかります。エンドツーエンドテストは数秒または数分かかり、ネットワークの問題、タイミング、ブラウザの動作により不安定になる可能性があります。高速で信頼性の高いテストを多く、低速で不安定なテストを少なくしたいのです。

単体テスト

単体テストは、単一の関数またはコンポーネントを独立してテストします。ネットワーク呼び出しを行わず、データベースにアクセスせず、ブラウザと対話しません。これにより、高速で焦点が絞られます。割引を計算する関数の場合、異なる入力、エッジケース、エラー条件に対して正しい値を返すことをテストします。Reactコンポーネントの場合、異なるプロパティで正しくレンダリングされることをテストします。

VitestとJestは、JavaScriptで最も人気のあるテストフレームワークです。テストを記述し、アサーションを行い、依存関係をモックする方法を提供します。良い目標は、ビジネスロジック（決定を下しデータを処理するコードの部分）の高いカバレッジを持つことです。

統合テスト

統合テストは、システムの異なる部分が連携して動作することを確認します。統合テストはAPIエンドポイントを呼び出し、データベースからの読み取りと書き込みが正しく行われることを確認するかもしれません。認証ミドルウェアが不正なリクエストを正しく拒否することをテストするかもしれません。これらのテストは、実際のデータベースとネットワーク呼び出しを含むため単体テストよりも低速ですが、単体テストでは発見できない問題をキャッチします。

エンドツーエンドテスト

エンドツーエンド（E2E）テストは、実際のユーザー操作をシミュレートします。ブラウザを開き、サイトに移動し、ボタンをクリックし、フォームに入力し、期待されることが発生することを確認します。PlaywrightやCypressのようなツールは、高速に実行され信頼性の高いセレクタを提供することで、これを実用的にします。

E2Eテストは最も現実的ですが、最もコストもかかります。重要なユーザージャーニー（サインアップ、購入、コンテンツ作成）をテストしますが、すべての可能なパスをテストしようとしないでください。よく選ばれた少数のE2Eテストは、多くの脆弱なテストよりも価値があります。

CI/CDでのテスト

テストは、プッシュのたびに自動的に実行されるときに最も価値があります。CIパイプラインは、最初に単体テスト（最速）、次に統合テスト、次にE2Eテストを実行する必要があります。テストが失敗した場合、パイプラインは停止し、チームに通知されます。これにより即座にフィードバックが得られ、壊れたコードが本番環境に到達するのを防ぎます。