getting cypress code coverage to work with angular and typescript

I'm trying to get cypress code coverage working with my angular/typescript project but am stuck on the instrumentation step.

I've tried to follow a few guides, like this one, but nothing seems to have worked - every time I run my cypress tests, I get the notification Did you forget to instrument your code?

Here's my current set-up:

coverage.webpack.ts:

import * as path from 'path';

export default {
module: {
rules: [
{
test: /\.(js|ts)$/,
loader: 'istanbul-instrumenter-loader',
options: { esModules: true },
enforce: 'post',
include: path.join(__dirname, '..', 'src'),
exclude: [
/\.(e2e|spec)\.ts$/,
/node_modules/,
/(ngfactory|ngstyle)\.js/,
],
},
],
},
}


I added the following to my angular.json:

under architect.build.configurations:

"e2e": {
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true,
"vendorChunk": true,
"customWebpackConfig": {
"path": "./cypress/coverage.webpack.ts"
}
}


under architect.build:

"serve-coverage": {
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "$PROJECT:build:e2e"
}
},
"e2e": {
"builder": "@cypress/schematic:cypress",
"options": {
"devServerTarget": "$PROJECT:serve-coverage",
"watch": true,
"headless": false
},
"configurations": {
"production": {
"devServerTarget": "$PROJECT:serve-coverageroduction"
}
}
},
"e2e-ci": {
"builder": "@cypress/schematic:cypress",
"options": {
"browser": "chrome",
"devServerTarget": "$PROJECT:serve-coverage",
"headless": true,
"watch": false
},
"configurations": {
"production": {
"devServerTarget": "$PROJECT:serve-coverageroduction"
}
}


Then I added the following to cypress.config.ts:

const registerCodeCoverageTasks = require("@cypress/code-coverage/task");

async function setupNodeEvents(
on: Cypress.PluginEvents,
config: Cypress.PluginConfigOptions
): Promise<Cypress.PluginConfigOptions> {
registerCodeCoverageTasks(on, config);
return config;
}

export default defineConfig({
e2e: {
baseUrl: '$LOCALPORT',
specPattern: 'cypress/e2e/**/*.feature',
supportFile: 'cypress/support/e2e.ts',
setupNodeEvents,
},
});


Apologies for the length, but would appreciate if anyone can provide a direction! Stuck on where to go from here.

Continue reading...