Тестирование содержимого дочернего компонента с помощью маршрутизатора

Question

Привет, я хочу проверить рендер от h1 на моем дочернем компоненте.У меня есть null, когда я хочу получить h1 тег.

Мой тест:

fdescribe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AppComponent,
        MenuComponent,
        UsersComponent,
        HomeComponent,
        AddUserComponent ],
      imports: [ReactiveFormsModule, HttpClientModule, 
      RouterModule.forRoot(ROUTES)],
      providers: [{provide: APP_BASE_HREF, useValue : '/' }]
  }).compileComponents();
}));

it('should render title in a h1 tag', async(() => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  console.error("COMPILED -> ", compiled.querySelector('h1'));
  expect(compiled.querySelector('h1').textContent).toContain('Content');
}));
});

Мой маршрутизатор:

export const ROUTES: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UsersComponent },
  { path: 'adduser', component: AddUserComponent }
];

Мой appComponent.html:

<pr-menu></pr-menu>
<div class="container">
  <router-outlet></router-outlet>
</div>

Мой home.component.html

<div class="container" style="text-align:  center">
   <h1>Content</h1>
</div>