playwrightでnext.jsのcoverageまで取りたい

playwrightでnext.jsのテストを実行してcoverageまで取るのがわりと情報揃ってなかったのでまとめる。 手順の流れ 今回は、下記の手順を踏んでいく テストの準備対応 @playwright/testの代わりにplaywright-test-coverageを利用する カバレッジモードのnextの設定 nycを利用するnext.jsの起動モードを準備する(next.config.jsの設定) playwrightとnycをつなぐ playwrightからの起動時にnycを利用した起動モードを利用する 1. テストの準備対応 とりあえず普通にnext.js側のファイルを用意 // pages/index.ts import Head from 'next/head' import React, { useState } from 'react' export default