Angular Unit Tests NullInjectorError: No provider for HttpClient! Error

Question

I know that this question has been asked over and over. I was not able to find a solution which works. I'm currently adding unit tests to our project and thus fixing all auto generated ones.

But when running ng test, I get the following error:

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

Notice the -> HttpClient -> HttpClient.

When I first saw this, I thought it must be a circular dependency problem. Which led me to create a testing Testing Module, which i'm importing into my TestBed.

Here is a sample Test which fails.

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();
  });
});

And here is my "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 { }

I have also checked, that "imports" is always before "providers", but still no luck.

And i read also (and tested) all Github and Stackoverflow posts to this topic but since i had no luck there, i'm asking this question again.

Thanks in advance

Answer 1

I'm also just starting with Angular and encountered the same issue. It seems like you need to import HttpClientTestingModule in your beforeEach function when your component/service uses HttpClientModule.

Here is an example for a service called 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();
      });
    });

Here is an example for a component called 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();
  });
});

Notice the imports section in each beforeEach function.

Answer 2

Try to add HttpClientModule to providers