Website-Suche

Angular 5-Dienst schlägt fehl beim Bestehen von Unit-Tests mit (NullInjectorError: Kein Anbieter für HttpClient!)

Ich bekomme beim Ausführen von Unit-Tests ständig die folgenden Fehler

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

api.service.ts

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

@Injectable()
export class ApiService {

  constructor(private http: HttpClient) { }
  url = './assets/data.json';

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

api.service.spec.ts

import { TestBed, inject } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

import { ApiService } from './api.service';

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

  it('should get users', inject([HttpTestingController, ApiService],
      (httpMock: HttpTestingController, apiService: ApiService) => {
        expect(apiService).toBeTruthy();
      }
    )
  );
});

Ich verstehe nicht, was schiefläuft, da ich HttpClient in api.service.ts eingebunden habe, der Dienst funktioniert im Browser.

Dies wird direkt in einer Komponente namens MapComponent aufgerufen, und das wird innerhalb von HomeComponent aufgerufen.

Chrome 63.0.3239 (Mac OS X 10.13.3) HomeComponent expect opened to be false FAILED
    Error: StaticInjectorError(DynamicTestModule)[ApiService -> HttpClient]: 
      StaticInjectorError(Platform: core)[ApiService -> HttpClient]: 
        NullInjectorError: No provider for HttpClient!

Antwort #1

Der Grund für "NullInjectorError: Kein Anbieter für HttpClient!" sind nicht aufgelöste Abhängigkeiten. In diesem Fall das Fehlen eines HttpClientModule.

Fügen Sie in Ihrer .service.spec.ts-Datei hinzu

  imports: [
        HttpClientTestingModule,
    ],

Sie könnten bemerken, dass ich HttpClientTestingModule anstelle von HttpClientModule geschrieben habe. Der Grund ist, dass wir keine tatsächlichen HTTP-Anfragen senden wollen, sondern eine Mock-API des Testframeworks verwenden möchten.

Antwort #2

füge es einfach so hinzu,

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientModule,
      ],
    }).compileComponents();
  });

Antwort #3

Versuchen Sie, Ihr inject in ein async einzuwickeln, wie unten:

import { TestBed, async, inject } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { ApiService } from './api.service';

describe('ApiService', () => {
    beforeEach(() => {
      ...
    });    

  it(`should create`, async(inject([HttpTestingController, ApiService],
    (httpClient: HttpTestingController, apiService: ApiService) => {
      expect(apiService).toBeTruthy();
  })));

});

Vergessen Sie nicht, async von @angular/core/testing zu importieren.

Ich habe damit gute Erfolge gehabt. Es ist der einzige Unterschied zwischen deinen Unit-Tests und meinen, bei denen ich HttpClientTestingModule verwende.

Verwandte Artikel