如何结合HttpClient与HttpClientModule使用NgProgress？单元测试报错求修复

我之前升级HttpClientModule后也碰到过一模一样的情况——功能跑起来完全正常，但单元测试直接报NullInjectorError: No provider for NgProgress!，其实核心原因就是单元测试的TestBed上下文是完全独立的，和应用模块的依赖配置不共享，下面给你几个可行的修复方案：

方案1：在测试模块中显式提供NgProgress依赖 #

如果只是想快速让测试跑通，可以直接在TestBed的providers数组里添加NgProgress，或者导入它的模块（如果是通过模块配置的话）：

情况A：直接提供NgProgress实例 #

import { NgProgress } from 'ngx-progressbar';
import { HttpClientTestingModule } from '@angular/common/http/testing';

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [HttpClientTestingModule], // 测试环境一定要用这个替代HttpClientModule
    providers: [NgProgress] // 这里显式添加NgProgress的提供者
  }).compileComponents();
}));

情况B：如果NgProgress是通过模块配置的（比如用了NgProgressModule.forRoot()） #

那直接在测试模块的imports里导入配置好的模块即可：

import { NgProgressModule } from 'ngx-progressbar';
import { HttpClientTestingModule } from '@angular/common/http/testing';

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      HttpClientTestingModule,
      NgProgressModule.forRoot() // 和应用模块保持一致的配置
    ]
  }).compileComponents();
}));

方案2：用Mock对象替代真实的NgProgress（更推荐的单元测试做法） #

单元测试的核心是隔离依赖，我们不需要真的启动NgProgress的实例，用Jasmine或Jest的mock对象模拟它的方法就行，还能顺便验证方法是否被正确调用：

import { NgProgress } from 'ngx-progressbar';
import { HttpClientTestingModule } from '@angular/common/http/testing';

// 创建一个mock对象，模拟NgProgress常用的方法
const mockNgProgress = jasmine.createSpyObj('NgProgress', ['start', 'complete', 'set']);

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [HttpClientTestingModule],
    providers: [
      { provide: NgProgress, useValue: mockNgProgress } // 用mock替代真实实例
    ]
  }).compileComponents();
}));

// 示例：验证HTTP请求触发时是否调用了NgProgress的start方法
it('should trigger progress bar on HTTP request', () => {
  // 执行你的组件逻辑，触发HTTP请求
  yourComponent.fetchData();
  
  // 验证mock的start方法被调用
  expect(mockNgProgress.start).toHaveBeenCalled();
});

为什么功能正常但测试报错？ #

因为你的应用模块里已经正确导入了NgProgress的模块或配置了提供者，所以运行时能找到依赖；但单元测试的TestBed是一个全新的测试上下文，不会自动继承应用模块的配置，必须手动声明所有需要的依赖。

内容的提问来源于stack exchange，提问作者k.vincent