Angular单元测试用spyOn测路由跳转报Cannot match any routes错误如何解决

问题根因 #

• 你给router.navigate的spy配置了.and.callThrough()，会真实执行路由跳转逻辑，但你的测试模块没有配置'test'对应的路由规则，因此触发路由匹配失败报错
• goto方法内部用setTimeout延迟300ms执行核心逻辑，你写的同步断言会在定时器回调执行前就运行，无法测到真实的调用情况
• 路由事件的subscribe不需要真实执行，单元测试仅需要验证方法被正确调用即可，不需要依赖真实的路由事件流

修复方案 #

1. 调整spy配置，关闭真实调用 #

把callThrough替换为模拟返回值，不需要真实执行路由相关逻辑：

// 给navigate返回成功的Promise，模拟跳转成功
let spy1 = spyOn(component.router, 'navigate').and.resolveTo(true);
// 给subscribe返回空的订阅对象，避免内存泄漏
let spy2 = spyOn(component.router.events, 'subscribe').and.returnValue({ unsubscribe: () => {} });

2. 处理异步定时器逻辑 #

两种方案选其一即可：

方案A：使用Angular测试工具的fakeAsync + tick

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

describe('goto()', () => {
  it('should navigate to the correct url', fakeAsync(() => {
    const params = '/test';
    const spy1 = spyOn(component.router, 'navigate').and.resolveTo(true);
    const spy2 = spyOn(component.router.events, 'subscribe').and.returnValue({ unsubscribe: () => {} });

    component.goto(params);
    // 跳过300ms定时器，直接执行回调逻辑
    tick(300);

    expect(spy1).toHaveBeenCalledWith([params]);
    expect(spy2).toHaveBeenCalled();
  }));
});

方案B：使用jasmine内置的时钟工具

describe('goto()', () => {
  beforeEach(() => {
    // 启用模拟时钟
    jasmine.clock().install();
  });

  afterEach(() => {
    // 测试完成后恢复原生时钟
    jasmine.clock().uninstall();
  });

  it('should navigate to the correct url', () => {
    const params = '/test';
    const spy1 = spyOn(component.router, 'navigate').and.resolveTo(true);
    const spy2 = spyOn(component.router.events, 'subscribe').and.returnValue({ unsubscribe: () => {} });

    component.goto(params);
    // 快进300ms触发定时器回调
    jasmine.clock().tick(300);

    expect(spy1).toHaveBeenCalledWith([params]);
    expect(spy2).toHaveBeenCalled();
  });
});

3. 特殊场景：需要真实执行路由跳转的情况 #

如果你的测试逻辑必须真实调用router.navigate，可以在测试模块中配置占位路由避免匹配失败：

import { RouterTestingModule } from '@angular/router/testing';

// 空占位组件，用于匹配测试路由
class DummyTestComponent {}

beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [
      // 配置test路由规则
      RouterTestingModule.withRoutes([{ path: 'test', component: DummyTestComponent }])
    ],
    declarations: [YourTestComponent, DummyTestComponent]
  }).compileComponents();
});

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