React Router v7で簡単なアプリを作ってPlaywrightでテストする

まず、ログインするだけの簡単なアプリを作ってみます。

https://youtu.be/jZFcqp5th7g

ログインするときにサーバに通信させたかったので、Server actionsを利用してます。
デベロッパーツールでfetchのログが出るのでちゃんと通信できてるかと思います。
※ emailとpasswordはコード上にベタで書いてあります。

コードはこんな感じ

https://github.com/na8esin/react-router7-playwright/blob/a23433076cf8ad33aaf7ce9f697edf370a28c93a/app/routes/signin.tsx

これをPlaywrightでテストしてみます。コードは下記です

https://github.com/na8esin/react-router7-playwright/blob/a23433076cf8ad33aaf7ce9f697edf370a28c93a/tests/signin.spec.ts

Playwrightで一番テストしてみたかったのが、network error の部分です。

test('network error', async ({ page }) => {
  // Block api requests
  await page.route(/_root\.data/, route => route.abort('internetdisconnected'));

  await page.goto('/');
  await page.getByRole('button', { name: 'Sign In' }).click();

  await expect(page.getByText('Oops!')).toBeVisible();
});

jestだとUnhandledPromiseRejectionで、テストが失敗するケースです。
unhandledRejectionで補足するなどで全てを握りつぶしてしまっても不安ですし、ログ等を出力するとエラーになったります。
※ この辺りを検証したコードはこのあたりにあります。

もう少し細かく言うと、jest+mswで↓のように素直にネットワークをシミュレートすると

http.get('/resource', () => {
  return HttpResponse.error()
})

UnhandledPromiseRejectioが発生するパターンのテストです。
※実際のテストでは、この場合は、大抵、mswではapiのレスポンスを「200 OK」でシミュレートして、stateなどを調整して、エラーのテストをする感じです。

ですので、Playwrightだとどうなんだと調べたかった感じです。

実際のブラウザの動きだと下記のような感じです。
https://youtu.be/opFy0KFENyo

そして、 npx playwright test を実行するともちろん下記のように成功します。

たったこれだけのことなんですが、エラー系のテストがスッとできるだけで気分がとてもよくなります。
本来は、機能的な部分のところのテストに時間かけたいですからね。

以上です。