如何为现有NX Angular库批量添加Jest测试目标配置？

前置准备 #

1. 确保已安装必要依赖：

npm install --save-dev jest jest-preset-angular @nx/jest

2. 项目根目录存在jest.preset.js（NX新项目默认生成，若缺失可手动创建）：

const nxPreset = require('@nx/jest/preset').default;
module.exports = { ...nxPreset };

方法一：用NX官方生成器批量处理 #

这种方式简单直接，依赖NX内置生成器自动配置所有文件和项目目标。

1. 筛选出缺少test目标的Angular库：
   运行以下命令获取需要处理的库名列表：

nx show projects --type library --json | jq -r '.[] | select(.targets.test == null) | .name'

提示：如果未安装jq，可手动查看nx.json或各库的project.json筛选，或用Node.js脚本过滤。

2. 循环调用生成器添加配置：
   创建shell脚本add-test-configs.sh：

#!/bin/bash
# 获取所有缺少test目标的Angular库
PROJECTS=$(nx show projects --type library --json | jq -r '.[] | select(.targets.test == null) | .name')

# 逐个添加Jest配置
for PROJECT in $PROJECTS; do
  npx nx generate @nx/jest:add-jest-project --project $PROJECT --unitTestRunner jest
done

赋予执行权限并运行：

chmod +x add-test-configs.sh
./add-test-configs.sh

方法二：自定义Node.js脚本（灵活可控） #

如果需要自定义配置细节（比如调整Jest参数、修改测试文件模板），可写脚本直接操作文件和项目配置。

1. 创建脚本文件add-jest-to-libs.js：

const { readProjectConfiguration, writeProjectConfiguration, getProjects } = require('@nx/devkit');
const fs = require('fs');
const path = require('path');

async function addJestConfigs() {
  const projects = await getProjects();

  for (const [projectName, config] of projects) {
    // 筛选条件：Angular库、无test目标、属于@nx/angular类型
    if (config.projectType === 'library' && !config.targets?.test && config.generators?.['@nx/angular:library']) {
      const projectRoot = config.root;

      // 1. 更新project.json的test目标
      config.targets.test = {
        executor: '@nx/jest:jest',
        outputs: ['{workspaceRoot}/coverage/{projectRoot}'],
        options: {
          jestConfig: `${projectRoot}/jest.config.ts`,
          passWithNoTests: true
        }
      };
      await writeProjectConfiguration(projectName, config);

      // 2. 生成jest.config.ts
      const jestConfig = `
export default {
  displayName: '${projectName}',
  preset: '../../jest.preset.js',
  setupFilesAfterEnv: ['<rootDir>/test-setup.ts'],
  coverageDirectory: '../../coverage/${projectRoot}',
  transform: {
    '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular'
  },
  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/no-ng-attributes',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/html-comment'
  ]
};
      `.trim();
      fs.writeFileSync(path.join(projectRoot, 'jest.config.ts'), jestConfig);

      // 3. 生成tsconfig.spec.json
      const tsconfigSpec = `
{
  "extends": "./tsconfig.lib.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/spec",
    "types": ["jest", "node"]
  },
  "include": ["**/*.spec.ts", "**/*.d.ts"]
}
      `.trim();
      fs.writeFileSync(path.join(projectRoot, 'tsconfig.spec.json'), tsconfigSpec);

      // 4. 生成test-setup.ts
      const testSetup = `import 'jest-preset-angular/setup-jest';`.trim();
      fs.writeFileSync(path.join(projectRoot, 'test-setup.ts'), testSetup);

      // 5. 生成占位测试文件（匹配src/lib下的主文件）
      const libSrcDir = path.join(projectRoot, 'src', 'lib');
      if (fs.existsSync(libSrcDir)) {
        const mainTsFile = fs.readdirSync(libSrcDir).find(f => f.endsWith('.ts') && !f.endsWith('.spec.ts'));
        if (mainTsFile) {
          const componentName = mainTsFile.replace('.ts', '');
          const specContent = `
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ${componentName} } from './${mainTsFile}';

describe(${componentName}, () => {
  let component: ${componentName};
  let fixture: ComponentFixture<${componentName}>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: []
    }).compileComponents();

    fixture = TestBed.createComponent(${componentName});
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
          `.trim();
          fs.writeFileSync(path.join(libSrcDir, `${componentName}.spec.ts`), specContent);
        }
      }

      console.log(`✅ 已为 ${projectName} 添加Jest测试配置`);
    }
  }
}

addJestConfigs().catch(err => {
  console.error('❌ 配置添加失败：', err);
  process.exit(1);
});

2. 运行脚本：

node add-jest-to-libs.js

验证配置 #

执行以下命令测试单个库的配置是否生效：

nx test <你的库名>

若配置正确，测试会正常运行（即使只有占位测试），并生成覆盖率报告。

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