【Playwright】API の Mock を導入する

はじめに

この記事では、Playwright で API を Mock する方法を記載します。

開発環境

開発環境は以下の通りです。

• Windows 11
• Next.js 14.2.13
• React 18.3.1
• TypeScript 5.6.3
• SWR 2.2.5
• Playwright 1.48.2

テスト対象コード

ジョークを取得する API を実行して、その結果を表示するコードを実装します。
今回 API の呼び出しは fetch と SWR を利用しています。

page.tsx

"use client";

import useSWR from "swr";

const fetcher = async (url: string) => {
  const res = await fetch(url);
  return await res.json();
};

export default function Page() {
  const { data } = useSWR<{
    id: number;
    type: string;
    setup: string;
    punchline: string;
  }>("https://official-joke-api.appspot.com/random_joke", fetcher);

  return (
    <div>
      <h3>{data?.type}</h3>
      <p>{data?.setup}</p>
      <p>{data?.punchline}</p>
    </div>
  );
}

テストコードの実装

API を Mock して、その結果を確認するテストコードを実装します。
API のルーティングの Mock は page.route というメソッドを利用します。第一引数で Mock するルートを記載します。第二引数で、fulfill というメソッドを利用してレスポンスを Mock します。

page.spec.ts

import test, { expect } from "@playwright/test";

test("API response should be displayed as expected", async ({ page }) => {
  // Mock the api call before navigating
  await page.route(
    "https://official-joke-api.appspot.com/random_joke",
    async (route) => {
      const json = {
        id: 8,
        type: "general",
        setup: "How many lips does a flower have?",
        punchline: "Tulips",
      };
      await route.fulfill({ json });
    }
  );

  // Go to the page
  await page.goto("http://localhost:3000");

  // API response is visible
  await expect(page.getByRole("heading", { name: "general" })).toBeVisible();
  await expect(
    page.getByText("How many lips does a flower have?")
  ).toBeVisible();
  await expect(page.getByText("Tulips")).toBeVisible();
});

参考

• fulfill
• Mock APIs
• page.route