Angular单元测试报错：TypeError: this._renderer.addClass is not a function

架构老林

2026-6-29

问题原因分析与解决办法

原因

Angular版本更新后，带断点后缀的ngClass（比如[ngClass.lg]）内部实现依赖Renderer2服务来操作DOM类名，但你的单元测试环境没有正确配置Renderer2的依赖或模拟实现。虽然组件本身没直接导入Renderer，但ngClass的响应式语法会在内部调用Renderer2.addClass方法，测试中缺少对应的服务提供时，就会抛出this._renderer.addClass is not a function错误。

解决办法

1. 补全测试模块的必要导入

在单元测试的TestBed.configureTestingModule中，确保导入CommonModule（ngClass指令属于该模块），如果项目用到动画，还需导入BrowserAnimationsModule或NoopAnimationsModule：

TestBed.configureTestingModule({
  imports: [
    CommonModule,
    NoopAnimationsModule // 或根据项目实际选择BrowserAnimationsModule
  ],
  declarations: [YourComponent]
});

2. 手动模拟Renderer2服务

若导入模块后问题仍存在，可在测试的providers中提供Renderer2的模拟类，覆盖默认服务实现：

// 定义模拟类
class MockRenderer2 implements Renderer2 {
  addClass(el: any, className: string): void {}
  removeClass(el: any, className: string): void {}
  setStyle(): void {}
  removeStyle(): void {}
  setAttribute(): void {}
  removeAttribute(): void {}
  createElement(): void {}
  createText(): void {}
  appendChild(): void {}
  insertBefore(): void {}
  removeChild(): void {}
  parentNode(): void {}
  nextSibling(): void {}
  selectRootElement(): void {}
  listen() { return () => {}; }
}

// 在TestBed中配置
TestBed.configureTestingModule({
  declarations: [YourComponent],
  providers: [
    { provide: Renderer2, useClass: MockRenderer2 }
  ]
});