Angular11 Jest测试报NG0303：form无formGroup属性错误

问题原因 #

你在测试用例的TestBed配置中没有导入响应式表单相关的模块。Angular运行测试时是独立构造测试模块的，不会自动继承你业务代码里UnderTestModule的导入配置，所以解析模板中的[formGroup]绑定的时候找不到对应的指令，就会报NG0303错误。

不报错的测试用例仅校验了组件类的逻辑，没有调用fixture.detectChanges()触发模板渲染，不会执行模板的绑定校验，所以不会触发错误。该问题和Jest的相对导入规则无关。

解决方法 #

两种方案二选一即可：

1. 直接在TestBed的配置中添加ReactiveFormsModule导入：

// 修改后的TestBed配置
await TestBed.configureTestingModule({
  declarations: [UnderTestComponent],
  // 新增导入
  imports: [ReactiveFormsModule, FormsModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [
    FormBuilder,
    { provide: ApiService, useValue: mockApiService },
  ],
}).compileComponents();

2. 直接导入被测组件所属的UnderTestModule，一次性继承所有业务配置：

await TestBed.configureTestingModule({
  // 直接导入业务模块，无需重复声明组件、导依赖
  imports: [UnderTestModule],
  providers: [
    // 覆盖你需要Mock的服务即可
    { provide: ApiService, useValue: mockApiService },
  ],
}).compileComponents();

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