Nx Angular Monorepo 中 cypress 组件测试的代码覆盖率

我在设置上也遇到了问题，但最终我找到了解决方案.

以下是必需的步骤:

1. 安装更多依赖项:

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

2. 向课程项目添加自定义webpack配置

   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. 按如下方式修改cypress.config.ts:

    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. 将以下行添加到Component.ts(thx@Miguel)

   import '@cypress/code-coverage/support'
   

以下是我对mylib-a的结果: coverage output html个

不幸的是， cypress 的命令也将被列出.也许可以通过更改overage.webpack.ts中的包含或排除来解决此问题.

我希望我没有忘记任何东西.(我克隆了您的项目并对其进行了修改.如果您为我创建一个分支，如果您愿意，我可能会将我的更改推入其中.)