angular - ng test --code-coverage 在升级到 Angular 7 后仅考虑用于单元测试报告的 pollyfills 文件

问题描述

我已经从 Angular 4 更新到 7。当尝试生成代码覆盖率报告时，代码覆盖率只考虑 polyfills.ts 而没有 .ts 或 .spec.ts 文件，尽管“ng test”命令正确执行所有测试用例并且所有测试用例均通过，“ng test --code-coverage”未生成适当的报告。

在生成的正确报告中如下：文件 polyfills.ts

实际报告应该在覆盖文件夹中包含所有 .ts 文件报告和 html 报告示例文件
演示脚本 src/business

设置如下：

   angular.json - 
   "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "codeCoverage": true,
        "main": "scripts/test.ts",
        "karmaConfig": "karma.conf.js",
        "polyfills": "demo/polyfills.ts",
        "tsConfig": "src/tsconfig.spec.json",

 tsconfig.spec.json - 
 "files": [
 "../scripts/test.ts",
 "../demo/polyfills.ts"
 ],
 "include": [
  "**/*.spec.ts"
 ]

 test.ts -
 const context = require.context('../src', true, /\.spec\.ts$/)

使固定：

将以下包添加到 package.json 中的 devDependencies：“@angular-devkit/build-ng-packagr”：“~0.6.3”，b。“ng-packagr”：“^3.0.0-rc.2”
执行 npm install（或 yarn install）

在 angular.json 中的项目下为 src 文件夹创建一个新条目，如下所示：

                "ui-demo-lib": {  // name of library project, in this case for UI_Reports
                      "root": "",
                      "sourceRoot": "src", // root path of 
                      "projectType": "library",
                      "prefix": "lib",
                      "architect": {
                        "build": {
                          "builder": "@angular-devkit/build-ng-packagr:build",
                          "options": {
                            "tsConfig": "src/tsconfig.featurelib.json",
                          }
                        },
                        "test": {
                          "builder": "@angular-devkit/build-angular:karma",
                          "options": {
                            "main": "src/../scripts/test.ts", 
                            "tsConfig": "src/tsconfig.spec.json", 
                            "karmaConfig": "src/../karma.conf.js", 
                            "styles": [
                              "demo/styles/main.scss",
                              "node_modules/ngx-toastr/toastr.css",
                            ],
                            "stylePreprocessorOptions": {  // specific to UI_Demo
                              "includePaths": [
                                "node_modules"
                              ]
                            }
                          }
                        },
                        "lint": {
                          "builder": "@angular-devkit/build-angular:tslint",
                          "options": {
                            "tsConfig": [
                              "src/tsconfig.featurelib.json",
                              "src/tsconfig.spec.json"
                            ],
                            "exclude": [
                              "**/node_modules/**"
                            ]
                          }
                        }
                      }
                    }

关于这个新条目的注释：

• Angular CLI 要求项目下的所有文件路径都以sourceRoot 路径开头。例如：如果主 test.ts 文件位于 scripts/test（父级），则 test options 中的 main 属性应指向 src/../scripts/test.ts。• 在 angular.json 中的项目属性之外，确保将 defaultProject 属性设置为演示应用程序；如果 src/ 文件夹是 ui-demo-lib，那么 demo/ 文件夹就是 ui-demo。这样现有的构建功能就不会中断。

在您的 repo 的 test.ts 文件中，删除所有导入并将其替换为以下内容：

         import 'core-js/es7/reflect';
         import 'zone.js/dist/zone';
         import 'zone.js/dist/zone-testing';
         import { getTestBed } from '@angular/core/testing';
         import {
           BrowserDynamicTestingModule,
           platformBrowserDynamicTesting
         } from '@angular/platform-browser-dynamic/testing';

完成所有步骤后，如果需要，请尝试将每个额外的导入一一添加。但是，在 Angular 7 的测试环境中需要上面的模块。只有在使用任何区域文件（例如异步测试）时，才应导入其他模块。以下模块不再兼容，与 repo 无关： • zone.js/dist/jasmine-patch

注意：检查以确保指向您的测试的路径是相对于您的测试文件所在的位置。由于 UI_Demo 在 scripts/test.ts 中有它的 test.ts 文件，因此 require.context('../src')

在 src/tsconfig.spec.json 中，确保 files 属性包括以下内容：test.ts 文件的位置（相对） b. polyfills.ts 文件的位置（相对，通常在 demo 文件夹中找到）
在 package.json 中：将所有使用 ng-test 的脚本更改为使用 ng-test –project 。湾。替换对 PhantomJS 的任何引用以使用 ChromeHeadless。PhantomJS 不能通过 Angular CLI V7 处理业力。C。前任。ng test --browsers=PhantomJS ------- ng test --project ui-demo-lib --browsers=ChomeHeadless
可选 - 在 tsconfig.spec.ts 中，将条目“**/ .d.ts”添加到包含属性。
测试以下命令：ng test --project b. ng test --project --watch=false --browsers=ChromeHeadless --code-coverage c. gulp 内联 d. ng build --aot --output-path=dist （应该默认构建演示）

标签： angularunit-testingkarma-jasmineangular-cli-v7

angular - ng test --code-coverage 在升级到 Angular 7 后仅考虑用于单元测试报告的 pollyfills 文件

问题描述

解决方案

推荐阅读