首页 > 解决方案 > nyc + cypress + angular 前缀为 webpack:?

问题描述

如何设置 istanbuls nyc 通过 cypress 测试对 Angular 转译代码运行测试覆盖率?

我通过 编译代码ng build,它出现在build/client/目录中,我还编译了我的 cypress 测试,它们出现在build/cypress/. build/cypress/然后我通过以下命令运行 cypress 测试:

npx tsc --project tsconfig.client.test.json
npx ng build
npx nyc --nycrc-path=./.nycrc.client.json cypress run --config reporter=spec

我的.nycrc.client.json文件:

{
    "branches": 0,
    "lines": 0,
    "functions": 0,
    "statements": 0,
    "check-coverage": true,
    "exclude-after-remap": false,
    "reporter": ["text", "html"],
    "clean": true,
    "cache": false,
    "all": true
    "report-dir": "./results/coverage/client",
    "include": [
        "build/client/**/*.js",
        "build/cypress/**/*.js"
    ],
    "exclude": [
        "build/client/es2015-polyfills.js",
        "build/client/polyfills.js",
        "build/client/runtime.js",
        "build/client/styles.js",
        "build/client/vendor.js"
    ]
}

控制台中的覆盖率报告:

------------------------------------------------------------------------------------------------------------------------------|----------|----------|----------|----------|-------------------|
File                                                                                                                          |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
------------------------------------------------------------------------------------------------------------------------------|----------|----------|----------|----------|-------------------|
All files                                                                                                                     |        0 |        0 |        0 |        0 |                   |
 webpack:                                                                                                                     |        0 |        0 |        0 |        0 |                   |
  $_lazy_route_resource lazy namespace object                                                                                 |        0 |        0 |        0 |        0 |... 58,61,62,64,65 |
 webpack:/client                                                                                                              |        0 |        0 |        0 |        0 |                   |
  main.ts                                                                                                                     |        0 |        0 |        0 |        0 |      1,9,10,13,15 |
 webpack:/client/app                                                                                                          |        0 |        0 |        0 |        0 |                   |
  app-routing.module.ts                                                                                                       |        0 |      100 |        0 |        0 |            25,147 |
  app.component.html                                                                                                          |        0 |      100 |      100 |        0 |                 1 |
  app.component.scss                                                                                                          |        0 |      100 |      100 |        0 |                 1 |
...etc.

为什么这里会涉及到 webpack?

此外,它指出从未使用过的测试文件:

在此处输入图像描述

这是来自控制台的测试报告,显示两者都被击中:

在此处输入图像描述

为覆盖范围生成的 html 也不正确:

All files / webpack:/client/bff/components/main-nav main-nav.component.html
0% Statements 0/1 100% Branches 0/0 100% Functions 0/0 0% Lines 0/1
Press n or j to go to the next uncovered block, b, p or k for the previous block.

Unable to lookup source: /home/karl/dev/MOP/build/client/webpack:/client/bff/components/main-nav/main-nav.component.html(ENOENT: no such file or directory, open '/home/karl/dev/MOP/build/client/webpack:/client/bff/components/main-nav/main-nav.component.html')
Error: Unable to lookup source: /home/karl/dev/MOP/build/client/webpack:/client/bff/components/main-nav/main-nav.component.html(ENOENT: no such file or directory, open '/home/karl/dev/MOP/build/client/webpack:/client/bff/components/main-nav/main-nav.component.html')
    at Context.defaultSourceLookup [as sourceFinder] (/home/karl/dev/MOP/node_modules/istanbul-lib-report/lib/context.js:15:15)
    at Context.getSource (/home/karl/dev/MOP/node_modules/istanbul-lib-report/lib/context.js:78:17)
    at Object.annotateSourceCode (/home/karl/dev/MOP/node_modules/istanbul-reports/lib/html/annotator.js:217:40)
    at HtmlReport.onDetail (/home/karl/dev/MOP/node_modules/istanbul-reports/lib/html/index.js:265:27)
    at Visitor.(anonymous function) [as onDetail] (/home/karl/dev/MOP/node_modules/istanbul-lib-report/lib/tree.js:34:30)
    at ReportNode.Node.visit (/home/karl/dev/MOP/node_modules/istanbul-lib-report/lib/tree.js:114:17)
    at getChildren.forEach.child (/home/karl/dev/MOP/node_modules/istanbul-lib-report/lib/tree.js:118:15)
    at Array.forEach ()
    at ReportNode.Node.visit (/home/karl/dev/MOP/node_modules/istanbul-lib-report/lib/tree.js:117:24)
    at getChildren.forEach.child (/home/karl/dev/MOP/node_modules/istanbul-lib-report/lib/tree.js:118:15)

标签: angularcypressnyc

解决方案


推荐阅读