如何在测试类中列出模板驱动表单的所有已注册控件？

这个问题我之前也踩过坑！核心原因是Angular测试环境里，模板渲染和表单控件的注册可能涉及异步逻辑（尤其是用Material组件的时候），第一次调用fixture.detectChanges()虽然触发了组件初始化，但异步任务还没跑完，导致你执行console.log时，表单控件还没完全注册到NgForm实例里。

下面给你几个靠谱的解决办法：

方法1：用fakeAsync + tick()模拟异步完成 #

fakeAsync能让你在同步测试里模拟异步流程，tick()会快进所有待处理的异步任务，确保表单控件彻底初始化完成：

it('should list registered form controls', fakeAsync(() => {
  fixture.detectChanges(); // 触发组件初始化与初始渲染
  tick(); // 等待所有异步操作结束（包括Material组件初始化、表单控件注册）
  
  expect(component).toBeDefined();
  console.log('input', component.myForm.form.controls); // 现在能正常拿到控件了
  expect(component.myForm.form.controls['startingPrice']).toBeDefined();
}));

方法2：用async + whenStable()等待视图稳定 #

如果你更习惯Promise风格的异步写法，可以用async包裹测试函数，通过fixture.whenStable()等待视图状态稳定：

it('should list registered form controls', async(() => {
  fixture.detectChanges();
  
  fixture.whenStable().then(() => {
    expect(component).toBeDefined();
    console.log('input', component.myForm.form.controls);
    expect(component.myForm.form.controls['startingPrice']).toBeDefined();
  });
}));

额外要注意的细节 #

1. 测试模块必须导入正确依赖：别忘在TestBed.configureTestingModule里导入必要模块，否则表单和Material组件没法正常工作：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule, // 模板驱动表单必须导入
      MatFormFieldModule,
      MatInputModule
    ],
    declarations: [YourComponent]
  }).compileComponents();
}));

2. @ViewChild的赋值时机：@ViewChild('form')会在组件的ngAfterViewInit钩子之后才赋值，第一次fixture.detectChanges()会触发这个钩子，但如果有异步逻辑，还是得等视图稳定才能拿到完整的表单控件。

这样调整后，你就能在测试里正常获取到注册的表单控件啦！

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