typescript - Angular jest component test with input formGroup throws "Cannot read property 'setParent' of undefined"

Question

I have a child component that has a FormGroup input and will use registerControl in ngOnInit to add a FormArray. When executing a test with jest, the registerControl method throws the error

Cannot read property 'setParent' of undefined

This is a simplified example of the component:

@Component({
  selector: 'app-my-component',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <form [formGroup]="form">
      <!-- Form array and controls -->
    </form>
  `,
})
export class MyComponent implements OnInit {
  @Input() form: FormGroup | undefined;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    if (this.form?.contains('myFormArray')) {
      this.form.removeControl('myFormArray');
    }
    this.form?.registerControl(
      'myFormArray',
      this.fb.array([
        this.fb.group({
          id: [null],
          someOtherProperty: [null],
        }),
      ]),
    );
  }
}

Whereas the test looks like this (I'm using Spectator, but I've tried with TestBed too):

describe('MyComponent', () => {
  let spectator: Spectator<MyComponent>;
  const createComponent = createComponentFactory({
    component: MyComponent,
    imports: [
      ReactiveFormsModule,
    ],
  });

  beforeEach(() => {
    spectator = createComponent({
      props: {
        form: new FormGroup({}),
      },
    });
  });

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

Any idea?

Thanks in advance

question from:https://stackoverflow.com/questions/65934188/angular-jest-component-test-with-input-formgroup-throws-cannot-read-property-s

Answer 1

Waitting for answers