'TypeError: Невозможно прочитать свойство' appendChild 'из null' при тестировании portalHost в приложении Angular

Question

Я пишу юнит-тесты в нашем Угловом приложении с использованием jest .В этом сценарии содержимое, которое должно отображаться на основной панели инструментов 1010 * из списка NavBar , проецируется с использованием PortalHost .Он отлично работает в приложении, но когда я тестирую его, он выдает ошибку.

Я видел, что в SO много вопросов, связанных с этой темой, но большинство из них не находятся втот же контекст, что и у меня.

стек ошибок

    TypeError: Cannot read property 'appendChild' of null

      22 | 
      23 |         // Attach portal to host
    > 24 |         this.portalHost.attach(this.portal);
         |                         ^
      25 |     }
      26 | 
      27 |     ngOnDestroy(): void {

      at node_modules/@angular/src/cdk/portal/dom-portal-outlet.ts:83:62
          at Array.forEach (<anonymous>)
      at DomPortalOutlet.Object.<anonymous>.DomPortalOutlet.attachTemplatePortal (node_modules/@angular/src/cdk/portal/dom-portal-outlet.ts:83:23)
      at DomPortalOutlet.Object.<anonymous>.BasePortalOutlet.attach (node_modules/@angular/src/cdk/portal/portal.ts:215:19)
      at NavbarListGenComponent.ngAfterViewInit (src/app/main-toolbar/navbar-list-gen.component.ts:24:25)
      at callProviderLifecycles (../packages/core/src/view/provider.ts:569:14)
      at callElementProvidersLifecycles (../packages/core/src/view/provider.ts:541:7)
      at callLifecycleHooksChildrenFirst (../packages/core/src/view/provider.ts:529:21)
      at checkAndUpdateView (../packages/core/src/view/view.ts:375:3)
      at callViewAction (../packages/core/src/view/view.ts:615:11)
      at execComponentViewsAction (../packages/core/src/view/view.ts:559:7)
      at checkAndUpdateView (../packages/core/src/view/view.ts:370:3)
      at callWithDebugContext (../packages/core/src/view/services.ts:629:23)
      at Object.debugCheckAndUpdateView [as checkAndUpdateView] (../packages/core/src/view/services.ts:346:10)
      at ViewRef_.detectChanges (../packages/core/src/view/refs.ts:261:16)
      at ComponentFixture._tick (../../packages/core/testing/src/component_fixture.ts:107:28)
      at ../../packages/core/testing/src/component_fixture.ts:120:36
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:391:26)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:129:39)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:390:52)
      at Object.onInvoke (../packages/core/src/zone/ng_zone.ts:273:25)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:390:52)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:150:43)
      at NgZone.run (../packages/core/src/zone/ng_zone.ts:171:50)
      at ComponentFixture.detectChanges (../../packages/core/testing/src/component_fixture.ts:120:19)
      at beforeEach (src/app/dashboard/dashboard.component.spec.ts:25:17)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:391:26)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:129:39)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:390:52)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:150:43)
      at Object.testBody.length (node_modules/jest-preset-angular/zone-patch/index.js:52:27)

---

main-toolbar.component.html

<div class="g-SiteHeader" *ngIf="(isLoggedIn | async)">

  <div id="navbarlist"></div>

<div>

---

navbar-list-gen.components.ts

@Component({
    selector: 'app-navbar-list',
    template: `
        <ng-template cdk-portal>
            <ng-content></ng-content>
        </ng-template>
    `,
})
export class NavbarListGenComponent implements AfterViewInit, OnDestroy {

    private portalHost: PortalHost;
    @ViewChild(CdkPortal) portal;

    constructor(private componentFactoryResolver: ComponentFactoryResolver, private injector: Injector, private appRef: ApplicationRef) {}

    ngAfterViewInit(): void {
        // Create a portalHost from a DOM element
        this.portalHost = new DomPortalHost(document.querySelector('#navbarlist'), this.componentFactoryResolver, this.appRef, this.injector);

        // Attach portal to host
        this.portalHost.attach(this.portal);
    }

    ngOnDestroy(): void {
        this.portalHost.detach();
    }
}

---

Я не могу использовать решение здесь , так как я не использую обычный JS и мне не разрешено изменять исходный код по порядкунаписать контрольные примеры.Как уже упоминалось здесь , у меня уже есть элемент с id=navbarlist, который правильно отображается в приложении.Согласно this , я думаю, что элемент DOM не существует при запуске теста, но, похоже, не может найти способ это исправить.Любая помощь приветствуется.