Next.js のページのテスト
Playwright を使う
良い点
開発体験が良い
外部インターフェースに基づいたテストができて内情に関与せずに済んで良い
悪い点
アプリケーションの外からしか触れないため、MSW と組み合わせてテストコード側でモックするとかはできない
testing-library を使う
良い点
テストコード中で render がなされるため、テストコード中でのみ(= アプリケーションコードを汚さずに) MSW を呼び出して適用するといったことがシンプルに実現できる
悪い点
各種必要な provider の定義等、内情に基づいた前提の整備が必要となる
その他
ところで App page 全体の描画はできないのか?
多くの例では単体の Page コンポーネントを render に渡している。これだと以下のような課題がある。
App 側で呼び出している provider は呼び出されないためテストコード側で呼び出す必要が生まれる
routing が変化しても表示内容は変化しないため、ページ遷移前後も含めたテストは書けない
E2E っぽいテストが書けて、かつテストコード中でモック等ができるので、リダイレクトのテスト等ページをまたぐ場合に便利なケースはあると感じる。
note: