Configure Cypress Code Coverage plugin

Author: Kevin Old

setup-create-next-app-webpack-4/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["istanbul"]
+}

setup-create-next-app-webpack-4/.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+/.nyc_output
 
 # next.js
 /.next/

setup-create-next-app-webpack-4/cypress.config.js

@@ -1,8 +1,18 @@
 const { defineConfig } = require('cypress')
 const { devServer } = require('@cypress/react/plugins/next')
+const codeCoverageTask = require("@cypress/code-coverage/task")
 
 module.exports = defineConfig({
+  coverage: true,
+  codeCoverage: {
+    exclude: "cypress/**/*.*",
+  },
   component: {
     devServer,
+    devServerConfig: {},
+    setupNodeEvents(on, config) {
+      codeCoverageTask(on, config);
+      return config;
+    },
   },
 })

setup-create-next-app-webpack-4/cypress/support/component.js

@@ -13,8 +13,10 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+import '@cypress/code-coverage/support'
+
 // Import commands.js using ES2015 syntax:
 import './commands'
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

setup-create-next-app-webpack-4/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  // Webpack 5 is enabled by default
+  // You can still use webpack 4 while upgrading to the latest version of Next.js by adding the "webpack5: false" flag
+  webpack5: false,
+}

setup-create-next-app-webpack-4/package.json

@@ -11,8 +11,10 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@cypress/code-coverage": "3.10.0-dev.1",
     "@cypress/react": "^5.12.4",
     "@cypress/webpack-dev-server": "^1.8.3",
+    "babel-plugin-istanbul": "^6.1.1",
     "cypress": "https://cdn.cypress.io/beta/npm/10.0.0/linux-x64/10.0-release-188b9a742ee2ef51102167bfd84b3696a3f72a26/cypress.tgz",
     "html-webpack-plugin": "4",
     "webpack": "4",