Angular 18响应式表单单元测试报NG01052错误求助

我是Angular单元测试新手，尝试为Angular响应式表单编写单元测试用例，但运行异常，时常出现以下错误：

Error: NG01052: formGroup expects a FormGroup instance. Please pass one in. Example: <div [formGroup]="myGroup"> In your class: this.myGroup = new FormGroup({ firstName: new FormControl() });

同时3个测试用例均失败，以下是我的测试代码：

import {
  TestBed,
  ComponentFixture
} from '@angular/core/testing';
import { provideMockStore } from '@ngrx/store/testing';
import { MyInputComponent } from './my-input.component';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      providers: [ReactiveFormsModule, provideMockStore()],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyInputComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });


  it('should create', () => {
    expect(component).toBeTruthy();
  });


  it('should call ngOnInit', () => {
    const expectedFormGroup = new FormBuilder().group({
      fullname: ['', Validators.required],
      username: ['', Validators.required],
      email: ['', Validators.required]
    });
    component.form=expectedFormGroup;
    expect(component.form).toEqual(expectedFormGroup);
  });


  it('should call to set form value', () => {
    component.form.setValue({
      fullname:'test' ,
      username: 'testd' ,
      email: 'test@gmail.com'
    });
    expect(component.form.valid).toEqual(true);
  });

   
});

问题分析与修复方案 #

1. 核心错误原因

• ReactiveFormsModule配置位置错误：它属于Angular模块，应放在imports数组而非providers中
• 组件form属性未提前初始化：模板渲染时找不到FormGroup实例，触发NG01052错误
• 测试用例逻辑不合理：部分用例未等待组件初始化完成就操作表单，导致空指针或验证失效

2. 修复后的测试代码

import {
  TestBed,
  ComponentFixture
} from '@angular/core/testing';
import { provideMockStore } from '@ngrx/store/testing';
import { MyInputComponent } from './my-input.component';
import { FormBuilder, ReactiveFormsModule, Validators, FormGroup } from '@angular/forms';

describe('MyInputComponent', () => {
  let component: MyInputComponent;
  let fixture: ComponentFixture<MyInputComponent>;
  let formBuilder: FormBuilder;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ReactiveFormsModule], // 修正：移至imports数组
      providers: [provideMockStore(), FormBuilder], // 注入FormBuilder
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyInputComponent);
    component = fixture.componentInstance;
    formBuilder = TestBed.inject(FormBuilder);
    
    // 提前初始化表单，避免模板渲染报错
    component.form = formBuilder.group({
      fullname: ['', Validators.required],
      username: ['', Validators.required],
      email: ['', Validators.required]
    });
    
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should initialize form group in ngOnInit', () => {
    // 验证组件自身的ngOnInit逻辑是否正确创建表单
    component.form = null;
    component.ngOnInit();
    expect(component.form instanceof FormGroup).toBeTruthy();
    expect(component.form.controls['fullname'].validator).toBeTruthy();
  });

  it('should set form values and be valid', () => {
    component.form.setValue({
      fullname: 'test',
      username: 'testd',
      email: 'test@gmail.com'
    });
    expect(component.form.valid).toBe(true);
  });
});

3. 关键修复点说明

• 模块配置修正：将ReactiveFormsModule移至imports，确保表单指令能被模板正确识别
• 提前初始化表单：在测试前为component.form赋值，避免模板渲染时找不到FormGroup实例
• 优化测试逻辑：
  • 测试ngOnInit时，先重置表单再触发钩子，验证组件自身的初始化逻辑
  • 确保所有表单操作都在表单已初始化的状态下执行，避免空指针错误

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