Angular相对路由单元测试报错：预期路由不匹配问题排查

你的问题核心在于仅模拟router.url属性无法让Angular路由系统正确初始化当前激活的路由上下文。相对路由（比如['..', 'NextPage']）的解析依赖的是ActivatedRoute的层级快照，而不是单纯的URL字符串，所以直接spy url属性无法让路由系统正确计算相对路径。

修正方案 #

需要让RouterTestingModule真正导航到测试目标URL，初始化正确的路由状态，这样组件内的routerLink才能基于当前激活的路由解析出正确的目标路径。

修正后的测试代码 #

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

  @Component({})
  class MockComponent {}

  const routes: Routes = [
    { path: 'example-page/:name', component: MockComponent },
  ];

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes(routes)],
      declarations: [ ExamplePageComponent ]
    })
    .compileComponents();
    
    router = TestBed.inject(Router);
    // 初始化路由模块，确保导航功能正常工作
    router.initialNavigation();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ExamplePageComponent);
    component = fixture.componentInstance;
  });

  it('should route to next page correctly', fakeAsync(() => {
    // 先导航到组件所在的URL，生成正确的激活路由快照
    router.navigate(['/example-page/ThisPage']);
    tick();
    fixture.detectChanges(); // 触发变更检测，让组件基于当前路由渲染routerLink

    const navigateSpy = spyOn(router, 'navigateByUrl');
    const link = fixture.nativeElement.querySelector('a');
    link.click();
    tick();

    const calledUrl = navigateSpy.calls.first().args[0].toString();
    expect(calledUrl).toContain('/example-page/NextPage');
  }));
});

关键改动说明 #

1. 初始化路由模块：添加router.initialNavigation()确保RouterTestingModule完成初始化流程
2. 实际导航到测试URL：用router.navigate(['/example-page/ThisPage'])代替spy url，让路由系统生成真实的ActivatedRoute层级快照
3. 触发组件变更检测：导航完成后调用fixture.detectChanges()，让组件基于最新的路由上下文渲染routerLink

这样修改后，['..', 'NextPage']会基于当前激活的/example-page/ThisPage路由正确解析为/example-page/NextPage，测试就能通过了。

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