为什么我收到这个错误：NullInjectorError: R3InjectorError(DynamicTestModule)[MedicoService?

Question

I'm taking a course about angular testing and I trying to setup a test for a componet with a service and this service has the httpClias as depedency but I got this error when I tried to run it

NullInjectorError: R3InjectorError(DynamicTestModule)[MedicoService -> HttpClient -> HttpClient]:
          NullInjectorError: No provider for HttpClient!
        error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'MedicoService', 'HttpClient', 'HttpClient' ] })
        NullInjectorError: R3InjectorError(DynamicTestModule)[MedicoService -> HttpClient -> HttpClient]:
          NullInjectorError: No provider for HttpClient!
            at NullInjector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10756:1)
            at R3Injector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10923:1)
            at R3Injector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10923:1)
            at injectInjectorOnly (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2290:1)
            at ɵɵinject (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2294:1)
            at Object.MedicoService_Factory [as factory] (ng:///MedicoService/ɵfac.js:5:41)
            at R3Injector.hydrate (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11091:1)
            at R3Injector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10912:1)
            at NgModuleRef$1.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:24988:1)
            at TestBedRender3.inject (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1943:1)
        Error: Expected undefined to be truthy.
            at <Jasmine>
            at UserContext.<anonymous> (src/app/intemedio2/medico/service/medico.service.spec.ts:14:21)
            at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:364:1)
            at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:292:1)
Chrome 86.0.4240.198 (Windows 10): Executed 1 of 28 (1 FAILED) (0 secs / 0.119 secs)
Chrome 86.0.4240.198 (Windows 10) MedicoService should be created FAILED
        NullInjectorError: R3InjectorError(DynamicTestModule)[MedicoService -> HttpClient -> HttpClient]:
          NullInjectorError: No provider for HttpClient!
        error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'MedicoService', 'HttpClient', 'HttpClient' ] })
        NullInjectorError: R3InjectorError(DynamicTestModule)[MedicoService -> HttpClient -> HttpClient]:
          NullInjectorError: No provider for HttpClient!
            at NullInjector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10756:1)
            at R3Injector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10923:1)
            at R3Injector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10923:1)
            at injectInjectorOnly (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2290:1)
            at ɵɵinject (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2294:1)
            at Object.MedicoService_Factory [as factory] (ng:///MedicoService/ɵfac.js:5:41)
            at R3Injector.hydrate (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11091:1)
            at R3Injector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10912:1)
            at NgModuleRef$1.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:24988:1)
            at TestBedRender3.inject (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1943:1)
        Error: Expected undefined to be truthy.
            at <Jasmine>
            at UserContext.<anonymous> (src/app/intemedio2/medico/service/medico.service.spec.ts:14:21)
            at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:364:1)
Chrome 86.0.4240.198 (Windows 10): Executed 26 of 28 (1 FAILED) (skipped 2) (0.382 secs / 0.316 secs)

All thaI have is this service (medicosService)

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MedicoService {

  constructor(public http: HttpClient) { }



  getMedicos() {

    return this.http.get('....');
  }
}

and this component

import { MedicoService } from './service/medico.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-medico',
  templateUrl: './medico.component.html',
  styleUrls: ['./medico.component.css']
})
export class MedicoComponent implements OnInit {

  constructor(public medicoService: MedicoService) { }

  medicos: any [] = []
  ngOnInit(): void {
  }

  saludarMEdico(nombre: string): string {
    return `hello ${nombre}`;
  }


  optenerMedicos() {
    this.medicoService.getMedicos().subscribe((medicos: any []) => {
      this.medicos = medicos;
    })
  }
}

and this is the test

import { MedicoService } from './service/medico.service';
import { ComponentFixture, TestBed } from '@angular/core/testing';
/** El testbed es una clase con muchos metodos  para hacewr pruebas */
import { MedicoComponent } from './medico.component';
import { HttpClientModule } from '@angular/common/http';


describe('MedicoComponent', () => {
  let component: MedicoComponent;
  let fixture: ComponentFixture<MedicoComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MedicoComponent],
      providers: [MedicoService],
      imports:[HttpClientModule]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MedicoComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  //comprueba que el componente se cree
  it('should create', () => {
    expect(component).toBeTruthy();
  });
// verificacion alternativa si el componente se creo, tenemos acceso a sus metodos
  it('should return a greeting based on the sent name', () => {
    const name = 'Gerardo';
    const greeting = component.saludarMEdico(name);
    expect(greeting).toContain(name);
  });

});

}

I've tried to use HttpClientTestingModule instead of HttpClientModule in the imports but I have the same error so, I dont know what is going on.

Answer 1

The error comes from your service test medico.service.spec.ts not from your component test.

Try for example this in your service test:

describe('YourService', () => {
  beforeEach(() => TestBed.configureTestingModule({
    imports: [HttpClientTestingModule]
  }));

  it('should be created', () => {
    const service: YourService = TestBed.get(YourService);
    expect(service).toBeTruthy();
  });
});