Angular 18中HttpClientTestingModule弃用后的正确替代方案

首先明确：provideHttpClientTesting() 是替代 HttpClientTestingModule 的官方推荐方式，但它仅提供测试相关的拦截器和工具，不会自动提供 HttpClient 的底层依赖。你遇到的 NullInjectorError 就是因为缺少 HttpClient 的提供者。

正确的配置需要同时提供两个方法：

• provideHttpClient()：提供基础的 HttpClient 实例，这是所有 HTTP 相关服务的核心依赖
• provideHttpClientTesting()：添加测试用拦截器（如 HttpTestingController），用于模拟 HTTP 请求与响应

具体代码示例 #

import { TestBed } from '@angular/core/testing';
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
import { InventoryActionService } from './inventory-action.service';

describe('InventoryActionService', () => {
  let service: InventoryActionService;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        provideHttpClient(), // 核心：提供 HttpClient 实例
        provideHttpClientTesting() // 提供测试所需的拦截器和控制器
      ]
    });
    service = TestBed.inject(InventoryActionService);
    httpTestingController = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    httpTestingController.verify(); // 验证所有模拟请求都已被处理
  });

  it('should fetch asset details correctly', () => {
    const mockResponse = { id: 1, name: 'Test Asset' };
    service.getAssetDetails(1).subscribe(data => {
      expect(data).toEqual(mockResponse);
    });

    const req = httpTestingController.expectOne('/api/assets/1');
    expect(req.request.method).toBe('GET');
    req.flush(mockResponse);
  });
});

为什么不能只使用 provideHttpClient()？ #

单独用 provideHttpClient() 确实能让测试运行，但这会允许真实的 HTTP 请求发送出去（若未手动拦截），违背了单元测试隔离外部依赖的原则。provideHttpClientTesting() 会自动注入测试专用拦截器，让你可以完全模拟请求和响应，确保测试的独立性与稳定性。

总结 #

• 必须同时配置 provideHttpClient() 和 provideHttpClientTesting()，前者提供核心依赖，后者提供测试能力
• 不要单独使用 provideHttpClient() 进行单元测试，否则无法隔离真实 HTTP 请求

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