如何在Angular中对菜单路由数组进行路由跳转测试

原测试代码的问题 #

• 你直接断言component.menu的值为'home'是完全错误的：menu是返回MenuItem数组的方法，不是存储当前路由的变量
• 你的测试逻辑没有和菜单定义的action方法关联，无法验证菜单本身的跳转能力

前置依赖配置 #

首先需要在测试的TestBed中导入路由测试模块，并且拿到Router实例的引用方便断言：

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

// 测试模块配置
beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [RouterTestingModule.withRoutes([])], // 可填实际路由也可留空，仅测navigate调用可以留空
    declarations: [YourComponent] // 替换为你实际的组件名
  });
  const router = TestBed.inject(Router);
  // 给router.navigate加spy方便校验调用参数
  spyOn(router, 'navigate').and.callThrough();
});

两类测试场景实现 #

1. 验证菜单数组配置正确性 #

先确保返回的菜单配置和预期的项、基础参数一致：

it('should return correct menu config', () => {
  const menus = component.menu();
  // 验证菜单数量
  expect(menus.length).toBe(3);
  // 验证每个菜单项的基础属性
  expect(menus[0].label).toBe('Home');
  expect(menus[0].shortLabel).toBe('Home');
  expect(menus[1].label).toBe('Request');
  expect(menus[1].shortLabel).toBe('Requests');
  expect(menus[2].label).toBe('About');
  expect(menus[2].shortLabel).toBe('About');
});

2. 验证菜单项action触发正确路由跳转 #

调用对应菜单的action方法，验证router.navigate是否被传入了正确的路由参数：

it('Home menu action should navigate to /home', fakeAsync(() => {
  const menus = component.menu();
  const router = TestBed.inject(Router);
  
  // 调用Home菜单的action方法
  menus[0].action();
  tick();
  
  // 验证路由跳转方法被正确调用
  expect(router.navigate).toHaveBeenCalledWith(['home']);
  // 可选：额外验证当前激活路由确实为目标路由
  expect(router.url).toBe('/home');
}));

// 其余菜单的测试逻辑同理，修改索引和断言参数即可
it('Request menu action should navigate to /request', fakeAsync(() => {
  const menus = component.menu();
  const router = TestBed.inject(Router);
  
  menus[1].action();
  tick();
  
  expect(router.navigate).toHaveBeenCalledWith(['request']);
}));

it('About menu action should navigate to /about', fakeAsync(() => {
  const menus = component.menu();
  const router = TestBed.inject(Router);
  
  menus[2].action();
  tick();
  
  expect(router.navigate).toHaveBeenCalledWith(['about']);
}));

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