Awesome
[!NOTE]
The latest version of Next.js does not work withBabel
+Istanbul
, see issue. It recommend to use V8 coverage, see: https://github.com/cenfun/nextjs-with-playwright
Next.js + Playwright + Istanbul
This example shows how to configure Playwright to work with Next.js.
Generate Coverage Report
npm i
npm run test
Coverage report will be found here: test-results/coverage/index.html
Tips
- add babel.config.json with
istanbul
plugin for babel - force swc (disable babel) if not test, see next.config.js
- run
next dev
with envINSTRUMENT_CODE=true
andNODE_OPTIONS=--inspect
- take client side coverage with e2e/fixtures.js
- take server side coverage manually with CDP, see global-teardown.js
Debugging port
The debugging port is 9229
by default
"test:start": "cross-env INSTRUMENT_CODE=true NODE_OPTIONS=--inspect=9229 next dev"
But we should use 9230
(9229 + 1) as the CDP port base on the following prompt:
[WebServer] Debugger listening on ws://127.0.0.1:9229/07ad38a2-2d5a-48df-a4de-07010e2d9b18
For help, see: https://nodejs.org/en/docs/inspector
[WebServer] Debugger listening on ws://127.0.0.1:9230/a3a46ea2-6994-43f2-b6a6-e5834362da4c
For help, see: https://nodejs.org/en/docs/inspector
[WebServer] the --inspect option was detected, the Next.js router server should be inspected at port 9230.
[WebServer] ▲ Next.js 14.1.0
[WebServer] - Local: http://localhost:3000
const client = await CDP({
port: 9230
});
If you are using a different port like 8112
, then the CDP port should be 8113
(8112 + 1).
If you want to use V8
, please refer to:
Issues
- In fact, Next.js uses
swc
as the default compiler, and it has a plugin swc-plugin-coverage-instrument for instrumentation the code for Istanbul, but there is an issue here that is unacceptable.