Angular 2 错误 : No provider for Http in Karma-Jasmine Test

Question

我的 karma 测试中不断出现以下错误，即使我的应用程序运行完美且没有错误。就是说没有Http的provider。我在我的 app.module.ts 文件中使用 import { HttpModule } from '@angular/http'; 并将其添加到导入数组中。 karma 错误如下所示:

Chrome 52.0.2743 (Mac OS X 10.12.0) App: TrackBudget should create the app FAILED
    Failed: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for Http!
    Error: No provider for Http!
        at NoProviderError.Error (native)
        at NoProviderError.BaseError [as constructor] (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/facade/errors.js:24:0 <- src/test.ts:2559:34)
        at NoProviderError.AbstractProviderError [as constructor] (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_errors.js:42:0 <- src/test.ts:15415:16)
        at new NoProviderError (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_errors.js:73:0 <- src/test.ts:15446:16)
        at ReflectiveInjector_._throwOrNull (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_injector.js:761:0 <- src/test.ts:26066:19)
        at ReflectiveInjector_._getByKeyDefault (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_injector.js:789:0 <- src/test.ts:26094:25)
        at ReflectiveInjector_._getByKey (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_injector.js:752:0 <- src/test.ts:26057:25)
        at ReflectiveInjector_.get (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_injector.js:561:0 <- src/test.ts:25866:21)
        at TestBed.get (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/bundles/core-testing.umd.js:1115:0 <- src/test.ts:5626:67)
Chrome 52.0.2743 (Mac OS X 10.12.0): Executed 1 of 1 (1 FAILED) ERROR (0.229 secs / 0.174 secs)

这是我的 app.component.ts 文件:

import {Component} from '@angular/core';
import {Budget} from "./budget";
import {BudgetService} from "./budget.service";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [BudgetService]
})
export class AppComponent {
    title = 'Budget Tracker';

    budgets: Budget[];
    selectedBudget: Budget;

    constructor(private budgetService: BudgetService) { }

    ngOnInit(): void {
        this.budgetService.getBudgets()
            .subscribe(data => {
                this.budgets = data;
                console.log(data);
                this.selectedBudget = data[0];
                console.log(data[0]);
            });
    }
}

这是我的简单规范:

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('App: TrackBudget', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
        declarations: [
            AppComponent
        ]
    });
  });

  it('should create the app', async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    let app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

这个错误好像是我的服务引起的，可以看这里:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import {Budget} from "./budget";

@Injectable()
export class BudgetService {

  constructor(public http: Http) { }

  getBudgets() {
    return this.http.get('budget.json')
        .map(response => <Budget[]>response.json().budgetData);

  }
}

如果我从服务中删除 constructor(public http: Http) { } 语句，测试可以正常通过，但应用程序在浏览器中失败。我对此进行了大量研究，但未能找到解决方案。任何帮助将不胜感激!!

Answer 1

TestBed 的目的是为测试环境配置@NgModule 从头开始。因此，目前您配置的只是 AppComponent，什么都没有(除了已经在 @Component.providers 中声明的服务。 p>

不过，我强烈建议您不要像在真实环境中那样尝试配置所有内容，而只是模拟 BudgetService。尝试配置 Http 并模拟它并不是最好的主意，因为您希望在单元测试时尽可能保持外部依赖性。

这是你需要做的

1. 为 BudgetService 创建一个模拟。我会查看 this post .您可以只扩展该抽象类，添加您的 getBudgets 方法

2. 您需要覆盖 @Component.providers，如 this post 中所述

如果您真的只想使用真实服务和Http，那么您需要准备好在MockBackend 上模拟连接。您不能使用真正的后端，因为它依赖于平台浏览器。例如，查看 this post .我个人认为在测试组件时这不是一个好主意。测试您的服务时，这是您应该做的时候。