Angulaire 5 service à défaut de passer des tests unitaires avec (NullInjectorError: Pas de fournisseur pour HttpClient!)

J'obtiens les erreurs suivantes lors de l'exécution des tests unitaires

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

Je ne comprends pas ce qui ne va pas comme je l'ai inclus HttpClient dans l'api.service.ts, le service fonctionne dans le navigateur.

C'est directement appelé dans un composant appelé MapComponent, et qui est appelée à l'intérieur d'HomeComponent.

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!

OriginalL'auteur | 2018-02-01

  1. 26

    J'ai été confrontée à des "NullInjectorError: Pas de fournisseur pour HttpClient!" question de. Après l'application de toutes les options disponibles suggéré en ligne, aucun n'a fonctionné pour mon angulaire de tests unitaires.

    Enfin ajouter le dessous de la pièce dans mon .service.spec.fichier ts correction du problème.

      imports: [
        HttpClientModule,
    ],
    Fonctionne comme un charme.
    N'oubliez pas de faire le même changement dans l'app.le module.ts (Angulaire 5 contexte).

    OriginalL'auteur JP07

  2. 6

    Essayer d'emballage de votre inject dans un async, comme ci-dessous:

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

});

    N'oubliez pas d'importer async de @angular/core/testing.

    J'ai eu un bon succès avec ce. C'est la seule différente de vos tests unitaires et la mine où je utiliser HttpClientTestingModule.

    Quelle est l'idée derrière cela?
    Cela peut répondre à ta question: angulaire.io/guide/test#async-test-avec-async
    Ayant le même problème et cela ne semble pas aider.... :/
    Voir this pour une réponse plus complète à voir si cela aide.

    OriginalL'auteur R. Richards