Angular - Jasmine testing with PrimeNg Table - unable to verify row count inside of unittest

i'm trying to create a unittest for a angular component which is using a PrimeNG table. It works as expected with ng serve inside the browser, but within a Jasmine test i'm unable to get the rendered HTML of the table. When i inspect the markup it just contains the following line:

<p-table class="testtable"><!--container--><!--container--></p-table>

I created a new component with only static data to reproduce the issue:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  template: `
  <p-table class="testtable" [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td>{{car.vin}}</td>
            <td>{{car.year}}</td>
            <td>{{car.brand}}</td>
            <td>{{car.color}}</td>
        </tr>
    </ng-template>
</p-table>
  `
})
export class TestComponent implements OnInit {

  cars = [
    {"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
    {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
    {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
    {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
    {"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
    {"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
    {"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
    {"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
    {"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
    {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}
];

  constructor() { }

  ngOnInit(): void {
  }
}

And here is the test ("should render table"):

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TestComponent } from './test.component';
import { By } from '@angular/platform-browser';

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


  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestComponent
      ],
    }).compileComponents();
  }));

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

  it("should render table", () => {
    debugger;
    const result = fixture.debugElement.queryAll(By.css(".testtable"));
    const markup = result[0].nativeNode.outerHTML;
    console.log(markup);

    //const tableEl = fixture.debugElement.query(By.css('div'));
    //const bodyRows = tableEl.query(By.css('.ui-table-tbody')).queryAll(By.css('tr'));
    //expect(bodyRows.length).toEqual(10);
  });
});

Currently i'm using Angular 9.0.6 and PrimeNG 9.0.0.

I already tried different other methods like compileComponent after createComponent or using async helper function for the test but with no luck at all. Furthermore I've asked the same question in the PrimeFaces Forum, but didn't get a response for a week now.

Any help would be highly appreciated!

Your spec is missing the import of table module from primeng. I think that might be the problem.

Please update the spec as follows

import {TableModule} from 'primeng/table';

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestComponent
      ],
      imports:[TableModule]
    }).compileComponents();
  }));

Please let me know if it is not working