【ITニュース解説】Testing Next.js Server-Side Rendering APIs with Playwright and MSW

WebサイトやWebアプリケーションの開発では、作ったものが意図通りに動くかを確認する「テスト」が非常に重要だ。特に、ユーザーが見る画面（フロントエンド）と、裏側でデータを処理する部分（バックエンド）が連携して動く現代のWebアプリケーションでは、多岐にわたる状況を想定したテストが必要になる。もしテストが不十分だと、ユーザーが困るような不具合が発生したり、サービスが停止したりといった事態につながりかねない。この解説では、人気のあるWebフレームワークであるNext.jsで作成されたWebページ、特に「サーバーサイドレンダリング（SSR）」という方法で作られたWebページを、より確実かつ効率的にテストするための具体的な方法について説明する。

Next.jsは、Reactという技術をベースに、より高度なWebサイトを簡単に作れるように設計されたフレームワークだ。そのNext.jsが提供する「サーバーサイドレンダリング（SSR）」とは、ユーザーがWebページにアクセスした際、サーバー側でページのHTMLを事前に生成してから、そのHTMLをユーザーのブラウザに送る仕組みを指す。この方法には、ページの表示速度が速くなる、検索エンジンに優しいといったメリットがある一方で、ページが表示される前にサーバー側でデータを取得する必要があるため、そのデータ取得部分のテストが複雑になりがちだ。特に、Webページが外部のAPI、例えば天気情報やユーザー情報を取得するAPIに依存している場合、テストにはいくつかの大きな課題が伴う。まず、外部APIが不安定だと、テストの結果も不安定になり、成功したり失敗したりと予測不能になることがある。次に、実際のネットワークエラーやAPIからエラー応答が返されるといった、望ましくない状況をテストで再現するのが難しい。また、APIが返すデータの内容によってページの表示が変わるため、様々なデータパターンをテストする必要がある。さらに、複数のテストを同時に実行しようとすると、外部APIとの通信が原因でテストが互いに干渉し合い、期待しない結果を引き起こす「競合状態」が発生することもある。

これらの課題を解決するために、記事では「Playwright」と「Mock Service Worker (MSW)」という二つの強力なツールを組み合わせて使う方法を提案している。Playwrightは、Webブラウザを自動的に操作してテストを行うためのツールで、まるで実際のユーザーがWebページを操作しているかのように、ボタンをクリックしたり、文字を入力したり、画面の表示を確認したりすることができる。これにより、Webサイト全体の動作を端から端まで（エンドツーエンドで）テストできる。一方、MSWは、Webページが外部APIにデータを要求する際に発生するネットワーク通信を「横取り」し、本物のAPIからの応答ではなく、あらかじめ開発者が用意した「偽の応答」を返すことができるツールだ。このMSWを使うことで、外部APIの状況に左右されず、常に決まったデータやエラーを返させることで、テストの安定性と再現性を飛躍的に高めることができる。

具体的なテスト環境の準備手順も示されている。まず、PlaywrightとMSWをプロジェクトにインストールする。次に、MSWを使って、テスト中にどのAPIリクエストに対してどのような「偽の応答」を返すかを定義する「ハンドラー」を作成する。例えば、ユーザーリストを取得するAPIへのリクエストに対しては、「IDが1のジョン・ドウ」と「IDが2のジェーン・スミス」というダミーのユーザーデータを返すように設定できる。さらに、様々なテストシナリオに対応できるよう、複数のハンドラーのセットを定義しておく。例えば、「APIがサーバーエラーを返すシナリオ」「ユーザーデータが何も返ってこない空のシナリオ」「ネットワーク接続自体に問題があるかのようなエラーを返すシナリオ」などだ。そして、これらのMSWのシナリオをPlaywrightのテストから切り替えられるように、Next.jsアプリケーション内に特別なAPIルートを設ける。このAPIルートにPlaywrightからリクエストを送ることで、テスト中に動的にMSWの振る舞いを変更し、特定の状況を再現できる。

テストの対象となるNext.jsのSSRページ自体も、エラーに強く設計することが重要だ。記事では、ユーザーリストを表示するページを例に、もしデータ取得中にエラーが発生しても、画面が真っ白になることなく、適切に「ユーザーの取得に失敗しました」というエラーメッセージを表示するように実装されている。このような堅牢なエラーハンドリングは、実際のユーザー体験を向上させるだけでなく、テストを通じて様々なエラーシナリオでの動作を確認する上でも不可欠となる。ページは、正常にデータが取得できた場合はユーザーのリストを表示し、何らかの理由でデータ取得に失敗した場合は、分かりやすいエラーメッセージを表示するようになっている。

Playwrightでのテストの記述についても説明されている。テストのセットアップとして、各テストが始まる前と終わった後に、MSWのハンドラーをデフォルトの状態に「リセット」する仕組みを導入する。これは、前のテストが設定したMSWの状態が、次のテストに影響を与えてしまわないようにするための重要な工夫だ。また、特定のMSWシナリオを適用するためのヘルパー関数も用意する。これにより、テストコード内で簡単に「APIエラーシナリオを適用する」といった指示ができるようになる。具体的なテスト例としては、まず「正常にユーザーデータが表示されること」を確認するテスト。次に、MSWを使って「APIエラーシナリオ」を適用し、Webページが「データの取得に失敗しました」というエラーメッセージと関連する表示を正しく行うことをテストする。さらに、「空データシナリオ」を適用してユーザーが一人も表示されないことを確認するテストや、「ネットワークエラーシナリオ」を適用して適切なエラーメッセージが表示されることを確認するテストなども記述できる。

Playwrightの設定においても、いくつかの重要なポイントがある。特に、MSWを使ったテストでは、複数のテストを同時に実行するとMSWの状態が共有されてしまい、予測できない競合状態が発生する可能性があるため、Playwrightの設定ファイルで「テストを並行実行しない（fullyParallel: false）」、「同時に動作するテストの数を1つに制限する（workers: 1）」といった指定を行うことが推奨されている。これにより、テストの安定性が確保される。また、テスト対象のWebアプリケーションが動作しているURLや、MSWのモック機能を有効にするための環境変数なども設定する。

このPlaywrightとMSWを組み合わせたテスト手法には、いくつかの大きなメリットがある。第一に、外部APIに依存しないため、テストが非常に信頼性が高く、常に安定した結果が得られる。第二に、ネットワークの障害やAPIからのエラー応答など、実際の環境では再現が難しい様々なエラーシナリオを簡単にシミュレーションしてテストできる。第三に、実際のネットワーク通信を行わないため、テストの実行速度が速い。第四に、テスト結果が毎回同じになる「決定性」があるため、不具合の特定が容易になる。そして何より、APIのあらゆる応答パターンを開発者が完全にコントロールできるため、どんな複雑なケースでもテストできるのだ。

最後に、テストを成功させるためのベストプラクティスも示されている。具体的には、各テストの実行前後にMSWのハンドラーを必ずリセットすること。MSWのシナリオを切り替える操作の後に、少し待機時間を設けて変更が確実に反映されるようにすること。共有されるMSWの状態に起因する競合状態を避けるために、テストは順番に実行すること。正常な動作だけでなく、エラーが発生するシナリオも積極的にテストすること。そして、MSWのハンドラーは、特定のテストシナリオに焦点を当ててシンプルに保つことが挙げられる。これらのベストプラクティスを守ることで、より堅牢で信頼性の高いテストスイートを構築できるだろう。PlaywrightとMSWの組み合わせは、Next.jsのSSRアプリケーション開発において、ページの信頼性を高め、ユーザーに安定した体験を提供する上で非常に強力なアプローチと言える。テスト間の適切な分離とMSWの状態管理を意識することが、安定したテストの鍵となる。