Angular测试触发ExpressionChangedAfterItHasBeenCheckedError如何解决

报错原因 #

这个ExpressionChangedAfterItHasBeenCheckedError错误触发的原因是：你直接修改原有definition对象的required属性后，调用fixture.detectChanges()触发变更检测时，Angular会先更新子组件模板中input的[required]绑定，这会触发响应式表单自动为对应FormControl添加必填校验器，导致表单的valid状态在同一个变更检测周期内从true变为false，超出了Angular开发模式下的变更检查预期。

完全可以通过调整TestHostComponent的属性更新方式解决，两种常用方案如下： #

方案1：采用不可变方式更新definition对象 #

不需要修改TestHostComponent的原有定义，只需要在测试时不直接修改原有definition对象的内部属性，而是直接替换整个definition的引用即可：

it('should indicate required', () => {
  // 解构原有对象，生成新的definition对象替换旧引用
  hostComponent.definition = {
    ...hostComponent.definition,
    required: true
  };
  fixture.detectChanges();
  // 后续测试逻辑
})

这种方式下Angular会检测到@Input()的引用发生了变化，提前触发子组件的输入更新逻辑，避免表单状态在变更检测中途发生修改。

方案2：在TestHostComponent中同步definition属性与表单校验器 #

在TestHostComponent中新增属性更新方法，修改required的同时主动更新对应表单控件的校验规则，把表单状态的变更提前到变更检测执行前：
首先修改TestHostComponent的代码：

import { Validators } from '@angular/forms';

@Component({
  selector: `host-component`,
  template: `<edit-text [definition]="definition" [formGroup]="formGroup"></edit-text>`
})
class TestHostComponent {
  formGroup = new FormGroup({
    text: new FormControl('')
  })

  definition: any = {
    name: 'text',
    title: 'Text Field',
    required: false
  }

  @ViewChild(EditTextComponent) component: EditTextComponent

  // 新增统一更新必填状态的方法
  updateRequiredStatus(isRequired: boolean) {
    this.definition.required = isRequired;
    const targetControl = this.formGroup.get(this.definition.name);
    // 同步更新表单控件的校验规则
    if (isRequired) {
      targetControl.addValidators(Validators.required);
    } else {
      targetControl.removeValidators(Validators.required);
    }
    // 立刻更新控件的校验状态
    targetControl.updateValueAndValidity();
  }
}

测试用例直接调用该方法即可：

it('should indicate required', () => {
  hostComponent.updateRequiredStatus(true);
  fixture.detectChanges();
  // 后续测试逻辑
})

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