Angular测试中如何获取自定义路由数据并解决路由节点为空问题

原因分析 #

测试环境下，默认的RouterTestingModule不会自动构建完整的路由层级结构，导致router.routerState.root.firstChild返回null，无法读取路由自定义data字段。

解决方案 #

1. 配置带测试路由的RouterTestingModule #

在测试模块中通过RouterTestingModule.withRoutes()定义包含自定义data的测试路由，确保路由树有正确层级，导航后root.firstChild会指向对应路由快照。

步骤：

• 创建一个测试用的空组件（如DummyComponent）
• 在测试模块导入时配置带目标data的路由
• 调用router.navigate()初始化路由状态

示例代码：

// 测试用空组件
@Component({ template: '' })
class DummyComponent {}

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent, DummyComponent],
      imports: [
        RouterTestingModule.withRoutes([
          // 配置带自定义data的测试路由
          { path: '', component: DummyComponent, data: { theme: 'dark' } }
        ])
      ]
    }).compileComponents();

    router = TestBed.inject(Router);
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;

    // 初始化路由导航，触发路由状态更新
    await router.navigate(['/']);
    fixture.detectChanges();
  });

  it('should apply theme class from route data', () => {
    // 触发NavigationEnd事件（匹配组件内的监听逻辑）
    const navigationEvent = new NavigationEnd(1, '/', '/');
    router.events.next(navigationEvent);
    fixture.detectChanges();

    expect(document.body.classList.contains('dark')).toBe(true);
  });
});

2. 手动模拟路由状态层级 #

如果不想配置真实路由，可以手动构建RouterState层级，模拟root.firstChild指向包含自定义data的ActivatedRoute。

示例代码：

describe('AppComponent', () => {
  let component: AppComponent;
  let router: jasmine.SpyObj<Router>;
  let testRoute: ActivatedRoute;

  beforeEach(() => {
    // 创建Router spy对象
    const routerSpy = jasmine.createSpyObj('Router', ['events']);
    // 创建测试用ActivatedRoute并设置自定义data
    testRoute = new ActivatedRoute();
    testRoute.data = of({ theme: 'light' });

    // 手动构建路由状态层级
    routerSpy.routerState = {
      root: {
        firstChild: testRoute
      } as ActivatedRoute
    } as RouterState;

    TestBed.configureTestingModule({
      declarations: [AppComponent],
      providers: [{ provide: Router, useValue: routerSpy }]
    });

    component = TestBed.createComponent(AppComponent).componentInstance;
    router = TestBed.inject(Router) as jasmine.SpyObj<Router>;
  });

  it('should read theme data from simulated route', () => {
    // 触发NavigationEnd事件
    router.events.next(new NavigationEnd(1, '/', '/'));

    expect(document.body.classList.contains('light')).toBe(true);
  });
});

关键注意事项 #

• 组件监听NavigationEnd时，需确保事件触发前路由状态已初始化（如调用router.navigate()）
• 使用RouterTestingModule时，必须通过withRoutes定义路由，否则路由树为空
• 手动模拟路由时，要保证routerState.root.firstChild指向的ActivatedRoute已正确设置data可观察对象

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