Angular + Cypress代码覆盖率报告不起作用

Question

我一直试图使赛普拉斯代码覆盖率与我的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"
            }
          }
        }

Cypress似乎正在记录和保存报道：

const registerCodeCoverageTasks = require("@cypress/code-coverage/task");

module.exports = (on, config) => {
  registerCodeCoverageTasks(on, config);

  return config;
};

out.json似乎具有正确的文件和代码映射：

：

package.json（nyc配置+ deps）：

{
  "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配置是：

  "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。

Answer 1

比较ang-cy-cov-example与您的package.json，主要区别在于他使用@ cypress / code-coverage @ 1.14.0 where-因为您拥有最新的v3.8.1。

回到此v1.14.0版本可以在您的设置中正常运行。由于您的信息指示数据显示在.nyc_output/out.json中，因此我使用命令行./node_modules/.bin/nyc report进行了测试，该命令行可在控制台中快速查看。

比较两个版本之间的.nyc_output/out.json，各个节点在结构上是相同的，即具有正确的部分（路径，statementMap，inputSourceMap等）。

有两种附加节点

其他文件，例如karma.conf.js，coverage.webpack.js，cy-ts-preprocessor.js，integration / spec.ts，support / commands.ts-我们不感兴趣。
] >
我们感兴趣的文件在文件末尾重复，但是重复没有覆盖率。

例如

带有指标的main.ts的第一份副本

  "path-to\\src\\main.ts": {
    "path": "path-to\\src\\main.ts",
    "statementMap": {
         ...
      },
      "1": {
         ...
      },
      "2": {
         ...
      }
    },
    "fnMap": {},
    "branchMap": {
         ...
    },
    "s": {
      "0": 1,   // indicates one visit to this statement
      "1": 0,
      "2": 1
    },
    "f": {},
    "b": {
      "0": [
        0,
        1
      ]
    },
    "inputSourceMap": {
         ...
    },
    "_coverageSchema": "332fd63041d2c1bcb487cc26dd0d5f7d97098a6c",
    "hash": "5959c383a9744c99a600a28ff82b12f0a540c5e6"
  },
main.ts的第二个副本，没有度量标准

  "path-to/src/main.ts": {
    "path": "path-to/src/main.ts",
    "statementMap": {},
    "fnMap": {},
    "branchMap": {},
    "s": {},          // no metrics recorded here
    "f": {},
    "b": {}
  },
因此，结论是纽约市报告正在将第二个节点的空指标替换为第一个节点的指标。

我跳过了所有版本，v3.2.0是我发现可以使用的最新版本。

[添加节点模块时也请注意此警告，但不能说这是否是一个重要因素。

警告“> @ briebug / cypress-schematic @ 3.3.0”具有不正确的对等项依赖关系“ cypress@^3.6.1”
故障点

基本问题在task-utils.js中。

参考getting allFiles

const allFiles = globby.sync(patterns, { absolute: true })
即使在Windows上，globby返回带有正斜杠的路径

和参考getting coveredPaths

const coveredPaths = coverageKeys.map(key => nycCoverage[key].path)
密钥在Windows中以反斜杠保存在out.json中的位置。

快速的解决方法是此时将路径归一化

const coveredPaths = coverageKeys.map(key => nycCoverage[key].path)
  .map(path => path.replace(/\\/g, '/'))  // Compare "normalized" paths 
修补'/node_modules/@cypress/code-coverage/task-utils.js'可解决此问题。

Angular + Cypress代码覆盖率报告不起作用

问题描述投票：1回答：1

1个回答

最新问题

Angular + Cypress代码覆盖率报告不起作用

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1