【ITニュース解説】🎭How to test Next.js SSR API (Playwright + MSW) Part 2 Parallel test🎭

前回の記事では、Next.jsのサーバーサイドレンダリング（SSR）機能を使って動くウェブアプリケーションのAPIテストを、PlaywrightとMock Service Worker（MSW）というツールを使って行う方法を紹介した。Next.jsは、ウェブページをサーバーで準備してからユーザーのブラウザに送る技術（SSR）を持つ人気のあるウェブ開発フレームワークであり、これによりページの表示速度向上や検索エンジン最適化（SEO）に有利な点がある。Playwrightは、ウェブブラウザを自動で操作してウェブアプリケーションの動作を検証するテストツールで、ユーザーが実際にウェブサイトを使うかのようにクリックしたり、文字を入力したり、表示内容を確認したりしてテストを実行できる。MSWは、開発中やテスト中に、APIからの応答を一時的に偽物（モックデータ）に置き換えることができるツールであり、これにより実際のサーバーに依存せずに、開発中やテスト中に特定の状況（例えば、サーバーからの特定のデータ応答やエラー応答）を再現できるため、テストの安定性や再現性が高まる。

しかし、前回の方法ではMSWがシステムのどこからでもアクセスできる「グローバルな状態」を持って動作していたため、複数のテストを同時に実行する「並列テスト」ができなかった。並列テストは、テストにかかる時間を大幅に短縮し、開発プロセスを高速化するために非常に重要である。MSWがグローバルな状態を持っていると、あるテストがMSWの設定を変更した場合、同時に実行されている他のテストもその変更の影響を受けてしまい、意図しない結果になる可能性があった。そのため、テストは一つずつ順番に実行せざるを得ず、テストの総時間が増加してしまうという課題があった。

今回の改修では、この課題を解決し、Playwrightを使った並列テストを可能にすることで、テストにかかる時間を大幅に短縮することを目指した。主な変更点は以下の四つである。

まず一つ目は、モックサーバーを動的に複数起動できるようにした点である。これまでは一つのモックサーバーしか起動できなかったが、今回の変更により、mock-server.tsというファイルに修正を加え、.envという設定ファイルに記述されたMOCK_SERVER_COUNTという値に基づいて、必要な数のモックサーバーを起動できるようにした。これにより、テストが複数同時に実行される際に、それぞれのテストが自分専用の独立したモックサーバーを利用できるようになり、互いの設定変更が干渉し合う問題が解消される。

二つ目は、Playwrightの設定ファイルであるplaywright.config.tsを並列テストに対応させた点である。具体的には、Playwrightがテストを実行する際に、どのテストワーカー（並列実行される個々のテストプロセス）で動作しているかを示すtest.info().workerIndexという情報を利用できるようにした。このworkerIndexを使うことで、各テストワーカーがそれぞれ異なるポート番号のモックサーバーに接続するように制御し、それぞれのテストが独立した環境で実行されることを保証した。また、.envファイルで設定されたMOCK_SERVER_COUNTの値に応じて、Playwrightが起動するテストワーカーの数を調整できるようにも設定を変更した。

三つ目は、ウェブアプリケーションのAPIパスで使われるポート番号を動的に変更できるようにした点である。これまではAPIが固定のポート番号（例えば3001番）を使っていたため、一つのポートで複数のモックサーバーを動かすことはできなかった。そこで、server.ts、handler.ts、そしてNext.jsのページコンポーネントであるpage.tsxといったファイルを修正し、APIがリクエストを受け取るポート番号を動的に設定できるようにした。具体的には、page.tsxではURLのクエリパラメータとしてmockPortを受け取り、そのポート番号を使ってAPIにリクエストを送るように変更した。これにより、起動した複数のモックサーバーがそれぞれ異なるポート番号で待ち受け、各テストが正しいモックサーバーと通信できるようになった。

四つ目は、モックサーバーの数を環境変数で簡単に設定できるようにした点である。.envファイルにMOCK_SERVER_COUNTという設定を追加することで、ユーザーは自分のPCの性能に合わせて、起動するモックサーバーの数を柔軟に調整できるようになった。これにより、並列テストの数を増やしてテスト時間をさらに短縮したり、PCのリソースに余裕がない場合にはモックサーバーの数を減らして安定動作させたりと、状況に応じた調整が可能になる。

これらの改修を適用した上で、実際に並列テストを実行する手順は以下のようになる。まず、npx create-next-app@latest my-app --yesコマンドでNext.jsプロジェクトを作成し、作成されたプロジェクトフォルダに移動する。次に、Playwright、MSW、tsx（TypeScriptファイルを直接実行するためのツール）、dotenv（環境変数を管理するツール）といった必要なツールをインストールする。その後、ニュース記事で示されている各ファイルのコードをプロジェクト内にコピー＆ペーストして配置する。

my-app/src/app/page.tsxはNext.jsのウェブページを定義するファイルで、ここではポケモンデータを取得して表示するシンプルなコンポーネントとして機能する。このページはテスト時にMSWによってAPIからのデータが偽物に置き換えられるように設計されており、URLのsearchParamsから動的なmockPortを受け取ることで、特定のモックサーバーに接続できるようになっている。

tests/example.spec.tsはPlaywrightのテストコードであり、setMockPokemonというヘルパー関数を使って、どのポケモンデータ（例えば、ピカチュウ、イーブイ、エラーなど）をモックサーバーに返させるかを指示する。この関数の中でtest.info().workerIndexを使って各テストワーカーに応じたポート番号を計算し、適切なモックサーバーと通信するようになっている。

mocks/handlers.tsはMSWが提供するモックデータとその応答ロジックを定義するファイルで、様々なポケモンデータ（チャリザード、ピカチュウ、イーブイなど）やエラー応答の定義が含まれる。createHandlers関数は、ポート番号を受け取ってそのポートに特化したハンドラ（モック応答のルール）を生成する。

mock-server.tsはモックサーバーを起動・管理するスクリプトで、複数のサーバーインスタンスを生成するロジックや、Playwrightからのリクエストを受けてMSWのモックデータを切り替えるAPIエンドポイントを提供する。MOCK_SERVER_COUNTが1より大きい場合、このスクリプトは自身の子プロセスとして複数のモックサーバーを起動し、それぞれが異なるポートで動作するように設定する。

.envファイルではMOCK_SERVER_COUNT=6のように、起動するモックサーバーの数を設定する。そして、playwright.config.tsファイルを修正し、fullyParallel: trueとworkers: parseInt(process.env.MOCK_SERVER_COUNT || "4")を設定することで、Playwrightが環境変数に基づいて並列テストを実行するようにする。

実際にテストを実行するには、まず一つのターミナルでnpx tsx mock-server.tsコマンドを使ってモックサーバー群を起動する。その後、別のターミナルでnpm run devコマンドを実行し、Next.jsアプリケーションを開発モードで起動する。最後に、三つ目のターミナルでnpx playwright testコマンドを実行すると、設定された数のテストワーカーが同時に起動し、それぞれが独立したモックサーバーと連携しながら並列でテストを実行する。

これにより、以前は順番にしか実行できなかったNext.js SSR APIのテストが、PCの性能に応じて複数のテストを同時に実行できるようになり、テスト全体の完了時間を大幅に短縮できるようになった。これは、継続的なインテグレーション（CI）環境や大規模なプロジェクトにおいて、開発サイクルを加速させる上で非常に大きなメリットをもたらす。