Angular登录表单单元测试异常：未定义错误与无断言问题排查

第一个错误：TypeError: Cannot read properties of undefined (reading 'markAsTouched') #

原因分析 #

出现这个错误是因为component.authForm未初始化，常见场景分两种：

1. 模板驱动表单：组件通过@ViewChild(NgForm)获取表单实例，而该实例要等到组件ngAfterViewInit钩子执行后才会被赋值。当前beforeEach中仅调用一次fixture.detectChanges()，仅触发了ngOnInit，未完成视图初始化，所以authForm仍是undefined。
2. 响应式表单：如果组件中authForm是在ngOnInit里用FormBuilder初始化的，可能是fixture.detectChanges()未正确触发ngOnInit，或者初始化代码存在拼写错误。

解决方案 #

模板驱动表单场景

修改beforeEach，增加一次fixture.detectChanges()触发ngAfterViewInit，确保ViewChild获取到表单实例：

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [FormsModule],
    declarations: [AuthComponent],
  });
  fixture = TestBed.createComponent(AuthComponent);
  component = fixture.componentInstance;
  fixture.detectChanges(); // 第一次触发：执行ngOnInit，渲染模板
  fixture.detectChanges(); // 第二次触发：执行ngAfterViewInit，完成ViewChild查询
});

响应式表单场景

确保组件中authForm在ngOnInit正确初始化，且beforeEach中的fixture.detectChanges()已触发该钩子：

// 组件内初始化示例
ngOnInit() {
  this.authForm = this.fb.group({
    email: ['', [Validators.required, Validators.email]]
  });
}

修改后原测试用例即可正常执行：

it('form should be invalid', () => {
  component.authForm.controls['email'].markAsTouched();
  expect(component.authForm.invalid).toBeTruthy();
});

第二个错误：SPEC HAS NO EXPECTATIONS form should be invalid #

原因分析 #

使用fakeAsync时，你通过whenStable().then()包裹测试逻辑，但Jasmine测试会同步执行，then中的异步回调在测试结束后才会运行，导致expect从未被执行。

解决方案 #

在fakeAsync中使用tick()模拟时间流逝，等待异步操作完成，无需依赖then：

it('form should be invalid', fakeAsync(() => {
  fixture.whenStable();
  tick(); // 触发所有待处理的异步操作
  component.authForm.controls['email'].markAsTouched();
  expect(component.authForm.invalid).toBeTruthy();
}));

或者改用async/await语法，让测试等待异步操作完成：

it('form should be invalid', async () => {
  await fixture.whenStable();
  component.authForm.controls['email'].markAsTouched();
  expect(component.authForm.invalid).toBeTruthy();
});

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