使用动态组件的角度单元测试失败并出现错误 TypeError：无法读取未定义的属性“ɵcmp”

Question

Angular 依赖列表

    "@angular/common": "~9.1.1",
    "@angular/compiler": "~9.1.1",
    "@angular/core": "~9.1.1",
    "@angular/forms": "~9.1.1",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "~9.1.1",
    "@angular/router": "~9.1.1",
    "@fortawesome/fontawesome-free": "^5.13.0"

dialogLayout.component.ts

import { Component, ViewChild, OnDestroy, AfterViewInit  } from '@angular/core';
import { ComponentFactoryResolver, Type, ComponentRef, ChangeDetectorRef } from '@angular/core';
import { Subject } from 'rxjs';

import { DynamicCompDirective } from '../../directive/dynamic-comp.directive';
import { DialogRef } from '../../model/dialog.ref';

@Component({
  selector: 'app-dialog-layout',
  templateUrl: './dialogLayout.component.html',
  styleUrls: ['./dialogLayout.component.css']
})
export class DialogLayoutComponent implements AfterViewInit, OnDestroy {

  @ViewChild(DynamicCompDirective, {static: true})insertionPoint: DynamicCompDirective;

  dialogHeight: number;
  dialogWidth: number;
  backDrop: boolean = false;

  public componentRef: ComponentRef<any>;
  public childComponentType: Type<any>;

  private readonly _onClose = new Subject<any>();
  public onClose = this._onClose.asObservable();


  constructor(private resolver: ComponentFactoryResolver,
              private cd: ChangeDetectorRef,
              private dialogRef: DialogRef) { }

  ngAfterViewInit() {
    this.loadChildComponent(this.childComponentType);
    this.cd.detectChanges();
  }

  ngOnDestroy() {
    if (this.componentRef) {
        this.componentRef.destroy();
    }
  }

  onOverlayClicked(evt: MouseEvent) {
    if (this.backDrop) {
      this.dialogRef.close();
    }
  }

  onDialogClicked(evt: MouseEvent) {
    evt.stopPropagation()
  }

  loadChildComponent(componentType: Type<any>) {
    const componentFactory = this.resolver.resolveComponentFactory(componentType);
    const viewContainerRef = this.insertionPoint.container;
    viewContainerRef.clear();
    this.componentRef = viewContainerRef.createComponent(componentFactory);
  }

  close() {
    this._onClose.next();
  }

}

dialogLayout.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ChangeDetectorRef } from '@angular/core';
import { DialogLayoutComponent } from './dialogLayout.component';
import { DialogRef } from '../../model/dialog.ref';

describe('DialogLayoutComponent', () => {
  let component: DialogLayoutComponent;
  let fixture: ComponentFixture<DialogLayoutComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DialogLayoutComponent ],
      providers: [ { provide: DialogRef, useClass: DialogRef } ]
    })
    .compileComponents();
  }));

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

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

dialog.ref.ts

import { Observable, Subject } from 'rxjs';

export class DialogRef {

  constructor() {}

  private readonly _afterClosed = new Subject<any>();

  afterClosed: Observable<any> = this._afterClosed.asObservable();

  public close(result?: any): void {
    this._afterClosed.next(result);
  }

}

我的单元测试失败并出现错误 TypeError: Cannot read property 'ɵcmp' of undefined

不知道这个错误是从哪里来的。已经花了 2 天时间在谷歌上搜索这个错误，但没有运气。请帮助解决问题。

提前致谢。

Answer 1

我想你的错误来自dialogLayout.component.ts 行： const componentFactory = this.resolver.resolveComponentFactory(componentType);

我会在那里设置一个断点，并确保组件确实在解析。