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へのリクエストが正しいかの検証にはならない