如何在Angular的.spec文件中测试组件路由

在Angular中测试组件的路由，确实是在对应类的.spec.ts文件中完成的。咱们一步步来实现：

1. 首先定义要测试的路由配置 #

先写出你要测试的Trader相关路由，这是测试的基础：

import {Routes} from "@angular/router";
import {TraderPurchasesComponent} from "./detail/purchases/trader-purchases.component";
import {TraderListComponent} from "./list/trader-list.component";
import {TraderDetailComponent} from "./detail/trader-detail.component";

export const TraderRoutes: Routes = [
 {path: 'traders', component: TraderListComponent},
 {path: 'traders/detail', component: TraderDetailComponent},
 {path: 'traders/detail/:trader', component: TraderDetailComponent},
 {path: 'traders/purchases/:trader', component: TraderPurchasesComponent}
];

2. 编写路由测试用例 #

接下来通过RouterTestingModule模拟路由环境，然后验证导航行为是否符合预期：

import {async, TestBed} from "@angular/core/testing";
import {Router} from "@angular/router";
import {Location} from '@angular/common'
import {RouterTestingModule} from "@angular/router/testing";
import {TraderRoutes} from "./trader.routes";

describe("Trader Routes ",()=> {
  // 配置测试模块，注入模拟路由
  TestBed.configureTestingModule({
    imports: [RouterTestingModule.withRoutes(TraderRoutes)],
  });

  // 获取Router和Location实例
  let router:Router = TestBed.get(Router);
  let location = TestBed.get(Location);

  // 初始化导航，确保测试环境路由状态正确
  router.initialNavigation();

  // 测试导航到"traders"路径的行为
  it('navigate to "traders" takes you to /traders', async(() => {
    router.navigate(['traders']).then(() => {
      expect(location.path()).toBe('/traders');
    });
  }));
});

关键部分说明： #

• RouterTestingModule.withRoutes(TraderRoutes)：帮我们创建模拟路由模块，用自定义的TraderRoutes完成配置
• TestBed.get(Router)和TestBed.get(Location)：获取路由和位置服务实例，用来模拟导航动作并验证最终路径
• router.initialNavigation()：初始化路由导航，保证测试环境的路由状态处于可用状态
• 测试用例通过router.navigate触发导航，再通过location.path()验证实际路径是否和预期一致

内容的提问来源于stack exchange，提问作者Ensar Akbaş