NgMocks传递ParentFormGroup输入时单元测试报错求助（@ngneats/reactive-forms）

问题分析 #

报错cannot read properties of undefined reading 'setParent'的核心原因：

• 测试中误用了Angular原生@angular/forms的FormGroup，而非项目依赖的@ngneats/reactive-forms实现，两者内部逻辑存在差异
• 组件内的this.form未正确初始化，导致调用addControl时，控件的setParent方法无法找到有效实例

具体解决方案 #

1. 统一使用@ngneats的FormGroup #

确保测试中导入的是@ngneats/reactive-forms包的FormGroup，而非Angular原生的：

// 错误导入
// import { FormGroup } from '@angular/forms';

// 正确导入
import { FormGroup, FormControl } from '@ngneats/reactive-forms';

2. 初始化组件内的form控件 #

组件的ngOnInit中调用parentFormGroup.addControl时，依赖自身的this.form实例。测试中需提前初始化该控件：

const parentForm = new FormGroup({});
const fixture = MockRender(YourComponent, { parentFormGroup: parentForm });

// 手动初始化组件的form属性（根据组件实际类型调整，比如FormGroup）
fixture.point.componentInstance.form = new FormControl('');

// 触发变更检测执行ngOnInit
fixture.detectChanges();

expect(fixture.point.componentInstance).toBeDefined();

3. 配置测试模块引入@ngneats表单模块 #

如果测试环境未正确加载@ngneats/reactive-forms的模块，需在MockBuilder中配置：

import { MockBuilder, MockRender } from 'ng-mocks';
import { ReactiveFormsModule } from '@ngneats/reactive-forms';
import { YourComponent } from './your-component.component';

beforeEach(() => {
  return MockBuilder(YourComponent)
    .keep(ReactiveFormsModule); // 保留@ngneats的表单模块，而非mock
});

it('should initialize correctly', () => {
  const parentForm = new FormGroup({});
  const fixture = MockRender(YourComponent, { parentFormGroup: parentForm });
  fixture.point.componentInstance.form = new FormControl('');
  fixture.detectChanges();

  expect(fixture.point.componentInstance).toBeDefined();
  expect(parentForm.contains('test')).toBe(true); // 额外验证控件是否成功添加
});

4. 检查输入属性绑定正确性 #

确认组件的输入属性声明无误，比如：

// 组件内的输入声明
@Input() parentFormGroup: FormGroup; // 确保拼写和测试传入的参数名一致

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