1. 确保正确安装 Istanbul

安装 Istanbul：

npm install --save-dev istanbul

2. 配置 Cypress 和 Istanbul

在 cypress/plugins/index.js 中添加以下代码：

const istanbul = require('istanbul-middleware')

module.exports = (on) => { on('dev-server:start', (options) => { const istanbulConfig = { reportDir: './coverage', verbose: true, esModules: true } return startDevServer({ options }).then((server) => { istanbul.install(server, istanbulConfig) return server }) }) }

在 cypress.json 文件中添加以下代码：

{ "coverageFolder": "coverage", "experimentalComponentTesting": true, "pluginsFile": "cypress/plugins/index.js" }

3. 运行测试并查看覆盖率报告

运行测试：

npm run test

在浏览器中打开地址 http://localhost:3000/coverage，即可查看覆盖率报告。

附：在 Angular CLI 中添加 Istanbul 配置

在 package.json 文件中添加以下代码：

"test": "ng test --code-coverage && nyc report --reporter=text --reporter=html",

在 angular.json 文件中添加以下代码：

"test": { "builder": "@angular-devkit/build-angular:karma", "options": { "codeCoverage": true, "karmaConfig": "./karma.conf.js" } }

在项目根目录下新建 karma.conf.js 文件，并添加以下内容：

// karma.conf.js const istanbul = require('istanbul-middleware') const path = require('path')

module.exports = function (config) { const istanbulConfig = { // Update to match your project's directory structure... reportDir: path.join(__dirname, 'coverage'), verbose: true, esModules: true, }

config.set({ frameworks: ['jasmine', '@angular-devkit/build-angular'],

// Update to match your project's browser support.
browsers: ['Chrome'],

// Ensure tests absorb sourcemap data.