为什么我收到此错误：NullInjectorError：R3InjectorError（DynamicTestModule）[MedicoService？

Question

我正在学习有关角度测试的课程，并且尝试为具有服务的组件设置测试，并且该服务具有 httpClias 作为依赖项，但当我尝试运行它时出现此错误

\n

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

\n

我所拥有的就是这项服务（medicosService）

\n

import { HttpClient } from '@angular/common/http';\nimport { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class MedicoService {\n\n  constructor(public http: HttpClient) { }\n\n\n\n  getMedicos() {\n\n    return this.http.get('....');\n  }\n}\n

\n

和这个组件

\n

import { MedicoService } from './service/medico.service';\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-medico',\n  templateUrl: './medico.component.html',\n  styleUrls: ['./medico.component.css']\n})\nexport class MedicoComponent implements OnInit {\n\n  constructor(public medicoService: MedicoService) { }\n\n  medicos: any [] = []\n  ngOnInit(): void {\n  }\n\n  saludarMEdico(nombre: string): string {\n    return `hello ${nombre}`;\n  }\n\n\n  optenerMedicos() {\n    this.medicoService.getMedicos().subscribe((medicos: any []) => {\n      this.medicos = medicos;\n    })\n  }\n}\n

\n

这是测试

\n

import { MedicoService } from './service/medico.service';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\n/** El testbed es una clase con muchos metodos  para hacewr pruebas */\nimport { MedicoComponent } from './medico.component';\nimport { HttpClientModule } from '@angular/common/http';\n\n\ndescribe('MedicoComponent', () => {\n  let component: MedicoComponent;\n  let fixture: ComponentFixture<MedicoComponent>;\n\n  beforeEach(async () => {\n    await TestBed.configureTestingModule({\n      declarations: [MedicoComponent],\n      providers: [MedicoService],\n      imports:[HttpClientModule]\n    })\n    .compileComponents();\n  });\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(MedicoComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  //comprueba que el componente se cree\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n// verificacion alternativa si el componente se creo, tenemos acceso a sus metodos\n  it('should return a greeting based on the sent name', () => {\n    const name = 'Gerardo';\n    const greeting = component.saludarMEdico(name);\n    expect(greeting).toContain(name);\n  });\n\n});\n

\n

}

\n

我尝试在导入中使用 HttpClientTestingModule 而不是 HttpClientModule，但我有同样的错误，所以我不知道发生了什么。

\n

Answer 1

该错误来自您的服务测试，medico.service.spec.ts而不是来自组件测试。

在您的服务测试中尝试以下示例：

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

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