Angular 2中ViewChild获取的表单单元测试控件为空及测试可行性咨询

当然可以测试！你用ViewChild配合模板变量实现的模板驱动表单，完全支持单元测试——你遇到的controls为空、表单状态显示VALID的问题，本质是测试时机不对，没有等Angular完成表单的初始化和变更检测。

为什么会出现这个问题？ #

Angular的模板驱动表单是在变更检测周期里自动创建和初始化FormControl的。如果在fixture.detectChanges()之前就去访问myForm.controls，这时候表单还没完成初始化，自然拿不到控件，状态也会显示错误的VALID。

基于当前ViewChild设置的实现步骤 #

下面是具体的测试方案，直接适配你现有的代码：

1. 正确初始化测试环境

首先确保组件编译完成，并且触发第一次变更检测来初始化表单：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { YourComponent } from './your.component'; // 替换成你的组件路径

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    // 第一次detectChanges会触发组件初始化，同时创建表单控件
    fixture.detectChanges();
  });
});

2. 测试表单的验证状态

现在你可以正常访问myForm了，比如测试必填项为空时的错误状态：

it('should mark myCtrl as invalid when empty', () => {
  // 获取输入控件的debugElement
  const inputEl = fixture.debugElement.query(By.css('#myCtrl'));
  
  // 模拟输入框失去焦点，触发必填验证
  inputEl.triggerEventHandler('blur', null);
  // 触发变更检测，让表单更新状态
  fixture.detectChanges();

  // 现在可以拿到正确的控件了
  const myCtrl = component.myForm.controls['myCtrl'];
  
  expect(myCtrl.invalid).toBeTruthy();
  expect(component.myForm.invalid).toBeTruthy();
  expect(myCtrl.errors?.['required']).toBeTruthy();
});

3. 测试绑定值变更后的表单状态

如果需要测试修改ngModel绑定的value变量后的表单状态，记得修改后要触发变更检测：

it('should mark myCtrl as valid when value is entered', () => {
  // 修改绑定的value变量
  component.value = 'hello world';
  // 触发变更检测，同步表单状态
  fixture.detectChanges();

  const myCtrl = component.myForm.controls['myCtrl'];
  expect(myCtrl.valid).toBeTruthy();
  expect(component.myForm.valid).toBeTruthy();
});

关键注意点 #

• 一定要在fixture.detectChanges()之后再访问myForm，这是模板驱动表单初始化的关键节点。
• 操作表单控件（比如输入、失焦）后，必须执行fixture.detectChanges()才能让表单更新状态。
• 模板驱动表单的控件是Angular自动生成的，不需要手动创建，只要模板里的ngModel和name属性正确，变更检测后就能通过myForm.controls访问到。

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