Angular 单元测试 NullInjectorError：没有 HttpClient 的提供者！错误

Posted 2023-03-31

【中文标题】Angular 单元测试 NullInjectorError：没有 HttpClient 的提供者！错误

【英文标题】：Angular Unit Tests NullInjectorError: No provider for HttpClient! Error

【发布时间】：2020-05-08 10:47:08

【问题描述】：

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

但是在运行 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  

我也检查过，“imports”总是在“providers”之前，但仍然没有运气。

我还阅读了（并测试了）关于该主题的所有 Github 和 *** 帖子，但由于我在那里没有运气，我再次问这个问题。

提前致谢

【问题讨论】：

尝试在测试中导入HttpClientTestingModule，不要与HttpClientModule混淆

@MikeS。正如您在我的代码中看到的，我已经这样做了。或者你会改变什么？我也尝试直接导入这个模块。但没有运气。

【参考方案1】：

我也刚开始使用 Angular 并遇到了同样的问题。当您的组件/服务使用HttpClientModule 时，您似乎需要在beforeEach 函数中导入HttpClientTestingModule。

这是一个名为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();
  );
);

注意每个beforeEach 函数中的imports 部分。

【参考方案2】：

尝试将 HttpClientModule 添加到提供者