含构造函数的Angular Service使用Jest测试失败求助

问题原因 #

Angular 15编译带有@Injectable装饰器且包含构造函数的服务时，会自动生成**类静态初始化块（static {}）**语法，这是ES2022的新特性。你的Jest测试环境未正确配置以支持该语法，导致解析时抛出Unexpected token '{'错误。

解决方案 #

1. 更新TypeScript编译配置 #

修改tsconfig.spec.json，确保编译目标支持ES2022：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "dom"],
    "module": "ESNext"
  }
}

2. 适配Jest转译配置 #

如果使用jest-preset-angular（Angular项目推荐的Jest预设），先确保依赖版本匹配：

• 安装适配Angular 15的版本：

npm install jest-preset-angular@^13.1.0 --save-dev

• 调整jest.config.js配置：

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
  globalSetup: 'jest-preset-angular/global-setup',
  transform: {
    '^.+\\.(ts|js|html)$': 'jest-preset-angular'
  },
  testEnvironment: 'jsdom'
};

3. 修正测试代码的服务实例化方式 #

对于带依赖的服务，不要直接用new实例化，而是通过TestBed.inject()获取，确保依赖被正确注入：

beforeEach(() => {
  TestBed.configureTestingModule({
    // 服务有依赖时，在这里声明对应 providers
    // providers: [DependencyService]
  });
  service = TestBed.inject(SimpleService);
});

4. 检查Babel配置（若使用babel-jest） #

如果项目用Babel处理转译，更新babel.config.json以支持ES2022：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": { "node": "current" },
      "useBuiltIns": "usage",
      "corejs": 3
    }],
    "@babel/preset-typescript",
    "@angular/babel-preset-ivy"
  ]
}

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