It seems that the page is not rendered in my unit test. This is why I am getting the null obj when doing the assert.
I am using webpack, do you know if it can be related to it ?
The angular webpack result in then rendered in a tools that aggregate all the html. But I think in my unit test the html should be displayed. Did I miss something ?

Component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { AlertsLandingComponent } from 'src/shared/alerts-landing.component';
import { ExtendedRoutes } from '../fr-plus.module';
describe('FrAlertsLanding', () => {
  let component: AlertsLandingComponent;
  let fixture: ComponentFixture<AlertsLandingComponent>;
  let router: Router;
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ AlertsLandingComponent ],
      imports: [ RouterTestingModule.withRoutes(ExtendedRoutes) ]
    })
    .compileComponents();
  });
  beforeEach(() => {
    fixture = TestBed.createComponent(AlertsLandingComponent);
    component = fixture.componentInstance;
    router = TestBed.inject(Router);
    fixture.detectChanges();
  });
  it('should create', () => {
    expect(component).toBeTruthy();
  });
  it('should display the tabs', () => {
    const compiled = fixture.nativeElement;
    console.warn("test",compiled)
    console.log("test")
    router.navigate(['']);
    expect(compiled.querySelector('ln-tabbed-card')).toBeTruthy();
    expect(compiled.querySelector('ln-tab[label="Saved Searches"]')).toBeTruthy();
    expect(compiled.querySelector('ln-tab[label="Tracked Sources"]')).toBeTruthy();
    expect(compiled.querySelector('ln-tab[label="News"]')).toBeTruthy();
  });
});

Component.html

<alert-loadbox [darkMode]="false"></alert-loadbox>


<div class="wrapper-content">
  <ln-tabbed-card>
    <ln-tabbed-card-header>
      <ln-tabbed-card-title>{{dictionary.alerts}}</ln-tabbed-card-title>
      <button class="share-btn" (click)="openLinkToPageDialog()" aria-label="Share">
        <ln-icon ln-prefix name="permalink" size="md"></ln-icon>
      </button>
    </ln-tabbed-card-header>
    <ln-tab label="{{dictionary.savedSearches}}">
      <frsearch-alerts *ngIf="tabbedCard?.selectedIndex === 0"></frsearch-alerts>
    </ln-tab>
    <ln-tab label="{{dictionary.trackedSources}}">
    </ln-tab>
    <ln-tab label="{{dictionary.news}}">
      <frnews-alerts *ngIf="tabbedCard?.selectedIndex === 2"></frnews-alerts>
    </ln-tab>
  </ln-tabbed-card>
</div>

Result in karma console :

<div id="root32" ng-version="12.0.5"><router-outlet></router-outlet><!--container--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></div>