Angular 进行http调用时角度测试失败

这是我的dashboard.component.ts文件：

import { Post } from "./../models/post";
import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-dashboard",
  templateUrl: "./dashboard.component.html",
  styleUrls: ["./dashboard.component.css"]
})
export class DashboardComponent implements OnInit {
  constructor() {}

  title: string = "Hello World!";
  posts: Post[] = [];

  addNumber(a: number, b: number) {
    return a + b;
  }

  ngOnInit() {
  }
}

这是我的dashboard.component.spec.ts文件：

import { async, ComponentFixture, TestBed } from "@angular/core/testing";

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

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [DashboardComponent]
    }).compileComponents();
  }));

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

  it("should add two numbers", () => {
    expect(component.addNumber(1, 1)).toBe(2);
  });

  it("title should contain the word Hello", () => {
    expect(component.title).toContain("Hello");
  });
});

http调用成功，但现在测试失败，为什么？不作任何更改的等级库文件：

NullInjectorError:StaticInjectorError（DynamicTestModule）[HttpClient]： StaticInjectorError（平台：核心）[HttpClient]： NullInjectorError:HttpClient没有提供程序

---

谢谢。

您需要将

HttpClientTestingModule

添加到您的规范文件中，因为您使用HttpCient本身注入PostService：

import {HttpClientTestingModule} from "@angular/common/http/testing";

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

---

为什么？但是我根本不想测试服务，因为PostService是组件的构造函数的一部分，所以您需要解析它以使组件正常工作。但为了使您的后期服务也能正常工作，您还需要关心它自己的构造函数，其中包括HttpClient。这就是为什么在最后，您的测试需要包括HttpClientTestingModule。好的，非常感谢！

import {HttpClientTestingModule} from "@angular/common/http/testing";

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