Angular Cypress 测试未使用 Babel 进行检测

Question

我想在测试期间检测我的代码以查看代码覆盖率。我已按照赛普拉斯文档执行此操作。首先是moving from Protractor，然后是adding instrumentation。目前，我的文件如下所示：

// package.json
{
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0 --port 4200 --disableHostCheck true",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.0.4",
    "@angular/cdk": "^12.0.4",
    "@angular/common": "^12.0.4",
    "@angular/compiler": "^12.0.4",
    "@angular/core": "^12.0.4",
    "@angular/flex-layout": "^12.0.0-beta.34",
    "@angular/forms": "^12.0.4",
    "@angular/material": "^12.0.4",
    "@angular/platform-browser": "^12.0.4",
    "@angular/platform-browser-dynamic": "^12.0.4",
    "@angular/router": "^12.0.4",
    "@fullcalendar/core": "^4.4.2",
    "@fullcalendar/daygrid": "^4.4.2",
    "@material/layout-grid": "^6.0.0",
    "@sentry/angular": "^6.9.0",
    "@sentry/tracing": "^6.9.0",
    "rxjs": "^6.6.3",
    "tslib": "^2.0.0",
    "webpack": "^5.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.0.3",
    "@angular-eslint/builder": "12.3.0",
    "@angular-eslint/eslint-plugin": "12.3.0",
    "@angular-eslint/eslint-plugin-template": "12.3.0",
    "@angular-eslint/schematics": "12.3.0",
    "@angular-eslint/template-parser": "12.3.0",
    "@angular/cli": "^12.0.3",
    "@angular/compiler-cli": "^12.0.4",
    "@angular/language-service": "^12.0.4",
    "@cypress/code-coverage": "^3.9.10",
    "@cypress/schematic": "1.5.0",
    "@sentry/webpack-plugin": "^1.16.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^13.13.19",
    "@typescript-eslint/eslint-plugin": "4.28.2",
    "@typescript-eslint/parser": "4.28.2",
    "babel-plugin-istanbul": "^6.0.0",
    "cypress": "8.1.0",
    "eslint": "^7.30.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "prettier": "2.3.2",
    "protractor": "~7.0.0",
    "ts-node": "^8.10.2",
    "typescript": "~4.2.4"
  },
  "resolutions": {
    "webpack": "^5.0.0"
  }
}

// angular.json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "frontend": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/frontend",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "node_modules/"
              ]
            },
            "scripts": [],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "40kb"
                }
              ]
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "frontend:build",
            "ssl": false,
            "publicHost": "pre-u.local"
          },
          "configurations": {
            "production": {
              "browserTarget": "frontend:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "frontend:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "codeCoverage": true,
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "node_modules/"
              ]
            },
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        },
        "e2e": {
          "builder": "@cypress/schematic:cypress",
          "options": {
            "devServerTarget": "frontend:serve",
            "watch": true,
            "headless": false
          },
          "configurations": {
            "production": {
              "devServerTarget": "frontend:serve:production"
            }
          }
        },
        "cypress-run": {
          "builder": "@cypress/schematic:cypress",
          "options": {
            "devServerTarget": "frontend:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "frontend:serve:production"
            }
          }
        },
        "cypress-open": {
          "builder": "@cypress/schematic:cypress",
          "options": {
            "watch": true,
            "headless": false
          }
        }
      }
    }
  },
  "defaultProject": "frontend",
  "cli": {
    "analytics": false,
    "packageManager": "yarn",
    "defaultCollection": "@angular-eslint/schematics"
  }
}

// cypress.json
{
  "integrationFolder": "cypress/integration",
  "supportFile": "cypress/support/index.ts",
  "videosFolder": "cypress/videos",
  "screenshotsFolder": "cypress/screenshots",
  "pluginsFile": "cypress/plugins/index.ts",
  "fixturesFolder": "cypress/fixtures",
  "baseUrl": "http://localhost:4200"
}

//.babelrc
{
  "presets": [
    "@babel/preset-react"
  ],
  "plugins": [
    "istanbul",
    "transform-class-properties"
  ]
}

// cypress/plugins/index.ts BEFORE answer given by Richard Matson below, call this configuration 1
module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config)

  return config
}

// cypress/plugins/index.ts AFTER answer given by Richard Matson below, call this configuration 2
module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config)

  on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'))

  return config
}

// cypress/support/index.ts
import '@cypress/code-coverage/support'

// cypress/tsconfig.json
{
  "extends": "../tsconfig.json",
  "include": ["**/*.ts"],
  "compilerOptions": {
    "sourceMap": true,
    "types": ["cypress"]
  }
}

注意：当我在配置 2 中运行测试时，出现错误

Error: Error running @cypress/browserify-preprocessor:

You are attempting to preprocess a TypeScript file, but do not have TypeScript configured. Pass the 'typescript' option to enable TypeScript support.

当我在配置 1 中运行测试（使用 ng e2e）时，赛普拉斯确实尝试获取覆盖率数据，但无法获取。

更新：我在 Cypress Docs GitHub 上对此进行了an issue，他们已经回复了。我有很好的希望。

Answer 1

缺少的一件事是use-babelrc 的赛普拉斯文件预处理器条目。

参考here，虽然它暗示这是用于单元测试覆盖，但如果没有它，我看不到您的.babelrc 被正确使用。

告诉 Cypress 内置捆绑器在捆绑规范时使用 .babelrc

// cypress/plugins/index.ts

module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config)

  // tell Cypress to use .babelrc file
  // and instrument the specs files
  // only the extra application files will be instrumented
  // not the spec files themselves
  on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'))

  return config
}