无法使用 Cypress + Istanbul 获得代码覆盖率

Question

我尝试使用 Cypress 和 istanbul[ 在 Angular 8 项目中设置代码覆盖率=42=] 纽约.

我设法检测了代码（全局变量 __coverage__ 已正确设置）：

和运行cypress:open
后.nyc_output生成的覆盖文件

但是生成的覆盖率报告是空的：

$ cat coverage/coverage-final.json {}

执行命令时结果相同：

$ npx nyc report --report-dir ./coverage --temp-dir .nyc_output --reporter=text ----------|----------|----------|----------|----------|-------------------| File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s | ----------|----------|----------|----------|----------|-------------------| All files | 0 | 0 | 0 | 0 | | ----------|----------|----------|----------|----------|-------------------|

这是我的 package.json devDependencies：

"devDependencies": { "@angular-devkit/build-angular": "^0.803.3", "@angular-devkit/build-optimizer": "^0.803.3", "@angular/cli": "^8.3.3", "@angular/compiler-cli": "8.2.5", "@angular/language-service": "8.2.5", "@briebug/cypress-schematic": "^2.0.0", "@cypress/code-coverage": "^1.10.1", "@cypress/webpack-preprocessor": "^4.1.0", "@istanbuljs/nyc-config-typescript": "^0.1.3", "@types/jasmine": "^3.4.0", "@types/jasminewd2": "^2.0.6", "@types/node": "^12.7.4", "babel-plugin-istanbul": "^5.2.0", "codelyzer": "^5.1.0", "cypress": "^3.4.1", "istanbul-instrumenter-loader": "^3.0.1", "istanbul-lib-coverage": "^2.0.5", "jasmine-core": "^3.4.0", "jasmine-spec-reporter": "4.2.1", "karma": "^4.3.0", "karma-chrome-launcher": "^3.1.0", "karma-cli": "^2.0.0", "karma-coverage-istanbul-reporter": "^2.1.0", "karma-jasmine": "^2.0.1", "karma-jasmine-html-reporter": "^1.4.2", "mochawesome": "^4.1.0", "ngx-build-plus": "^8.1.4", "nyc": "^14.1.1", "protractor": "^5.4.2", "protractor-html-reporter-2": "^1.0.4", "protractor-http-client": "^1.0.4", "source-map-support": "^0.5.13", "ts-node": "^8.3.0", "tslib": "^1.10.0", "tslint": "^5.19.0", "typescript": "3.5.3" }

还有我的.nycrc.json：

{ "cache": false, "extension": [ ".ts", ".tsx" ], "exclude": [ "**/*.d.ts", "coverage/**", "packages/*/test/**", "test/**", "test{,-*}.ts", "**/*{.,-}{test,spec}.ts", "**/__tests__/**", "**/node_modules/**" ], "all": true, "check-coverage": true, "require": [ "ts-node/register" ], "temp-directory": ".nyc_output", "sourceMap": false, "instrument": false, "include": ["src/**/*.ts", "src/**/*.tsx"] }

Answer 1

这里是一步一步的详细描述。 https://docs.cypress.io/guides/tooling/code-coverage.html#E2E-code-coverage

我认为您在 index.js 中缺少 code-coverage/support 文件，请按照更改和运行.我觉得你应该不错。

    // cypress/support/index.js
       import '@cypress/code-coverage/support'

   // cypress/plugins/index.js   
      module.exports = (on, config) => {
      on('task', require('@cypress/code-coverage/task'))}

当您运行现在对 Cypress 进行测试时，您应该会在测试完成后看到一些命令。我们在下面使用绿色矩形突出显示了这些命令。

Answer 2

当 excludeAfterRemap 为真时，nyc 中似乎存在问题。

将其设置为 false 解决了问题。

Answer 3

使用@cypress/code-coverage，您必须知道该插件不会检测您的代码。您可以为此目的使用 instanbul。例如，这个插件 babel-plugin-istanbul 可以帮助您实现它。

如果您已经在使用 babel，则需要将插件添加到您的 .babelrc 中，如下所示：

{
  "plugins": ["istanbul"]
}

更多信息请查看https://github.com/cypress-io/code-coverage#instrument-your-application

Answer 4

这是我的建议：

首先，确保你的测试是运行针对你的本地服务实例。

示例：ng serve --configuration=demo & cypress run --headed ...
根据我的经验，.nycrc.json 并不是真正需要的。
你的package.json结尾需要这个：

“纽约”：{ “报告目录”：“覆盖范围-e2e” }

不需要Babel；不是每个人都使用它。除了 Babel，Webpack 构建配置也可以工作：./cypress/coverage.webpack.js

最后，你应该知道：

您可以检测您的服务器，然后使用这些命令生成报告：

## first, instrument your server locally
nyc --silent ng serve

{ then manually test your app or run automation against it }

## then generate your report from the json files that were generated above
nyc report --reporter html --reporter text  --report-dir ./cov-e2e/summary

无法使用 Cypress + Istanbul 获得代码覆盖率

Cannot get code coverage with Cypress + Istanbul

istanbul

angular

nyc

cypress