Карма - NullInjectorError: нет поставщика для HttpClient

Я получаю NullInjectorError: No provider for HttpClient, когда запускаю свой тест.

Использование Angular 8 с Karma. Я следил за примерами и новичок в Карме. Так что не знаю, почему это происходит. Почему?

Большая часть того, что я прочитал, требует включения модуля httpclienttesting. Но, похоже, это не имеет значения.

введите описание изображения здесь

Мой компонент getHelpfulLinks -

 import { Component, OnInit } from '@angular/core';
 import { TkDataService } from '../tk-services/tk-data/tk-data.service';

 @Component({
   selector: 'app-tk-helpful-links',
   templateUrl: './tk-helpful-links.component.html',
   styleUrls: ['./tk-helpful-links.component.scss']
 })
 export class HelpfulLinksComponent implements OnInit {
    public res: {};

   getHelpfulLinks(): any {

     return this.dataSvc.get('gethelpfulLinks', {})
     .subscribe(res =>  {
      this.res = res;
   });

   }

 constructor(
   private dataSvc: TkDataService
   ) {
 }

    ngOnInit() {
     this.getHelpfulLinks();

   }
    }
 }

И мой файл .spec -

 import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
 import { HelpfulLinksComponent } from './tk-helpful-links.component';
 import { TkDataService } from '../tk-services/tk-data/tk-data.service';
 import { HttpClient} from '@angular/common/http';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import {HttpClientModule} from '@angular/common/http';

  describe('HelpfulLinksComponent', async() => {
   let component: HelpfulLinksComponent;
   let http: HttpClient;
   let mockTkDataService = new TkDataService(http);
   let httpTestingController: HttpTestingController;
   let fixture;

   beforeEach(async () => {
     fixture = TestBed.createComponent(HelpfulLinksComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

     TestBed.configureTestingModule({
       declarations: [ HelpfulLinksComponent ],
       imports: [ HttpClientTestingModule ],
     })
    .overrideComponent(HelpfulLinksComponent, {
       set: {
         providers: [
           { provide: TkDataService, useValue: mockTkDataService }
         ]
       }
     })
     .compileComponents();

     httpTestingController = TestBed.get(HttpTestingController);
     component = TestBed.get(mockTkDataService);

     afterEach(() => {
       httpTestingController.verify();
     });
   });
   it('HelpfulLinksComponent should be created',  () => {
     expect(component).toBeTruthy();
   });
 });

Мой файл TKDataService (частичный) -

 export class TkDataService {
constructor(
    private http: HttpClient
    ) {

    }

get(route: string, data: any, responseType?): Observable<any[]>{
    const observe = responseType === 'blob' ? 'response' : 'body';
    let requestHeaders = new HttpHeaders();
         requestHeaders = requestHeaders.set('Authorization', localStorage.getItem('bearerToken'));
    // tslint:disable-next-line: max-line-length
    return this.http.get<any[]>(environment.baseAPIUrl + route,
       {withCredentials: false, headers: requestHeaders, responseType, observe: observe as 'body'} );

}
}

person Chris    schedule 17.05.2020    source источник


Ответы (1)


Краткий ответ:

Вы передаете нулевое значение httpClient в mockTkDataService в этой строке:

let http: HttpClient;
let mockTkDataService = new TkDataService(http);

Что вам следует делать:

Вам вообще не нужно издеваться над TkDataService. HttpClientTestingModule разрешит httpClient внутри него.

Просто добавьте исходный TkDataService в массив провайдеров в конфигурации тестового стенда следующим образом:

TestBed.configureTestingModule({
       declarations: [ HelpfulLinksComponent ],
       imports: [ HttpClientTestingModule ],
       providers: [ TkDataService ]
     })

и использовать его позже следующим образом:

const tkDataService = getTestBed().get(TkDataService)


httpService.get<any>(dummyUrl, dummyTelemetryAction).subscribe(
            (response: HttpResponse<any>) => {
                expect(response).toBeTruthy();
}

const req1 = httpMock.expectOne(dummyUrl);

req1.flush(null, { status: 200, statusText: 'ok' });

person Raz Ronen    schedule 17.05.2020
comment
Это замечательно! Работал над этим некоторое время. Спасибо, Раз! - person Chris; 19.05.2020