Angular + Cypress 코드 검사보고가 작동하지 않음

Angular 프로덕션 프로젝트에서 Cypress 코드 커버리지를 사용하지 않으려 고 노력했습니다.

이를 진단하기 위해 최소한의 구현 프로젝트를 만들어 프로덕션 버전에서 이상한 것을 도입하지 않았는지 확인했습니다. 동일한 문제가 여전히 발생하고 있다고 생각하지 않습니다. 그것은 나를 미치게 만들기 시작했다!

나는 몇 가지 참고 문헌을 사용했으며 내가 볼 수있는 한 다음과 같은 작업을 수행해야합니다.

• Cypress 적용 범위 문서
• 기사 1
• 코드 예제 (이전 종속성)

내가 알 수있는 한 Angular와 Cypress 측은 모두 연결되어 있고 .nyc_output 폴더와 커버리지 보고서에 출력을 얻고 있습니다. 그러나 보고서는 타이프 스크립트 줄 범위를 나타내거나 이러한 통계를 포함하지 않습니다.

나는 이것을 보았지만 도움이되지 않는 것 같습니다.

코드 계측 (웹팩 확장 + 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');
});

너무 길어서 미안하지만 다음에 어디로 가야할지 고민 중입니다. 어떤 방향 으로든 나를 가리킬 수 있다면 많은 감사합니다.

답변 조사에 따른 업데이트 :

Looking at the past versions of the @cypress/code-coverage it appears the issue for me was introduced in v3.3.0 of the plugin. All the versions for v3.2.* were working for me when downgrading my minimal project. After looking at the documentation changes for v3.3.0 the key bit of information in the readme was:

**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).

My original nyc config was:

  "nyc": {
    "extends": "@istanbuljs/nyc-config-typescript",
    "all": true,
    "exclude": [
      "coverage/**",
      "cypress/**",
      "**/*.spec.ts"
    ]
  }

So for some reason even though I have metrics for the files that were being tested in out.json a second "empty placeholder" node was being created and overiding the subsequent report generation. I am guessing that this is potentially a bug or a problem with my setup again so will ask the creators.

I can now see coverage if I change my nyc config to:

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

This does mean that if I don't hit a file with testing it won't be included as an empty placeholder as "all": true is no longer present.

Looking at @briebug/[email protected] this doesn't appear to be causing any issues (same happens without using their builder) but has been raised as one here and here.