Angular 14项目无需单元测试，实现手动测试代码插装覆盖率求助

1. 安装必要依赖 #

Angular 14是TypeScript项目，需要适配TS的nyc配置，执行以下命令安装依赖：

npm install nyc @istanbuljs/nyc-config-typescript source-map-support --save-dev

2. 配置nyc #

在项目根目录创建.nycrc文件，添加如下配置（根据你的项目结构调整include/exclude）：

{
  "extends": "@istanbuljs/nyc-config-typescript",
  "include": [
    "src/app/**/*.ts",
    "src/lib/**/*.ts"
  ],
  "exclude": [
    "src/**/*.spec.ts",
    "src/**/*.mock.ts",
    "src/test.ts"
  ],
  "sourceMap": true,
  "instrument": true,
  "all": true
}

• include：指定需要收集覆盖率的代码目录
• exclude：排除测试文件、mock文件等无需统计的内容
• all: true：确保即使未执行到的文件也会出现在报告中

3. 调整Angular构建配置 #

修改angular.json中的build配置，确保构建产物生成sourcemap（nyc需要通过sourcemap映射TS到编译后的JS）：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "sourceMap": {
            "scripts": true,
            "styles": false,
            "vendor": false
          },
          "optimization": false, // 关闭代码压缩，避免破坏插装后的代码
          "buildOptimizer": false
        }
      }
    }
  }
}

4. 插装构建产物 #

在package.json的scripts中添加插装命令：

"scripts": {
  "build:instrument": "ng build && nyc instrument dist/your-project-name dist/your-project-name-instrumented"
}

替换your-project-name为你的Angular项目名称（对应dist下的目录名），执行该命令会先构建项目，再对dist目录的产物进行插装。

5. 启动插装后的应用 #

安装静态服务器（比如http-server）来运行插装后的代码：

npm install http-server --save-dev

在scripts中添加启动命令：

"scripts": {
  "start:instrumented": "http-server dist/your-project-name-instrumented -p 4200"
}

执行npm run start:instrumented，在浏览器访问http://localhost:4200进行手动测试。

6. 生成覆盖率报告 #

手动测试完成后，在浏览器控制台执行copy(window.__coverage__)，将复制的内容粘贴到项目根目录的coverage.json文件中，然后执行：

npx nyc report --reporter=html --reporter=lcov

执行完成后，根目录会生成coverage文件夹，打开coverage/index.html即可查看详细的覆盖率报告。

注意事项 #

• 如果需要保留生产构建的优化，可单独创建一个instrument配置环境，在angular.json中复制build配置并修改优化参数，避免影响正常生产构建
• 插装后的代码体积会增大，仅用于测试环境，不要部署到生产
• 如果遇到sourcemap映射问题，检查angular.json中的sourceMap配置是否正确，确保TS文件的sourcemap已生成

内容的提问来源于stack exchange，提问作者Himanshu Garg