Karma - NullInjectorError: 没有HttpClient的提供者

Question

我得到NullInjectorError.当我运行测试时，没有HttpClient的提供者。当我运行测试时，没有HttpClient的提供者。

使用Angular 8和Karma。 我遵循的例子和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();

   }
    }
 }

而我的.规格文件-

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

}
}

Answer 1

简答。

你传递的是一个空值 httpClient 到 mockTkDataService 在这些行。

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

你应该怎么做。

你不需要嘲笑 TkDataService 根本没有。HttpClientTestingModule 将解决 httpClient 里面的。

只要把原来的 TkDataService 到测试床配置中的 providers 数组，就像这样。

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