4

私はサイプレスのコード カバレッジを私の Angular プロダクション プロジェクトで動作させようとしましたが、役に立ちませんでした。

それを診断するために、最小限の実装プロジェクトを作成して、製品版に奇妙なものを導入していないことを確認しましたが、同じ問題がまだ発生しているとは思いません. それは私を怒らせ始めています！

私はいくつかの参考文献を使用しましたが、私が見ることができる限り、必要なものが整っています:

私が知る限り、Angular と Cypress 側はすべて接続されており、.nyc_output フォルダーとカバレッジ レポートに出力を取得しています。ただし、レポートはタイプスクリプトの行範囲を示していないか、それらの統計を含んでいません.

ここに画像の説明を入力 ここに画像の説明を入力

私はこれを見ましたが、役に立たなかったようです。

コード インストルメンテーション (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 (ニューヨーク構成 + 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 のドキュメントの変更を確認した後、readme の重要な情報は次のとおりです。

**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 でテストされていたファイルのメトリックがあるにもかかわらず、2 番目の「空のプレースホルダー」ノードが作成され、後続のレポート生成が上書きされていました。これは潜在的にバグまたはセットアップの問題であると推測しているので、作成者に尋ねます.

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 を見ると、これは問題を引き起こしているようには見えません (ビルダーを使用しなくても同じことが起こります)。

4

2 に答える 2