编写Jasmine测试时遇TypeError: this.formBuilder.group is not a function问题

问题 #

编写Jasmine测试时遇到错误：TypeError: this.formBuilder.group is not a function。已导入FormsModule和ReactiveFormsModule，测试配置的提供者如下：

providers: [
        { provide: MatDialogRef, useFactory: matDialogRefStub },
        { provide: FormBuilder, useFactory: formBuilderStub },
        { provide: DatePipe, useFactory: datePipeStub },
        { provide: MatDialog, useFactory: matDialogStub },
        { provide: MAT_DIALOG_DATA, useValue: {} }
      ]

组件类中的方法：

buildCustomerTypeForm() {
    this.customerTypeForm = this.formBuilder.group({
      tc_customer_type: ['', Validators.required],
      tc_pma_option: ['', Validators.required],
      tc_zip_codess: ['', Validators.required]
    });
  }

测试代码：

const formBuilderStub: FormBuilder = fixture.debugElement.injector.get(
      FormBuilder
    );
    component.customerTypeForm = formBuilderStub.group({
      tc_customer_type: ['', Validators.required],
      tc_pma_option: ['', Validators.required],
      tc_zip_codess: ['', Validators.required]
    });
    spyOn(formBuilderStub, 'group').and.callThrough();
    component.buildCustomerTypeForm();
    expect(formBuilderStub.group).toHaveBeenCalled();
  });

请问该如何解决这个错误？

解决方法 #

• 修正formBuilderStub的实现：错误根源是你配置的FormBuilder stub没有提供有效的group方法。确保formBuilderStub工厂函数返回的对象具备group能力，最简单的方式是直接返回Angular原生的FormBuilder实例：

  function formBuilderStub() {
    return new FormBuilder();
  }
  

  若需要手动模拟，也要保证group方法返回合法的FormGroup对象：

  function formBuilderStub() {
    return {
      group: (controls: {[key: string]: any}) => new FormGroup(controls)
    };
  }
  

• 清理测试中的冗余代码：测试里提前调用formBuilderStub.group创建表单的步骤完全多余，会干扰测试逻辑，直接保留spy和方法调用即可：

  const formBuilderStub: FormBuilder = fixture.debugElement.injector.get(FormBuilder);
  spyOn(formBuilderStub, 'group').and.callThrough();
  component.buildCustomerTypeForm();
  expect(formBuilderStub.group).toHaveBeenCalled();
  

• 验证测试模块的依赖导入：确认在TestBed.configureTestingModule中确实导入了ReactiveFormsModule，它是FormBuilder正常工作的必要依赖。

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