如何在Angular测试中为路由级别提供者提供Mock？

问题根源 #

路由级别提供者是绑定在路由配置的注入器层级中，而非根注入器或组件注入器。TestBed的overrideProvider或普通providers配置只能修改根/组件注入器的服务，无法覆盖路由注入器中注册的服务，因此测试时仍会实例化真实的RouteLevelService，导致HttpClient依赖错误。

解决方案 #

直接修改路由配置中的提供者，将真实服务替换为Mock服务，同时保留原有路由结构，无需创建全新测试路由。

步骤1：创建Mock服务 #

先实现与真实服务接口一致的Mock类，提供模拟数据或逻辑：

import { of } from 'rxjs';

class MockRouteLevelService {
  // 复刻真实服务的方法签名，返回模拟结果
  fetchData() {
    return of({ mockContent: '测试数据' });
  }
}

步骤2：修改路由配置中的提供者 #

有两种方式实现：

方式一：导入真实路由后动态替换

在测试初始化时，获取路由配置并替换目标路由的提供者：

import { TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';
import { APP_ROUTES } from '../app-routing.module'; // 导入真实路由配置
import { YourResolver } from './your.resolver';
import { YourComponent } from './your.component';

describe('YourComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule.withRoutes(APP_ROUTES) // 导入真实路由结构
      ],
      declarations: [YourComponent],
      providers: [YourResolver]
    }).compileComponents();

    // 获取路由实例，定位目标路由
    const router = TestBed.inject(Router);
    const targetRoute = router.config.find(route => route.path === '目标路由路径');
    
    // 替换路由级别的提供者
    if (targetRoute) {
      targetRoute.providers = [
        { provide: RouteLevelService, useClass: MockRouteLevelService }
      ];
    }

    // 初始化路由
    await router.initialNavigation();
  });

  it('应该正常加载并使用Mock服务', () => {
    const fixture = TestBed.createComponent(YourComponent);
    fixture.detectChanges();
    // 编写测试断言
  });
});

方式二：预修改路由配置后导入

复制真实路由配置，替换目标路由的提供者后再传入RouterTestingModule：

// 复制真实路由并修改目标路由的提供者
const testRoutes = APP_ROUTES.map(route => {
  if (route.path === '目标路由路径') {
    return {
      ...route,
      providers: [{ provide: RouteLevelService, useClass: MockRouteLevelService }]
    };
  }
  return route;
});

await TestBed.configureTestingModule({
  imports: [RouterTestingModule.withRoutes(testRoutes)],
  declarations: [YourComponent],
  providers: [YourResolver]
}).compileComponents();

关键注意事项 #

• 如果路由是懒加载模块，需要确保修改的是懒加载路由配置中的providers，而非模块内的提供者。
• Mock服务必须与真实服务的接口保持一致，避免解析器调用方法时出现错误。

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