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

Question

在我的代码中，我遵循 Angular v11 指南，

@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);
 }

我的单元测试

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();
  });

错误显示

无法读取未定义的属性（读取'ngModule'） 指向这一行viewContainerRef.createComponent(componentFactory);

Answer 1

您需要模拟 ViewContainerRef。

Answer 2

我修复了它，从提供程序中删除了 ComponentFactoryResolver，并且它起作用了