Angular 5中Jasmine测试路由跳转至登录页失败求助

我来帮你排查这个问题！看起来你的测试没有正确捕捉到Router导航后的路径变化，主要可能是路由配置冲突、导航未完成，或者测试逻辑时机不对这几个原因。下面是具体的解决方案：

1. 避免路由配置冲突，简化测试模块 #

你当前的测试模块同时导入了AppModule和RouterTestingModule.withRoutes(routes)，这很可能导致路由配置冲突。AppModule已经包含了完整的路由配置，而RouterTestingModule应该用于隔离测试路由行为。建议修改测试模块，只导入必要依赖，移除AppModule：

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [
      HttpClientTestingModule,
      RouterTestingModule.withRoutes(routes)
    ],
    // 声明测试涉及的组件
    declarations: [
      AppComponent,
      LoginComponent,
      SearchComponent
    ],
    providers: [
      AuthenticationService,
      UserService,
      // Mock AuthGuardService，避免路由守卫影响测试流程
      { provide: AuthGuardService, useValue: { canActivate: () => Promise.resolve(true) } }
    ],
  });
  service = TestBed.inject(AuthenticationService);
  httpMock = TestBed.inject(HttpTestingController);
  router = TestBed.inject(Router);
  location = TestBed.inject(Location);
  fixture = TestBed.createComponent(AppComponent);
  router.initialNavigation(); // 初始化路由状态
});

2. 让导航方法返回Promise，确保测试等待导航完成 #

router.navigate()本身返回一个Promise<boolean>，可以修改你的redirectToLogin方法返回这个Promise，这样测试就能明确等待导航操作完成后再断言：

修改authentication.service.ts：

public redirectToLogin(): Promise<boolean> {
  return this.router.navigate(['login']);
}

然后将测试用例改为async模式，等待Promise完成后执行断言：

it('should redirect to login page', async(() => {
  service.redirectToLogin().then(() => {
    expect(location.path()).toBe('/login');
  });
}));

3. 若坚持使用fakeAsync，调整逻辑确保微任务被处理 #

如果不想修改服务方法，也可以调整fakeAsync测试的逻辑，确保导航的微任务被正确处理：

it('should redirect to login page', fakeAsync(() => {
  service.redirectToLogin();
  tick(); // 等待所有微任务完成，无需指定固定时长
  fixture.detectChanges();
  expect(location.path()).toBe('/login');
}));

额外检查点 #

• 确认app.routes.ts中login路径的配置正确（你的代码里是没问题的）
• 确保测试中没有其他代码干扰路由导航流程

内容的提问来源于stack exchange，提问作者j.2bb