beforeEach dies without error on MockRender call

Question

I am testing a component using ngMocks and my spec keeps failing with "formGroup expects an instance of type FormGroup please supply one".

I was able to validate that component is actually never set. In fact every single line after the marked one where I call MockRender is not called in beforeEach therefore component is not set.

As you can see I tried to give formGroup in the component a default value to maybe stop the problem from happening while MockRender is doing its thing but that did not change a thing.

Any idea a) what I can do to fix this? b) Why the error is not thrown bei MockRender instead of the expect in my spec?

Spec:

    describe('CombinedMultiControlFormFieldComponent', () => {
      let component: CombinedMultiControlFormFieldComponent;
      let fixture;
      const mockDialog = {
        open() {
        }
      };
    
      beforeEach(async () => {
        return MockBuilder(CombinedMultiControlFormFieldComponent)
          .keep(MatFormFieldModule)
          .keep(FormsModule)
          .keep(ReactiveFormsModule)
          .mock(ConcatFormGroupValuesPipe)
          .provide({provide: MatDialog, useValue: mockDialog});
      });
    
      beforeEach(() => {
        fixture = MockRender(CombinedMultiControlFormFieldComponent); <-------------
        component = fixture.componentInstance;
        component.formGroup = fg;
        fixture.detectChanges();
      });
    
      it('should create', () => {
        expect(component).toBeTruthy();
      });
    });

TS:

    export class CombinedMultiControlFormFieldComponent {
    
      @Input()
      formGroup: FormGroup = new FormGroup({f1: new FormControl('')});
    
      @Input()
      displayLabel: string;
    
      constructor(private dialog: MatDialog) {
      }
    }

EDIT: I supplied a fix in an answer below although I still don't quite understand why the error occurs.

Answer 1

Still not quite sure, why this happens but by supplying the formGroup as parameter in the MockRender call I was able to get rid of the error.

    beforeEach(() => {
      fixture = MockRender(CombinedMultiControlFormFieldComponent, {formGroup: fg}); <-----
      component = fixture.componentInstance;
      fixture.detectChanges();
    });

I would still love to learn how to use ngMocks correctly. Therefore if anyone can explain why please let us know :)