Angular 15配置Jest时测试用例报缺失分号错误

我正尝试在Angular 15应用中配置Jest，相关配置如下：

Jest 配置文件（jest.config.js） #

const jestPreset = require('jest-preset-angular/jest-preset');
const { globals } = jestPreset;
const tsjest = globals['ts-jest'];

const tsjestOverrides = {
  ...tsjest,
  tsconfig: '<rootDir>/tsconfig.spec.json'
};
const globalOverrides = {
  ...globals,
  'ts-jest': { ...tsjestOverrides }
};

module.exports = {
  ...jestPreset,
  globals: { ...globalOverrides },
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  globalSetup: 'jest-preset-angular/global-setup',
    reporters: [
    "default",
    ["./node_modules/jest-html-reporter", {
      pageTitle: "Test Report"
    }]
  ]
};

tsconfig.spec.json #

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
      "outDir": "./out-tsc/spec",
      "types": [
          "jest",
          "node",
          "googlemaps",
          "offscreencanvas"
      ],
      "esModuleInterop": true,
      "emitDecoratorMetadata": true,
      "module": "CommonJs",
  },
  // "files": ["./setup.jest.ts"],
  "include": [
      "projects/design/src/app/**/*.spec.ts",
      "projects/design/src/app/**/*.d.ts"
  ]
}

tsconfig.json #

{
  "compileOnSave": false,
  "compilerOptions": {
    "paths": {
      "api-management": [
        "dist/api-management/api-management",
        "dist/api-management"
      ],
      "lib-ui-component": [
        "dist/lib-ui-component/lib-ui-component",
        "dist/lib-ui-component"
      ],
      "@api/*": ["./projects/api-management/src/*"],
      "@design/*": ["./projects/design/src/app/design/*"],
      "@lib-ui/*": ["./projects/lib-ui-component/src/*"]
      
    },
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,

    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "importHelpers": true,
    "target": "ES2022",
    "module": "es2020",
    "lib": ["es2018", "es2019", "dom"],
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "optionalChainNotNullable": "suppress"
      }
    },
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "suppressImplicitAnyIndexErrors": true,
    "strictPropertyInitialization": false,
  }
}

setup-jest.ts #

import 'jest-preset-angular/setup-jest';

测试文件代码 #

describe('BatteryConfigurationComponent', () => {
  let storeMock: Store<DesignState>;
  let matDialogMock: MatDialog;
  let openNotificationServiceMock: openNotificationService;
  let SettingsServiceMock: SettingsService;
  let ViewContainerRefMock: ViewContainerRef;
  let ComponentFactoryResolverMock: ComponentFactoryResolver;
  let TranslateServiceMock: TranslateService;
  let component: BatteryConfigurationComponent;
  
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [component],
      providers: [storeMock, matDialogMock, openNotificationServiceMock, SettingsServiceMock, ViewContainerRefMock, ComponentFactoryResolverMock, TranslateServiceMock],
    });
  })
  afterEach(() => {
    jest.clearAllMocks();
  });
});

遇到的错误 #

我认为当前配置无法识别TypeScript，从而引发该错误。

解决方案 #

• 简化Jest配置，移除冗余项
  当前配置存在重复定义preset和冗余的globals覆盖逻辑，修改为更简洁的版本：

  module.exports = {
    preset: 'jest-preset-angular',
    globalSetup: 'jest-preset-angular/global-setup',
    setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
    globals: {
      'ts-jest': {
        tsconfig: '<rootDir>/tsconfig.spec.json'
      }
    },
    reporters: [
      "default",
      ["./node_modules/jest-html-reporter", {
        pageTitle: "Test Report"
      }]
    ]
  };
  

• 修复tsconfig.spec.json语法错误
  配置中"module": "CommonJs",末尾多余的逗号会导致JSON解析失败，删除后如下：

  {
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "./out-tsc/spec",
        "types": [
            "jest",
            "node",
            "googlemaps",
            "offscreencanvas"
        ],
        "esModuleInterop": true,
        "emitDecoratorMetadata": true,
        "module": "CommonJs"
    },
    "include": [
        "projects/design/src/app/**/*.spec.ts",
        "projects/design/src/app/**/*.d.ts"
    ]
  }
  

• 修正测试文件的配置错误

  • 组件应放在declarations数组而非imports（imports用于导入模块）
  • 未初始化的mock对象不能直接传入providers，需先创建mock实例：

    describe('BatteryConfigurationComponent', () => {
      let storeMock: jest.Mocked<Store<DesignState>>;
      let matDialogMock: jest.Mocked<MatDialog>;
      let component: BatteryConfigurationComponent;
      
      beforeEach(() => {
        // 创建mock实例
        storeMock = { dispatch: jest.fn() } as jest.Mocked<Store<DesignState>>;
        matDialogMock = { open: jest.fn() } as jest.Mocked<MatDialog>;
        
        TestBed.configureTestingModule({
          declarations: [BatteryConfigurationComponent],
          providers: [
            { provide: Store, useValue: storeMock },
            { provide: MatDialog, useValue: matDialogMock },
            // 其他服务按此格式配置
          ],
        });
        component = TestBed.createComponent(BatteryConfigurationComponent).componentInstance;
      })
      afterEach(() => {
        jest.clearAllMocks();
      });
    });
    

• 确保依赖完整
  执行命令安装所有必需的开发依赖：

  npm install --save-dev jest jest-preset-angular @types/jest ts-jest
  

• 配置package.json测试脚本
  在package.json中添加或修改test命令：

  {
    "scripts": {
      "test": "jest"
    }
  }
  

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