自定义Angular ng g c命令以生成多份spec测试文件

当然可以实现，有几种不同的方案，按需选择：

方案一：自定义npm脚本（简单快捷） #

如果不想折腾复杂的配置，直接写个npm脚本组合命令，生成组件后自动复制一份测试文件并重命名：
在项目根目录的package.json中添加以下脚本：

"scripts": {
  "gen:comp": "ng g c $1 && cp src/app/$1/$1.component.spec.ts src/app/$1/$1.component.unit.spec.ts"
}

使用时执行npm run gen:comp credit-card，就能自动生成目标组件和两份测试文件，之后你只需要把credit-card.component.unit.spec.ts的内容改成单元测试（仅测试组件类逻辑），原spec.ts保留为集成测试（测试模板与组件类的交互）即可。

方案二：自定义Angular Schematics（长期维护推荐） #

如果需要更规范、可复用的方案，推荐自定义Schematics扩展官方的组件生成逻辑：

• 先初始化一个Schematics项目：npm install -g @angular-devkit/schematics-cli && schematics blank --name=custom-component
• 在自定义Schematics中，导入官方的component schematic，添加额外的文件生成逻辑：读取官方的spec模板，复制一份命名为{{dasherize name}}.component.unit.spec.ts，并调整测试内容为单元测试结构（比如移除模板相关测试代码，只保留组件类的测试逻辑）
• 将自定义Schematics发布到本地npm仓库（或直接作为项目依赖），然后在项目的angular.json中修改schematics配置，把默认的component schematic替换为你自定义的：

"schematics": {
  "@schematics/angular:component": {
    "schematics": "./node_modules/custom-component"
  }
}

之后执行ng g c credit-card就会自动生成两份测试文件。

方案三：修改官方默认模板（不推荐） #

直接修改Angular CLI的默认组件模板，但这种方法会被Angular版本升级覆盖，不建议长期使用：

• 找到项目中node_modules/@schematics/angular/component/files/__name@dasherize__/目录
• 复制一份__name@dasherize__.component.spec.ts，重命名为__name@dasherize__.component.unit.spec.ts，并调整里面的测试代码为单元测试内容
• 修改该目录下的schema.json，在files数组中添加这个新文件的配置，确保生成组件时会一并创建

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