Nextjs Cypress Only found unit test code coverage - reactjs

Question

I am trying to add code coverage to cypress following this tutorial
I added #cypress/code-coverage and babel-plugin-istanbul to my package.json file below
{
"name": "quiz",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"cypress": "cypress open"
},
"dependencies": {
"next": "12.0.10",
"react": "17.0.2",
"react-dom": "17.0.2",
"sass": "^1.49.7"
},
"devDependencies": {
"#cypress/code-coverage": "^3.9.12",
"#types/node": "17.0.15",
"#types/react": "17.0.39",
"babel-plugin-istanbul": "^6.1.1",
"cypress": "^9.4.1",
"eslint": "8.8.0",
"eslint-config-next": "12.0.10",
"typescript": "4.5.5"
}
}
I configured my cypress/support/index.js
// Import commands.js using ES2015 syntax:
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')
import '#cypress/code-coverage/support'
I configured my cypress/plugins/index.js
/**
* #type {Cypress.PluginConfig}
*/
// eslint-disable-next-line no-unused-vars
module.exports = (on, config) => {
require('#cypress/code-coverage/task')(on, config)
on('file:preprocessor', require('#cypress/code-coverage/use-babelrc'))
return config
}
My .babelrc
{
"presets": [
"next/babel"
],
"plugins": [
"istanbul"
]
}
After I run my test I get the following message
Only found unit test code coverage. [#cypress/code-coverage]
After I run my quiz.spec.js test, I run
npx nyc report --reporter=text-summary
And get an empty coverage summary
What am I doing wrong?
My github

Answer 1

I think it was just a node_modules problem, as your repo worked after download and initialization. I think babel can fail silently if it's dependencies are out of order.
I removed package.lock (because I use yarn to manage things) and then yarn to init the dependecies.