我的 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) { }
语句,测试可以正常通过,但应用程序在浏览器中失败。我对此进行了大量研究,但未能找到解决方案。任何帮助将不胜感激!!
最佳答案
TestBed
的目的是为测试环境配置@NgModule
从头开始。因此,目前您配置的只是 AppComponent
,什么都没有(除了已经在 @Component.providers
中声明的服务。 p>
不过,我强烈建议您不要像在真实环境中那样尝试配置所有内容,而只是模拟 BudgetService
。尝试配置 Http
并模拟它并不是最好的主意,因为您希望在单元测试时尽可能保持外部依赖性。
这是你需要做的
为
BudgetService
创建一个模拟。我会查看 this post .您可以只扩展该抽象类,添加您的getBudgets
方法您需要覆盖
@Component.providers
,如 this post 中所述
如果您真的只想使用真实服务和Http
,那么您需要准备好在MockBackend
上模拟连接。您不能使用真正的后端,因为它依赖于平台浏览器。例如,查看 this post .我个人认为在测试组件时这不是一个好主意。测试您的服务时,这是您应该做的时候。
关于 Angular 2 错误 : No provider for Http in Karma-Jasmine Test,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40003575/