CODEWITHSUNDEEP
angularkarma-jasmineangular-test
Kingamere
Kingamere

Reputation: 10146

Angular 6 - NullInjectorError: No provider for HttpClient in unit tests

I am importing and using HttpClient in a service as follows:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
    providedIn: 'root',
})
export class MyService {
    constructor(private http: HttpClient) { }

    getData() {
        return this.http.get("url...");
    }
}

However, when I run ng test for my unit tests, and when those tests use the service, I am getting the error:

Error: StaticInjectorError(DynamicTestModule)[HttpClient]: 
  StaticInjectorError(Platform: core)[HttpClient]: 
    NullInjectorError: No provider for HttpClient!

The Angular 6 documentation on HTTP just says to do what I did above.

Upvotes: 92

Views: 178491

Answers (4)

Tony Brasunas
Tony Brasunas

Reputation: 4601

NOTE FOR ANGULAR 18+

Things have changed and you need to use provideHttpClientTesting() now.

The HttpClientTestingModule has been deprecated.

This should work now:

import { provideHttpClientTesting } from '@angular/common/http/testing';
import { provideHttpClient } from '@angular/common/http';

... 

TestBed.configureTestingModule({
  providers: [ provideHttpClient(), provideHttpClientTesting() ],
...
}).compileComponents();

Upvotes: 2

Derviş Kayımbaşıoğlu
Derviş Kayımbaşıoğlu

Reputation: 30665

you should add HttpClient into imports of your module where your component is declared

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: []
})
export class AppModule { }

UPDATE:

import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; must tbe included for unit testing

OPs question does not follow unit testing guidelines. HttpClientTestingModule must be imported in beforeEach

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

Basically, HttpClientTestingModule is injected in dataService for unit testing purposes that prevents StaticInjectorError

Upvotes: -1

The Dead Man
The Dead Man

Reputation: 5576

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import {HttpClientModule} from '@angular/common/http';
import { myService } from './myservice';


describe('myService', () => {

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

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

       it('should have getData function', () => {
        const service: myService = TestBed.get(myService);
        expect(service.getData).toBeTruthy();
       });

    });

Upvotes: 158

Sanka Sanjeeva
Sanka Sanjeeva

Reputation: 3560

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { myService } from './myservice';

describe('HeaderService', () => {
  beforeEach(() => TestBed.configureTestingModule({
    imports: [ HttpClientTestingModule ],
    providers: [myService]
  }));
});

Upvotes: 2

Related Questions