Angular使用Karma和Jasmine跑单元测试时出现http.get is not a function错误

排查步骤 #

• 第一步：检查测试用例的TestBed配置是否引入了HttpClientTestingModule
  生产环境启动时AppModule会引入HttpClientModule提供HttpClient实例，单元测试默认不会加载全局模块，需要手动在测试配置的imports数组加入HttpClientTestingModule，参考配置示例：

  import { TestBed } from '@angular/core/testing';
  import { HttpClientTestingModule } from '@angular/common/http/testing';
  import { YourTargetService } from './your-target.service';
  
  describe('YourTargetService', () => {
    let service: YourTargetService;
  
    beforeEach(() => {
      TestBed.configureTestingModule({
        imports: [HttpClientTestingModule], // 必须添加该行
        providers: [YourTargetService]
      });
      service = TestBed.inject(YourTargetService);
    });
  });
  

• 第二步：检查HttpClient的导入路径是否正确
  禁止从已废弃的@angular/http包导入，必须使用import { HttpClient } from '@angular/common/http';路径导入。
• 第三步：排查自定义HttpClient mock的完整性
  如果你手动配置了HttpClient的mock实例，需要确认mock对象已经实现了业务用到的get方法，示例正确mock写法：

  const mockHttpClient = {
    get: jasmine.createSpy('get').and.returnValue(of({ mockData: {} })),
    // 其他用到的post/put等方法也一并补全
    post: jasmine.createSpy('post')
  }
  // TestBed配置中注册mock
  // providers: [{ provide: HttpClient, useValue: mockHttpClient }]
  

• 第四步：清理依赖缓存重试
  上述配置都正常的情况下，删除node_modules文件夹和package-lock.json文件，再执行npm install重装依赖后重新运行测试。

内容的提问来源于stack exchange，提问作者Landry Manankoraisina RASENDRA