如何测试动态加载组件的 Angular (v11) 组件

Question

In my code I'm following Angular v11 guide for that

@Directive({
  selector: '[stepHostContent]',
})
export class StepHostContentDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

@Component({
  selector: 'app-dialog-wizard',
  templateUrl: './dialog-wizard.component.html',
  styleUrls: ['./dialog-wizard.component.scss']
})
export class DialogWizardComponent implements OnInit, OnDestroy {

  @ViewChild(StepHostContentDirective, { static: true }) stepHostContent: StepHostContentDirective;

  constructor(
    public readonly dialog: MatDialogRef<DialogJobsWizardComponent>,
    @Inject(MAT_DIALOG_DATA) public readonly data: { theme: string, title: string },
    public readonly componentFactoryResolver: ComponentFactoryResolver
  ) { }
...
private loadStepContentComponent(componentToLoad: Type<any>): void {
   const componentFactory =  this.componentFactoryResolver.resolveComponentFactory(componentToLoad);
   const viewContainerRef = this.stepHostContent.viewContainerRef;
   viewContainerRef.clear();

   viewContainerRef.createComponent(componentFactory);
 }

My unit test

describe('DialogWizardComponent', () => {
  let component: DialogWizardComponent;
  let fixture: ComponentFixture<DialogWizardComponent>;
  let componentFactoryResolverSpy = jasmine.createSpyObj<ComponentFactoryResolver>('ComponentFactoryResolver', ['resolveComponentFactory'])
  
  beforeEach(async () => {
    componentFactoryResolverSpy = spyComponentFactoryResolverSpy();
    await TestBed.configureTestingModule({
      declarations: [ 
        DialogsWizardComponent,
        MockComponent(DialogBaseComponent),
        MockComponent(StepTestAComponent),
        MockComponent(StepTestBComponent),
        StepHostContentDirective
      ],
      providers: [
        { provide: MatDialogRef, useValue: { close: () => {} } },
        { provide: MAT_DIALOG_DATA, useValue: { theme: 'dark', title: 'Title' } },
        { provide: ComponentFactoryResolver, useValue: componentFactoryResolverSpy },
      ],
    })
    .compileComponents();
  });

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

the error says

Cannot read properties of undefined (reading 'ngModule') pointing to this line viewContainerRef.createComponent(componentFactory);

Answer 1

You need to mock ViewContainerRef.

https://angular.io/guide/testing-components-basics

Answer 2

I fixed it removing the ComponentFactoryResolver from providers, and it worked