Angular 4升级HttpClient后嵌套服务测试报错：无HttpClient提供者

你遇到的No provider for HttpClient!错误，核心原因是测试模块的配置存在冗余，没有正确利用HttpClientTestingModule的特性来提供测试用的HttpClient实例。咱们一步步来修正：

第一步：清理测试模块的导入 #

你同时导入了HttpClientModule和HttpClientTestingModule，这其实没必要——HttpClientTestingModule已经内置了测试所需的HttpClient提供者，而且会替换掉真实的HttpClient，让你能通过HttpTestingController来模拟请求。所以先把HttpClientModule从imports里删掉。

第二步：确保依赖链的正确注入 #

你的TokenHandlerService依赖MyHttpService，而MyHttpService依赖HttpClient，只要在providers里正确声明这两个服务，TestBed会自动帮你完成嵌套的依赖注入——前提是你用的是HttpClientTestingModule提供的测试版HttpClient。

修改后的测试配置代码 #

let service: TokenHandlerService;
let httpMock: HttpTestingController;

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [ HttpClientTestingModule ], // 只保留这个测试模块
    providers: [ TokenHandlerService, MyHttpService ]
  });

  // 获取测试用的HttpClient控制器和目标服务（Angular 9+推荐用inject替代get）
  httpMock = TestBed.inject(HttpTestingController);
  service = TestBed.inject(TokenHandlerService);
});

// 每个测试后验证所有请求都被处理，避免遗漏未拦截的请求
afterEach(() => {
  httpMock.verify();
});

补充：完整测试用例示例 #

比如测试TokenHandlerService里的方法是否正确添加token并发起请求：

it('should attach auth token to outgoing requests', () => {
  // 调用服务中的目标方法
  service.fetchProtectedData().subscribe(response => {
    expect(response).toEqual({ data: 'mock-data' });
  });

  // 拦截对应的API请求
  const req = httpMock.expectOne('https://your-api-domain.com/protected');
  // 验证请求头是否包含预期的token
  expect(req.request.headers.get('Authorization')).toBe('Bearer mock-token-123');

  // 返回模拟的响应数据
  req.flush({ data: 'mock-data' });
});

为什么这样能解决问题？ #

• HttpClientTestingModule会注册HttpClient的测试实现，同时提供HttpTestingController让你能拦截和模拟HTTP请求。
• 移除HttpClientModule避免了真实HttpClient和测试版HttpClient的冲突，确保嵌套的MyHttpService能拿到正确的测试用实例。

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