Question

我今天一直在尝试对基本服务进行单元测试，并且我一直收到此错误： Error: StaticInjectorError[HttpClient]: StaticInjectorError[HttpClient]: NullInjectorError: No provider for HttpClient! "Error: StaticInjectorError".

我一直在搜索SO和Google的答案，我发现所有人都建议将HttpClient添加到测试床的导入部分。

当我将HttpClient添加到我的测试床的导入部分时，我收到此错误：Error: Unexpected value 'HttpClient' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.

以下是我的代码

单元测试文件：

import { VisitsIngestedService } from '../../../xxxx.App/src/app/Services/GetVisitsIngestedService';
import { HttpModule, BaseRequestOptions } from '../../../xxxx.App/node_modules/@angular/http';
import { MockBackend } from '@angular/http/testing';
import { JsonpModule } from '@angular/http';
import { Jsonp } from '@angular/http';
import { TestBed, getTestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HttpClient } from '@angular/common/http';


describe('VisitsIngestedService', () => {
  let injector: TestBed;
  let service: VisitsIngestedService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [VisitsIngestedService]
    });
    injector = getTestBed();
    service = injector.get(VisitsIngestedService);
    httpMock = injector.get(HttpTestingController);
  });

  describe('#getVisits', () => {
    it('should return an Observable<Vists[]>', () => {
      const dummyVisits = [
        { login: 'John' },
        { login: 'Doe' }
      ];

      service.getVisitsIngested("faketen", "fakedate1", "fakedate2").subscribe(visits => {
        expect(visits.length).toBe(2);
        expect(visits).toEqual(dummyVisits);
      });
    });
  });
});

服务档案：

import { Injectable } from '@angular/core';
import { Visit } from '../Models/Visit';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { HttpClient, HttpParams } from '@angular/common/http';


@Injectable()
export class VisitsIngestedService {

  constructor(private _httpService: HttpClient) { }

  public getVisitsIngested(tenant: string, start: string, end: string): Observable<any> {
    return this._httpService.get('/api/appInsights/query/' + tenant + '/' + start + '/' + end);
  }

}

App.module.ts文件：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClient } from '@angular/common/http';
import { VisitsIngestedService } from '../../../../CloudMedOps.App/src/app/Services/GetVisitsIngestedService';



@NgModule({
  imports: [BrowserModule, FormsModule, MatFormFieldModule, MatInputModule, BrowserAnimationsModule, HttpClient],
  providers: [VisitsIngestedService, HttpClient],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

我是Angular的新手并且会对任何帮助表示赞赏。谢谢！

Answer 1

您需要导入

import { HttpClientModule } from '@angular/common/http';

和内部进口

@NgModule({
  imports: [BrowserModule, FormsModule, MatFormFieldModule, MatInputModule, BrowserAnimationsModule, HttpClientModule],
  providers: [VisitsIngestedService],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

NullInjectorError：没有HttpClient的提供者！单元测试服务

1 个答案: