NullInjectorError: Нет поставщика для HttpTestingController! во время теста angular

Question

Я получил эту ошибку, когда я пытался протестировать свой сервис, я сделал все как в этом учебнике

          NullInjectorError: No provider for HttpTestingController!
        error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'HttpTestingController', 'HttpTestingController' ] })
            at <Jasmine>
            at NullInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:1076:1)
            at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:16629:1)
            at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:16629:1)
            at NgModuleRef$1.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:36024:1)
            at TestBedRender3.inject (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:3111:53)
            at Function.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:3005:1)
            at UserContext.beforeEach (http://localhost:9876/_karma_webpack_/src/app/services/weatherService/weather.service.spec.ts:18:24)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1)
            at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist

weatherDto

export class WeatherDto {
    name: String;
    weather: String;
    weatherIcon: String;
    temp: Number;
    pressure: Number;
    minTemp: Number;
    maxTemp: Number;
}

метеослужба

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { WeatherDto } from 'src/app/models/weather-dto.model';


@Injectable({
  providedIn: 'root'
})
export class WeatherService {
  requestUrl = environment.baseUrl + environment.weatherUrl;
  token = environment.token;

  constructor(private http: HttpClient) { }

  getWeather(): Observable<WeatherDto> {
    var header = {
      headers: new HttpHeaders()
        .set('Authorization', `Bearer ${this.token}`)
        .set('Content-Type', 'application/json')

    }
    return this.http.get<WeatherDto>(this.requestUrl, header);
  }
}

тест

import { TestBed } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http';
import { HttpTestingController } from '@angular/common/http/testing';

import { WeatherService } from './weather.service';
import { WeatherDto } from 'src/app/models/weather-dto.model';

describe('WeatherService', () => {
  let service: WeatherService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientModule],
      providers: [WeatherService]
    }).compileComponents();
    service = TestBed.inject(WeatherService);
    httpMock = TestBed.get(HttpTestingController);
  });

  it('be able to retrieve weather from the API via GET', () => {
    const dummyWeather: WeatherDto = {
      name: 'City',
      weather: 'Clear',
      weatherIcon: '02d',
      temp: 20.0,
      pressure: 1024.0,
      minTemp: 18.0,
      maxTemp: 22.0
    };
    service.getWeather().subscribe(data => {
      expect(data.name).toEqual('City');

    });

    const request = httpMock.expectOne(`http://localhost:8080/api/weather`);
    expect(request.request.method).toBe('GET');
    request.flush(dummyWeather);

    afterEach(() => {
      httpMock.verify();
    });
  });
})

Так что я попал в мой весенний загрузочный API и получаю хороший ответ. Но когда я попытался протестировать этот сервис, я не могу, как это сделать. Что мне надоело, я тоже получил Chrome 71.0.3578 (Linux 0.0.0) WeatherComponent should create FAILED, но я удалил часть, ответственную за эту часть теста. У меня нет идей, что я делаю не так?!

Answer 1

У вас должно быть вот так:

  HttpClientTestingModule,
  HttpTestingController,
} from '@angular/common/http/testing';


beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [WeatherService]
    }).compileComponents();
    service = TestBed.inject(WeatherService);
    httpMock = TestBed.get(HttpTestingController);
  });