使用HTTPClient添加服务后测试失败 [英] Failing test after adding Service with HTTPClient

问题描述

当我将 BackendService 添加到我的 DashboardComponent的构造函数中时，我在测试中遇到了一个错误:

I'm stuck at this problem where I get an error in my test when I add my BackendService to my DashboardComponent's contructor:

错误:StaticInjectorError(DynamicTestModule)[BackendService-> HttpClient]: StaticInjectorError(Platform:core)[BackendService-> HttpClient]:

Error: StaticInjectorError(DynamicTestModule)[BackendService -> HttpClient]: StaticInjectorError(Platform: core)[BackendService -> HttpClient]:

NullInjectorError:没有HttpClient的提供程序！

NullInjectorError: No provider for HttpClient!

我在其中拥有 backend.service.ts :

  1 import { Injectable } from '@angular/core';
  2 import { HttpClient } from '@angular/common/http';
  3 import { Observable } from 'rxjs';
  4 import { environment } from '../environments/environment';
  5 
  6 @Injectable({
  7   providedIn: 'root'
  8 })  
  9 export class BackendService {
 10 
 11   constructor(private http: HttpClient) { }
 12 
 13   getUsers() : Observable<any> {
 14     return this.http.get<any>(`${environment.api}/api/users`);
 15   }   
 16 
 17 }

backend.service.spec.ts 是这样的:

 1 import { TestBed, inject, async } from '@angular/core/testing';
  2 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
  3 import { environment } from '../environments/environment';
  4 
  5 import { BackendService } from './backend.service';
  6 
  7 describe('BackendService', () => {
  8   let service : BackendService;
  9   let backend : HttpTestingController;
 10   
 11   beforeEach(() => {
 12     TestBed.configureTestingModule({
 13       imports : [HttpClientTestingModule],
 14       providers: [BackendService]
 15     });
 16   });
 17   
 18   it('should be created', inject([HttpTestingController, BackendService], (backend: HttpTestingController, service: BackendService) => {
 19     expect(service).toBeTruthy();
 20   }));
 21   
 22   it('should get users', inject([HttpTestingController, BackendService], (backend: HttpTestingController, service: BackendService) => {
 23     service.getUsers().subscribe();
 24     const req = backend.expectOne(`http://localhost:4000/api/users`);
 25     expect(req.request.method).toEqual('GET');
 26     backend.verify();
 27   }));
 28 });

我的 DashboardComponent

  1 import { Component, OnInit } from '@angular/core';
  2 import { BackendService } from '../backend.service';
  3 
  4 @Component({
  5   selector: 'app-dashboard',
  6   templateUrl: './dashboard.component.html',
  7   styleUrls: ['./dashboard.component.css']
  8 })  
  9 export class DashboardComponent implements OnInit {
 10       
 11   constructor(private backend : BackendService) { } // This makes the  error
 12   
 13   ngOnInit() {
 14   }
 15     
 16 } 

dashboard.component.spec.ts

  1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 import { DashboardComponent } from './dashboard.component';
  3 
  4 describe('DashboardComponent', () => {
  5   let component: DashboardComponent;
  6   let fixture: ComponentFixture<DashboardComponent>;
  7 
  8   beforeEach(async(() => {
  9     TestBed.configureTestingModule({
 10       declarations: [ DashboardComponent ]
 11     })
 12     .compileComponents();
 13   }));
 14 
 15   beforeEach(() => {
 16     fixture = TestBed.createComponent(DashboardComponent);
 17     component = fixture.componentInstance;
 18     fixture.detectChanges();
 19   });
 20 
 21   it('should create', () => {
 22     expect(component).toBeTruthy();
 23   });
 24 });

这是我的 app.moudule.ts

    1 import { BrowserModule } from '@angular/platform-browser';
    2 import { NgModule } from '@angular/core';
    3 import { HttpClientModule, HttpClient } from '@angular/common/http';
    4 
    5 import { AppRoutingModule, routingComponents } from './app-routing.module';
    6 import { AppComponent } from './app.component';
    7 
    8 @NgModule({
    9   declarations: [
   10     AppComponent,
   11     routingComponents
   12   ],
   13   imports: [
   14     BrowserModule,
   15     HttpClientModule,
   16     AppRoutingModule
   17   ],
   18   providers: [],
   19   bootstrap: [AppComponent]
   20 })
   21 export class AppModule { }
                                      

推荐答案

这是您的 dashboard.component.spec.ts 最后的外观.

import { BackendService } from './../backend.service';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientTestingModule } from '@angular/common/http/testing';

import { DashboardComponent } from './dashboard.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DashboardComponent ],
      providers: [BackendService],
      imports: [HttpClientModule, HttpClientTestingModule]
    })
    .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

由于组件依赖于服务，而服务又依赖于HttpClient，因此您需要导入Angular可用的HttpClient测试模块.然后，您需要在TestBed.configureTestingModule调用中将这些内容添加到providers和imports数组中.这使所有HttpClient内容都可用于所需的服务.

Since the component depends on a service, which in turn depends on the HttpClient, you need to import the HttpClient testing modules that Angular makes available. Then, you need to add those things to the providers and imports arrays in the TestBed.configureTestingModule call. This makes all the HttpClient stuff available to the service you need.

我刚刚对此进行了编码，测试，然后测试成功.

I just coded this, tested it, and the tests succeeded.

相同的模式适用于组件依赖于使用HttpClient的服务的任何组件规格.

This same pattern would apply to any component specs where the component depends on services that use HttpClient.

这篇关于使用HTTPClient添加服务后测试失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！