Angular 进行 http 调用时测试失败

Question

这是我的 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 调用时：

添加 http 调用后的

dashboard.component.ts 文件：

import { Post } from "./../models/post";
import { PostService } from "./../services/posts-api.service";
import { Component, OnInit } from "@angular/core";

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

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

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

  ngOnInit() {
    this.postService.getPosts().subscribe(posts => {
      this.posts = posts;
    });
  }
}

http调用成功了，现在测试失败了，为什么？没有变化的规范文件：

NullInjectorError: StaticInjectorError(DynamicTestModule)[HttpClient]: StaticInjectorError（平台：核心）[HttpClient]： NullInjectorError: 没有 HttpClient 的提供者！

谢谢。

Answer 1

您不需要将 HttpClientTestingModule 添加到您的规范文件中，因为您使用 HttpClient 本身注入了 Post 服务：

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

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

Angular 进行 http 调用时测试失败

Angular test failure when I make http call

karma-jasmine

angular