StrykerJS 在 Angular 项目中的突变测试实践指南

StrykerJS 在 Angular 项目中的突变测试实践指南

stryker-js Mutation testing for JavaScript and friends 项目地址: https://gitcode.com/gh_mirrors/st/stryker-js

前言

StrykerJS 是一个强大的 JavaScript 突变测试框架，它通过故意在代码中引入错误（突变）来评估测试套件的有效性。本文将详细介绍如何在 Angular 项目中配置和使用 StrykerJS 进行突变测试。

环境要求

StrykerJS 支持使用 Angular CLI 9.0.0 及以上版本的项目。如果你的项目使用的是旧版本，强烈建议升级到至少 9.0.0 版本。Angular 16 开始提供了对 Jest 的实验性支持，StrykerJS 也能与之配合使用。

两种测试运行器配置方案

方案一：使用 Karma 作为测试运行器

安装步骤

1. 在项目根目录下执行初始化命令：

   npm init stryker
   

   这个命令会自动安装必要的 Stryker 包并生成基础配置文件。

配置详解

生成的 stryker.config.json 文件包含以下关键配置：

{
  "$schema": "./node_modules/@stryker-mutator/core/schema/stryker-schema.json",
  "mutate": ["src/**/*.ts", "!src/**/*.spec.ts", "!src/test.ts", "!src/environments/*.ts"],
  "testRunner": "karma",
  "karma": {
    "configFile": "karma.conf.js",
    "projectType": "angular-cli",
    "config": {
      "browsers": ["ChromeHeadless"]
    }
  },
  "reporters": ["progress", "clear-text", "html"],
  "ignorers": ["angular"],
  "concurrency": 4
}

配置项说明：

• mutate: 指定需要突变测试的文件路径，排除了测试文件和环境配置文件
• testRunner: 设置为 "karma" 表示使用 Karma 运行测试
• karma.config: 配置 Karma 使用无头 Chrome 浏览器
• concurrency: 建议设置为可用 CPU 核心数的一半，以平衡性能和资源占用

方案二：使用 Jest 作为测试运行器（实验性支持）

安装步骤

1. 安装必要的依赖包：

   npm i -D @stryker-mutator/core @stryker-mutator/jest-runner
   

配置详解

创建 stryker.config.json 文件并添加以下内容：

{
  "$schema": "./node_modules/@stryker-mutator/core/schema/stryker-schema.json",
  "mutate": [
    "src/**/*.ts",
    "!src/**/*.spec.ts",
    "!src/test.ts",
    "!src/environments/*.ts"
  ],
  "testRunner": "jest",
  "buildCommand": "ng test",
  "jest": {
    "enableFindRelatedTests": false,
    "config": {
      "rootDir": "dist/test-out/browser",
      "testEnvironment": "jsdom",
      "testMatch": ["<rootDir>/**/*.mjs"],
      "setupFilesAfterEnv": [
        "<rootDir>/jest-global.mjs",
        "<rootDir>/polyfills.mjs",
        "<rootDir>/init-test-bed.mjs"
      ],
      "testPathIgnorePatterns": [
        "<rootDir>/jest-global.mjs",
        "<rootDir>/polyfills.mjs",
        "<rootDir>/init-test-bed.mjs",
        "<rootDir>/chunk-.*.mjs"
      ]
    }
  },
  "testRunnerNodeArgs": ["--experimental-vm-modules"],
  "ignorers": ["angular"],
  "reporters": ["progress", "clear-text", "html"]
}

关键点说明：

• buildCommand: 设置为 ng test 会构建项目并运行一次测试
• jest.config: 配置 Jest 运行环境为 jsdom，并指定了测试文件匹配规则
• testRunnerNodeArgs: 启用 Node.js 的实验性 VM 模块支持

运行 StrykerJS

配置完成后，执行以下命令开始突变测试：

npx stryker run

高级配置：TypeScript 类型检查

为了提高突变测试效率，可以配置 StrykerJS 检查突变体是否会导致 TypeScript 类型错误：

1. 安装类型检查器：

   npm install --save-dev @stryker-mutator/typescript-checker
   

2. 在配置中添加：

   {
     "checkers": ["typescript"],
     "tsconfigFile": "tsconfig.json"
   }
   

如果遇到问题，可以尝试将 tsconfigFile 设置为 tsconfig.app.json。

最佳实践建议

1. 增量测试：对于大型项目，考虑使用 StrykerJS 的增量测试功能，只对修改过的文件进行突变测试
2. 性能优化：根据机器配置调整 concurrency 参数，通常设置为 CPU 核心数的一半
3. 持续集成：将 StrykerJS 集成到 CI/CD 流程中，设置合理的突变分数阈值
4. 报告分析：利用 HTML 报告分析测试覆盖情况，找出测试薄弱环节

常见问题排查

如果遇到配置或运行问题，可以检查以下方面：

1. 确保 Angular CLI 版本符合要求
2. 检查测试运行器配置是否正确
3. 确认 TypeScript 配置路径是否正确
4. 查看控制台输出中的错误信息

通过合理配置和使用 StrykerJS，你可以显著提高 Angular 项目的测试质量，确保代码变更不会引入潜在缺陷。突变测试作为传统单元测试的补充，能够帮助开发团队建立更强大的测试防线。

stryker-js Mutation testing for JavaScript and friends 项目地址: https://gitcode.com/gh_mirrors/st/stryker-js