Angular单元测试页面未渲染，断言返回null问题求助

使用Karma Jasmine进行Angular单元测试时，发现页面未渲染预期内容，执行断言时获取到null值。项目采用webpack构建，正常构建产物能在HTML工具中正常渲染，但单元测试里看不到预期的HTML结构。相关代码和Karma控制台输出如下，请问遗漏了哪些配置或步骤？

相关代码 #

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>

Karma控制台输出 #

<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>

问题分析与解决步骤 #

1. 缺失依赖组件的导入/声明 #

你的组件模板中使用了alert-loadbox、ln-tabbed-card、ln-tab等自定义组件，但测试模块仅声明了AlertsLandingComponent，未导入这些依赖组件所在的模块，也未直接声明组件。Angular测试环境不会自动加载外部组件，必须显式处理：

• 方式一：导入包含这些组件的共享模块（比如SharedModule）
• 方式二：在测试模块的declarations数组中单独声明用到的每个组件

2. 异步路由导航未等待完成 #

router.navigate([''])是异步操作，直接执行断言会因路由未完成、视图未更新导致失败。需等待导航完成后再触发视图变更检测。

3. 模板变量未初始化 #

模板中使用了{{dictionary.alerts}}等插值表达式，如果dictionary未在测试中初始化，会导致视图渲染异常，甚至部分内容不显示。

4. 未触发视图变更检测 #

路由导航或变量赋值后，需手动调用fixture.detectChanges()或fixture.whenStable()等待视图更新。

修改后的测试代码示例 #

import { ComponentFixture, TestBed, waitForAsync } 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';
// 导入包含依赖组件的共享模块
import { SharedModule } from 'src/shared/shared.module';

describe('FrAlertsLanding', () => {
  let component: AlertsLandingComponent;
  let fixture: ComponentFixture<AlertsLandingComponent>;
  let router: Router;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ AlertsLandingComponent ],
      imports: [ 
        RouterTestingModule.withRoutes(ExtendedRoutes),
        SharedModule // 添加依赖模块
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(AlertsLandingComponent);
    component = fixture.componentInstance;
    router = TestBed.inject(Router);
    // 初始化dictionary变量，避免插值失败
    component.dictionary = {
      alerts: 'Alerts',
      savedSearches: 'Saved Searches',
      trackedSources: 'Tracked Sources',
      news: 'News'
    };
    fixture.detectChanges();
  });

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

  it('should display the tabs', waitForAsync(() => {
    const compiled = fixture.nativeElement;
    router.navigate(['']).then(() => {
      fixture.detectChanges(); // 导航完成后触发视图更新
      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();
    });
  }));
});

额外优化点 #

可以使用async/await简化异步逻辑：

it('should display the tabs', async () => {
  const compiled = fixture.nativeElement;
  await router.navigate(['']);
  await fixture.whenStable(); // 等待所有异步操作完成
  fixture.detectChanges();
  // 执行断言
});

内容的提问来源于stack exchange，提问作者guiz