Angular组件NavigationEnd监听测试失败，如何正确实现异步导航测试？

问题描述 #

我有一个Angular组件，核心逻辑是监听路由导航事件，在NavigationEnd触发时匹配当前页面并赋值给currentPage：

allpages: Array<Page> = [
  { name: 'Home', url: '/home' },
];

constructor(private router: Router) {
    this.$routerEvent = this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationEnd) {
        let route = event.url !== '/' ? event.url : event.urlAfterRedirects;
        this.currentPage = this.allpages.find(
          (page) => page.url === route
        );
      }
    });
  }

对应的Jest测试代码如下，目标是验证初始导航后currentPage会被设置为Home页面：

beforeEach(async () => {
  TestBed.configureTestingModule({
    declarations: [NavigationBarComponent],
    imports: [MatIconModule, RouterTestingModule],
  }).compileComponents();

  fixture = TestBed.createComponent(NavigationBarComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

it('should set home page as current page', inject([Router], (router: Router) => {
  router.initialNavigation();
  expect(component.currentPage).toEqual({ name: 'Home', url: '/home' });
}));

测试失败，component.currentPage始终为undefined，已知路由导航是异步操作，求正确的测试实现方式。

解决方法 #

1. 使用fakeAsync+tick模拟异步流程 #

路由事件是异步触发的，直接调用initialNavigation后立即断言，此时NavigationEnd事件还未处理，currentPage尚未赋值。可以用Angular测试工具的fakeAsync包裹测试逻辑，通过tick()推进时间完成所有异步事件，再触发变更检测同步组件状态：

import { fakeAsync, tick } from '@angular/core/testing';

// ...

it('should set home page as current page', fakeAsync(inject([Router], (router: Router) => {
  router.initialNavigation();
  // 推进时间，完成所有异步路由事件
  tick();
  // 触发变更检测，同步组件状态
  fixture.detectChanges();
  expect(component.currentPage).toEqual({ name: 'Home', url: '/home' });
})));

2. 配置RouterTestingModule的初始路由 #

默认RouterTestingModule未配置任何路由，初始导航的url为/，而组件allpages中没有匹配该路径的页面，导致currentPage为undefined。需要配置路由重定向，确保初始导航后跳转到/home：

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

// 定义空占位组件用于路由配置
@Component({ template: '' })
class DummyHomeComponent {}

beforeEach(async () => {
  TestBed.configureTestingModule({
    declarations: [NavigationBarComponent, DummyHomeComponent], // 添加占位组件
    imports: [
      MatIconModule,
      RouterTestingModule.withRoutes([
        { path: '', redirectTo: '/home', pathMatch: 'full' }, // 根路径重定向到/home
        { path: 'home', component: DummyHomeComponent } // 配置/home路由
      ])
    ],
  }).compileComponents();

  fixture = TestBed.createComponent(NavigationBarComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

3. 订阅路由事件等待完成 #

也可以在测试中直接监听router.events，等到NavigationEnd事件触发后再执行断言：

import { filter, first } from 'rxjs';

// ...

it('should set home page as current page', async(inject([Router], (router: Router) => {
  router.initialNavigation();
  
  return router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    first() // 只取第一个NavigationEnd事件
  ).subscribe(() => {
    fixture.detectChanges();
    expect(component.currentPage).toEqual({ name: 'Home', url: '/home' });
  });
})));

核心原因总结 #

• 路由导航是异步流程，initialNavigation()不会立即触发NavigationEnd事件，必须等待异步任务完成才能获取更新后的currentPage。
• 未配置路由时，初始导航默认路径为/，组件中无匹配页面导致currentPage为undefined，需通过路由配置确保导航到/home。

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