【发布时间】：2021-09-12 10:41:22
【问题描述】：
我一直试图让赛普拉斯代码覆盖率与我的 Angular 生产项目一起使用，但无济于事。
为了尝试帮助诊断它，我创建了一个最小的实施项目，以确保我没有在生产版本中引入任何奇怪的东西，我不认为我是这样，因为同样的问题仍在发生。它开始让我发疯了！
我使用了一些参考资料，据我所知，我已经准备好了我需要的东西：
据我所知，Angular 和 Cypress 方面都已连接，并在 .nyc_output 文件夹和覆盖率报告中获得输出。然而，该报告并未指出打字稿行覆盖率或包括这些统计数据。
我见过this，但似乎没有帮助。
代码检测（webpack 扩展 + angular.json）：
module.exports = {
module: {
rules: [
{
test: /\.(js|ts)$/,
loader: "istanbul-instrumenter-loader",
options: { esModules: true },
enforce: "post",
include: require("path").join(__dirname, "..", "src"),
exclude: [
/\.(e2e|spec)\.ts$/,
/node_modules/,
/(ngfactory|ngstyle)\.js/,
],
},
],
},
};
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"browserTarget": "architecture-testing:build",
"extraWebpackConfig": "./cypress/coverage.webpack.js",
"sourceMap": true
},
"configurations": {
"production": {
"browserTarget": "architecture-testing:build:production"
}
}
}
赛普拉斯似乎正在记录和保存报道：
const registerCodeCoverageTasks = require("@cypress/code-coverage/task");
module.exports = (on, config) => {
registerCodeCoverageTasks(on, config);
return config;
};
out.json 似乎具有正确的文件和代码映射：
package.json（纽约配置 + 部门）：
{
"name": "architecture-testing",
"version": "0.0.0",
"scripts": {
"postinstall": "ngcc",
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"precypress": "rimraf .nyc_output coverage",
"cypress": "ng run architecture-testing:cypress-run",
"cypress:open": "cypress open",
"cypress:run": "cypress run"
},
"nyc": {
"extends": "@istanbuljs/nyc-config-typescript",
"all": true,
"exclude": [
"coverage/**",
"cypress/**",
"**/*.spec.ts"
]
},
"private": true,
"dependencies": {
"@angular/animations": "~9.1.9",
"@angular/common": "~9.1.9",
"@angular/compiler": "~9.1.9",
"@angular/core": "~9.1.9",
"@angular/forms": "~9.1.9",
"@angular/platform-browser": "~9.1.9",
"@angular/platform-browser-dynamic": "~9.1.9",
"@angular/router": "~9.1.9",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.901.7",
"@angular/cli": "~9.1.7",
"@angular/compiler-cli": "~9.1.9",
"@briebug/cypress-schematic": "^3.3.0",
"@cypress/code-coverage": "^3.8.1",
"@cypress/webpack-preprocessor": "5.4.1",
"@istanbuljs/nyc-config-typescript": "^1.0.1",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"cypress": "^4.8.0",
"istanbul-instrumenter-loader": "^3.0.1",
"istanbul-lib-coverage": "^3.0.0",
"ngx-build-plus": "^9.0.6",
"nyc": "^15.1.0",
"rimraf": "^3.0.2",
"source-map-support": "^0.5.19",
"ts-loader": "7.0.5",
"ts-node": "^8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
}
}
规格文件：
it('does something', () => {
cy.visit('http://localhost:4200');
cy.get('[data-cy=button-one]').click();
cy.get('[data-cy=button-output]').should('have.text', 'you clicked button 1');
});
抱歉，时间太长了，但我不知道下一步该去哪里。如果您能指出任何方向，非常感谢。
根据答案调查更新：
查看@cypress/code-coverage 的过去版本，对我来说，这个问题似乎是在插件的 v3.3.0 中引入的。降级我的最小项目时，v3.2.* 的所有版本都适用于我。查看 v3.3.0 的文档更改后，自述文件中的关键信息是：
**Note:** if you have `all: true` NYC option set, this plugin will check the produced `.nyc_output/out.json` before generating the final report. If the `out.json` file does not have information for some files that should be there according to `include` list, then an empty placeholder will be included, see [PR 208](https://github.com/cypress-io/code-coverage/pull/208).
我原来的纽约配置是：
"nyc": {
"extends": "@istanbuljs/nyc-config-typescript",
"all": true,
"exclude": [
"coverage/**",
"cypress/**",
"**/*.spec.ts"
]
}
因此，出于某种原因，即使我在 out.json 中有正在测试的文件的指标，但正在创建第二个“空占位符”节点并覆盖随后的报告生成。我猜这可能是我的设置的错误或问题，所以会询问创建者。
如果我将 nyc 配置更改为：
"nyc": {
"extends": "@istanbuljs/nyc-config-typescript",
"all": true,
"include": [
"src/**/*.ts"
],
"exclude": [
"coverage/**",
"cypress/**",
"**/*.spec.ts"
]
}
这确实意味着，如果我没有通过测试找到一个文件，它将不会作为空占位符包含在内，因为 "all": true 不再存在。
查看@briebug/cypress-schematic@3.3.0，这似乎不会导致任何问题（不使用他们的构建器也会发生同样的情况），但已将here 和here 提升为一个。
【问题讨论】：
-
找到根本原因的出色工作。如果您查看下面
main.ts的示例，第一个具有指标的节点在路径中已转义反斜杠，而第二个节点具有正斜杠，因此它们在技术上是不同的键。这解释了为什么 v3.3.0 [PR 208] 中添加的功能会出现额外的节点，但我猜只是在 Windows 上，因为 Linux/Mac 从一开始就在路径中具有正斜杠。 -
啊，是的，我没注意到，好地方！看起来确实是同一个问题（我是 Windows 10），所以会密切关注这一点。
-
BTW debug statements in code-coverage 可以在脚本中开启：
"cy:open": "set DEBUG=code-coverage & cypress open"
标签： angular code-coverage cypress istanbul nyc