Code coverage for cypress component tests in an Nx Angular Monorepo?

I've set up an NX monorepo with an Angular application and two libraries: mylib-a and mylib-b. Each library has a single component (TitleWidget in mylib-a and TitleWidgetB in mylib-b). Each of these components has its own set of Cypress component tests. I can run the tests for each library separately, but I'm struggling to figure out how to instrument my source code and further get a combined test coverage report for both components.

You can find the sample app and instructions on how to run it here: https://github.com/rtm-celum/angular-cypress-component-test-coverage

I followed the cypress E2E code coverage guide (https://docs.cypress.io/guides/tooling/code-coverage#E2E-and-unit-code-coverage) and managed to install the plugin and everything around it.

I also tried to follow https://nx.dev/packages/angular/generators/cypress-component-configuration and to add instrumentation settings (babel-loader, babel-plugin-istanbul) as additional webpack configs via cypress.config.ts or via targets in my applications project.json file.

No matter what I tried, when I execute the cypress component tests, the .nyc_output/out.json always was empty {}.

I also had problems with the setup but finally I found a solution.

Here are the required steps:

1. Install some more dependencies:

   npm i @cypress/code-coverage @jsdevtools/coverage-istanbul-loader -D
   

2. Add a custom webpack config to cour project

   import * as path from "path";
   
   export const CoverageWebpack = {
       module: {
           rules: [
               {
                   test: /\.(js|ts)$/,
                   loader: '@jsdevtools/coverage-istanbul-loader',
                   options: {esModules: true},
                   enforce: 'post',
                   include: [
                       path.join(__dirname, '../..', 'apps'),
                       path.join(__dirname, '../..', 'libs')
                   ],
                   exclude: [
                       /\.(cy|spec)\.ts$/,
                       /node_modules/
                   ]
               }
           ]
       }
   };
   

3. Modify the cypress.config.ts like this:

    import {nxComponentTestingPreset} from '@nx/angular/plugins/component-testing';
    import {defineConfig} from 'cypress';
    import {CoverageWebpack} from './coverage.webpack'
   
    const nxPreset = nxComponentTestingPreset(__filename);
   
    export default defineConfig({
      component: {
        ...nxPreset,
      devServer: {
        ...nxPreset.devServer,
        webpackConfig: CoverageWebpack,
      },
      setupNodeEvents(on, config) {
      // eslint-disable-next-line @typescript-eslint/no-var-requires
      require('@cypress/code-coverage/task')(on, config)
      // include any other plugin code...
   
          // It's IMPORTANT to return the config object
          // with any changed environment variables
          return config;
        },
      }
    });
   

4. Add following line to component.ts (thx @Miguel)

   import '@cypress/code-coverage/support'
   

Here is my result for mylib-a:
coverage output html

Unfortunately also the cypress commands will be listed. Maybe this can be solved by changing the include or exclude in the coverage.webpack.ts.

I hope I did not forget anything. (I cloned your project and modified it. If you create a branch for me I might push my changes inside it if you want.)

I've also been dealing with this issue.

The steps provided by @Butterbluemchen are similar to the ones I followed, you can find them here.

I think it is missing adding

import '@cypress/code-coverage/support'

in cypress/support/component.js

Anyway following any option mentioned here I'm still not getting the coverage report correct.
It is marking lines that don't correspond with the real source code but with minified or transpiled code executed by Cypress...

EDIT: I found my problem with the correct coverage report. The reason was the devServer started by NX for Cypress was not using soureMap. I just modified the devServerTarget option for the component-test tag in project.json to use the development configuration. Something like:

"component-test": {
  "executor": "@nx/cypress:cypress",
  "options": {
    "cypressConfig": "libs/mylib-a/cypress.config.ts",
    "testingType": "component",
    "skipServe": true,
    "devServerTarget": "mylib-a:build:development"
  }
}