I've built tests using Cypress to test the FE of a Next.js application. now I want to add code-coverage checks to see where and what I need to add and to keep track of my progress. Looking at the guides published by Cypress it seems that istanbuljs is the recommended way to go, but for some reason I can't get it to work.
I tried instrumenting the code via nyc to an /instrumented dir and running from there, tried adding it as part of the babel pipeline, but nothing works.
Currently I managed to arrive at 1 of 2 outcomes - Either the tests run fine, but no code-coverage data is collected, or the app will not work.
project package.json devDependencies:
"devDependencies": {
"@babel/preset-react": "^7.18.6",
"@cypress/code-coverage": "^3.10.0",
"babel-plugin-istanbul": "^6.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"cypress": "^10.1.0",
"cypress-react-selector": "^2.3.20",
"nyc": "^15.1.0"
}
.babelrc:
[if this file exsits, the app will not load - every page/component throws 'React is undefined' error in terminal]
{
"presets": ["@babel/preset-react"],
"plugins": ["transform-class-properties", "istanbul"]
}
support/e2e.js:
import './commands';
import '@cypress/code-coverage/support';
cypress.config.js:
const { defineConfig } = require('cypress');
module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:3000',
setupNodeEvents(on, config) {
require('@cypress/code-coverage/task')(on, config);
on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'));
return config;
},
},
watchForFileChanges: false,
defaultCommandTimeout: 1000000,
});