Angular12执行ng test测试组件报ParamDecoratorFactory错误如何解决

两个错误都是测试代码的TestBed配置错误引发的，错误2是错误1的连锁反应：

• 错误1的核心原因是TestBed.configureTestingModule的imports数组只能放置带@NgModule装饰器的Angular模块，你错误将装饰器、普通类、服务、动画函数都放入了imports配置，导致DynamicTestModule校验失败
• 错误2是因为模块初始化失败，组件实例没有成功创建，所以component变量为undefined，触发断言失败

1. 移除imports数组中所有非NgModule类型的内容，导入测试专用的HttpClientTestingModule替代真实的HttpClient模块，避免发起真实网络请求
2. 把需要注入的服务、注入令牌全部放入providers数组，按需可以mock依赖服务减少测试耦合
3. 动画相关的函数不需要在测试模块中额外配置，组件的@Component装饰器已经自带动画声明

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { of } from 'rxjs';
import { MenuComponent } from './menu.component';
import { DishService } from '../services/dish.service';
import { ProcessHTTPMsgService } from '../services/process-httpmsg.service';

describe('MenuComponent', () => {
  let component: MenuComponent;
  let fixture: ComponentFixture<MenuComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule
      ],
      declarations: [ MenuComponent ],
      providers: [
        DishService,
        ProcessHTTPMsgService,
        // 提供组件依赖的BaseURL注入令牌，可根据实际情况修改值
        { provide: 'BaseURL', useValue: 'http://localhost:3000/' }
      ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MenuComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

如果要做纯单元测试不依赖服务逻辑，可以对DishService做mock，示例如下：

// 模拟DishService返回固定测试数据
class MockDishService {
  getDishes() {
    return of([])
  }
}
// 替换providers中的真实服务配置即可
{ provide: DishService, useClass: MockDishService }

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