PlaywrightでHTTPリクエストをモック

webアプリをe2eでテストするときに頭を悩ませるのがAPIサーバとの通信です。
localやCI上でどこにエンドポイントを用意するかとか、
DBの状態はどうしておけばいいなど考えることがたくさんあります。

それを解決する一つの手段として、HTTPのリクエストをモックすることが考えられます。
フロントエンドからはAPIサーバと通信しているように見える状態を作ります。

playwrightでの実装方法

playwrightでお馴染みの「page」オブジェクトを使います。

page.route(`http://localhost:3000/api/v1/hoge`, async (route) => {
  const method = route.request().method()
  if ('GET' === method) {
    const response = { message: 'ダミーデータだお' }
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify(response),
    })
  }
})

この場合、フロントエンド側で
http://localhost:3000/api/v1/hoge
にGETでアクセスした時に
{ message: 'ダミーデータだお' }
というJSONが返されることになります。

それってe2eテストなの？

厳密にはe2e（End to End）テストとは言えないのかも知れませんが、フロントエンドのコードベースだけで完結するのでお手軽です。

e2eとは別の呼称が欲しいですね。

厳密なe2eと比べてのメリット

• apiサーバを起動しておかなくて良い
• DBを用意しなくて良い
• 通信コストがなくなるのでテストも速くなる
• 自由にAPIのレスポンスを定義できるので、レアケースの処理もテストしやすい

デメリット

• ダミーのデータを使うので、都合の良いシチュエーションだけの検証となりがち
• 実際のAPIレスポンスの形が変わったら、ダミーのデータも変えないといけない（ダブルメンテ）
• APIへのリクエストが正しいかの検証にはならない