Angular 单元测试 NullInjectorError : No provider for HttpClient! 错误

Question

我知道这个问题已经被问过一遍又一遍。我找不到有效的解决方案。我目前正在向我们的项目添加单元测试，从而修复所有自动生成的测试。

但是在运行 ng test 时，出现以下错误:

NullInjectorError: R3InjectorError(DynamicTestModule)[Service -> HttpClient -> HttpClient]: 
NullInjectorError: No provider for HttpClient!

注意 -> HttpClient -> HttpClient。

刚开始看到这个的时候，还以为是循环依赖问题。这导致我创建了一个测试测试模块，我将其导入到我的 TestBed 中。

这是一个失败的示例测试。

import {  TestBed } from '@angular/core/testing';

import { SearchListService } from './search-list.service';
import { ServiceTestingModule } from '@app/testing/service.testing.module';
import { ZhwKnowledgeJourneyService } from '@bkh/services/zhw-knowledge-journey.service';


describe('ZhwKnowledgeJourneyService', () => {

  beforeEach(() => TestBed.configureTestingModule({
    imports: [ServiceTestingModule],
    providers: [SearchListService]
  }));

  it('should be created', () => {
    const service: ZhwKnowledgeJourneyService = TestBed.inject(ZhwKnowledgeJourneyService);
    expect(service).toBeTruthy();
  });
});

这是我的“ServiceTestingModule”

import { NgModule } from '@angular/core';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { CommonModule } from '@angular/common';
import {  HttpClientModule } from '@angular/common/http';



@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    HttpClientTestingModule,
  ],
  declarations: [],
  providers: [],
  exports: [HttpClientModule, HttpClientTestingModule]
})
export class ServiceTestingModule { }

我也检查过，“进口”总是在“提供者”之前，但仍然没有运气。

我也阅读(并测试)了所有关于这个主题的 Github 和 Stackoverflow 帖子，但由于我在那里没有运气，我再次问这个问题。

提前致谢

Answer 1

我也刚开始使用 Angular 并遇到了同样的问题。看来您需要导入 HttpClientTestingModule在您的 beforeEach当您的组件/服务使用时的函数 HttpClientModule .
这是一个名为 SituationService 的服务的示例。

    import { TestBed } from '@angular/core/testing';
    import { SituationService } from './situation.service';
    import {HttpClientTestingModule} from '@angular/common/http/testing';
    
    describe('SituationService', () => {
      let service: SituationService;
    
      beforeEach(async () => {
        await TestBed.configureTestingModule({
        imports: [
          HttpClientTestingModule
        ]});
    
        TestBed.configureTestingModule({});
        service = TestBed.inject(SituationService);
      });
    
      it('should be created', () => {
        expect(service).toBeTruthy();
      });
    });

这是一个名为 Situation 的组件的示例。

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SituationComponent } from './situation.component';
import {HttpClientTestingModule} from '@angular/common/http/testing';

describe('SituationComponent', () => {
  let component: SituationComponent;
  let fixture: ComponentFixture<SituationComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ SituationComponent ],
      imports: [
        HttpClientTestingModule
      ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(SituationComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

注意 imports每个部分 beforeEach功能。