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

我一直在尝试使赛普拉斯代码覆盖范围与我的Angular生产项目一起工作无济于事。

为了尝试帮助诊断它,我创建了一个最小的实现项目,以确保我没有在生产版本中引入任何奇怪的东西,我不认为这是同样的问题。它开始使我发疯!

我使用了一些参考资料,据我所知,我已经准备好了必要的东西:

据我所知,Angular和Cypress的一面都已连接起来,并且正在.nyc_output文件夹和覆盖率报告中获取输出。但是,该报告并未指出打字稿行的覆盖范围或这些统计信息。

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

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

我见过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;
};

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

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

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

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

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

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

package.json(nyc config + 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","**/*.spec.ts"
    ]
  }

所以出于某种原因,即使我在out.json中对正在测试的文件具有度量标准,也正在创建第二个“空占位符”节点并覆盖随后的报告生成。我猜这可能是我的设置的错误或问题,所以会问创作者。

如果我将nyc配置更改为以下内容,现在可以看到覆盖范围:

  "nyc": {
    "extends": "@istanbuljs/nyc-config-typescript","include": [
      "src/**/*.ts"
    ],"**/*.spec.ts"
    ]
  }

这确实意味着,如果我未通过测试命中文件,则该文件将不作为“ all”作为空占位符包括在内:true不再存在。

在@ briebug / cypress-schematic @ 3.3.0看来,这似乎没有引起任何问题(在不使用其生成器的情况下也会发生同样的问题),但已被提出为herehere

iCMS 回答:Angular + Cypress代码覆盖率报告不起作用

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-我们不感兴趣。 / p>

  • 我们感兴趣的文件会在文件末尾重复,但重复项没有覆盖率指标。

例如

带有指标的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": {},"branchMap": {},"s": {},// no metrics recorded here
    "f": {},"b": {}
  },

因此,结论是NYC报告正在用第二个节点的空指标替换第一个节点的指标。

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

在添加节点模块时也请注意此警告,但不能说这是否是一个促成因素。

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


故障点

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

ref getting allFiles

const allFiles = globby.sync(patterns,{ absolute: true })

其中globby甚至在Windows上也返回带有正斜杠的路径

和参考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'可解决此问题。

本文链接:https://www.f2er.com/2145981.html

大家都在问