Angular响应式表单测试报错：No value accessor for 'Enable'

问题根源 #

你遇到的报错本质是：测试环境中Angular无法识别mat-slide-toggle作为表单控件的价值访问器（Value Accessor），原因是测试模块未导入对应的Angular Material滑动开关模块，同时模板中的表单依赖ReactiveForms模块支持，若未导入也会引发相关表单绑定问题。

另外你提到无*ngIf的组件测试正常，是因为这类组件的DOM在初始化时就已渲染，即便表单未赋值也不会触发控件绑定校验；而带*ngIf="form"的组件，只有当你设置component.form后才会渲染表单DOM，此时未导入MatSlideToggleModule的话，Angular解析<mat-slide-toggle>时就会直接报错。

解决方案 #

1. 给测试模块补充必要的导入 #

在你的组件测试文件（如xxx.component.spec.ts）的TestBed配置中，添加MatSlideToggleModule和ReactiveFormsModule：

import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { ReactiveFormsModule } from '@angular/forms';
import { MatTooltipModule } from '@angular/material/tooltip'; // 模板中用到了matTooltip，也需要导入

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [你的组件类],
    imports: [
      ReactiveFormsModule,
      MatSlideToggleModule,
      MatTooltipModule
      // 其他依赖的模块比如CustomInputComponent、CustomButtonComponent也需要声明或导入
    ]
  }).compileComponents();
});

2. 完善Mock表单结构（可选但更贴合业务） #

你的setFormValidity函数只Mock了Enable字段，但模板中还有其他表单控件（Description、FirstItem等），虽然测试按钮逻辑时不需要校验这些字段，但为了避免潜在的表单绑定警告，可以把所有字段加入Mock：

function setFormValidity(valid:boolean){
  const mockFormGroup = fb.group({
    Enable: fb.control(true),
    Description: fb.control('测试描述'),
    FirstItem: fb.control('测试项'),
    ThirdItem: fb.control(100)
  });

  Object.defineProperty(mockFormGroup, 'valid', { get: () => valid });
  component.form = mockFormGroup;
}

3. 确保视图更新时机正确 #

保持你现有测试调用中的fixture.detectChanges()，它会在设置完Mock表单后触发视图渲染，确保表单控件正确绑定到Mock的FormGroup：

setFormValidity(true);
fixture.detectChanges(); // 必须调用，触发*ngIf渲染表单DOM

clickButton('Back');

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