Angular单元测试报错NG03600：AnimationBuilder注入未启用动画的解决方法

报错原因 #

• 你的组件或服务中注入了AnimationBuilder，但单元测试的配置环境未启用Angular动画支持
• Angular 14及以上版本，动画支持的启用方式从BrowserAnimationsModule切换为provideAnimations()/provideAnimationsAsync()函数，测试代码未配置对应启用逻辑

解决办法 #

场景1：传统TestBed测试配置 #

在测试模块的imports数组中添加动画相关模块：

• 若需要真实动画支持，添加BrowserAnimationsModule
• 若仅需跳过动画逻辑（不测试动画），添加NoopAnimationsModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// 或 import { NoopAnimationsModule } from '@angular/platform-browser/animations';

TestBed.configureTestingModule({
  imports: [BrowserAnimationsModule], // 替换为NoopAnimationsModule可禁用动画
  declarations: [YourTargetComponent],
}).compileComponents();

场景2：独立组件测试（Angular 14+） #

在测试的providers数组中添加动画提供函数：

• 启用真实动画：provideAnimations()
• 禁用动画（跳过测试）：provideNoopAnimations()

import { provideAnimations } from '@angular/platform-browser/animations';
// 或 import { provideNoopAnimations } from '@angular/platform-browser/animations';

await TestBed.configureTestingModule({
  imports: [YourStandaloneComponent],
  providers: [provideAnimations()], // 替换为provideNoopAnimations()可禁用动画
}).compileComponents();

内容的提问来源于stack exchange，提问作者L. Kvri