Angular单元测试中如何设置当前路由以匹配router.url判断

问题根源 #

你之前的方案不生效，是因为单元测试场景下无需也不建议调用真实路由的导航逻辑：router.navigate是异步操作，且默认测试环境未配置完整路由上下文，自然拿不到正确的router.url值。

最优解决方案：直接Mock Router的url属性 #

单元测试只需要模拟组件的外部依赖输入，直接给Router提供带url属性的Mock对象即可，无需引入真实路由能力。

步骤1：在TestBed中配置Mock Router #

// 定义可动态修改的Router Mock对象
const mockRouter = {
  url: ''
};

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [YourComponent], // 替换为你的组件名
    providers: [
      // 替换真实Router为Mock对象
      { provide: Router, useValue: mockRouter },
      // 保留你其他的Provider配置，比如navigationService的Spy
      { 
        provide: NavigationService, 
        useValue: jasmine.createSpyObj('NavigationService', ['sideNavLeftToggle']) 
      }
    ]
  });
});

步骤2：测试用例中动态设置url并触发变更检测 #

每次修改url后必须调用fixture.detectChanges()触发模板重新渲染，否则*ngIf条件不会生效：

it('menu button should toggle side navs', () => {
  // 先设置当前路由url为目标值
  mockRouter.url = '/home';
  // 触发变更检测，让模板渲染按钮
  fixture.detectChanges();

  const buttonEl = toolbarElement.querySelector('.menu-button');
  (buttonEl as HTMLElement).click();
  expect(navigationServiceSpy.sideNavLeftToggle).toHaveBeenCalled();
});

// 可扩展反场景测试
it('menu button should not render on non-home routes', () => {
  mockRouter.url = '/profile';
  fixture.detectChanges();

  const buttonEl = toolbarElement.querySelector('.menu-button');
  expect(buttonEl).toBeFalsy();
});

注意事项 #

如果你的组件用到了其他Router属性/方法，比如router.events、router.navigate，只需要在mockRouter对象中补充对应的Mock实现即可，不需要引入真实Router模块。

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