Nextjs + Cypress + Code coverage Setup

#cypress #nextjs

For quickly understand,

Give a look in my current project:

I struggle with config nextjs + cypress + babel + istanbul for Code coverage in 2 days.

And after research, try and test. I created a public repo for quickly setup a new project, and I want to other can easy to setup.

For quick summary:

Create new project with "npm i create-next-app@latest"
Install cypress, @cypress/code-coverage, babel-plugin-istanbul
Using babel to override the swc compiler (remember remove next/font -> you will find some documents talk about it)
Config cypress, babelrc.json, add api/coverage for get coverage data from server-side component of Nextjs (Please read the source code for more information)
npx cypress open or npx cypress run => check your coverage report and Done!