单元测试HttpClientModule(Angular 4.3+)时出错 [英] Error while unit testing HttpClientModule (Angular 4.3+)
问题描述
我正在探索新的Angular HttpClientModule并遇到一个莫名其妙的错误.该模块足够新,我无法找到有关如何进行单元测试的任何有用信息,并且官方文档中没有任何示例.
I'm exploring the new Angular HttpClientModule and running into an inexplicable error. The module is new enough that I can't yet find any useful information about how to unit test, and the official documentation doesn't have any examples.
该应用程序包含一种方法的服务,该方法将URL传递给http.get
.当我在浏览器上下文(又称为ng serve
)中调用此方法时,http调用将正常执行.在单元测试的上下文中调用时,出现以下错误:
The app contains a service with one method, which passes a URL to http.get
. When I call this method in a browser context (aka ng serve
), the http call executes normally. When called in the context of a unit test, I get the following error:
TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
这是使用Angular CLI生成的最小应用程序.以下是相关代码:
This is a minimal app generated with Angular CLI. Here's the pertinent code:
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts:
import { Component, OnInit } from '@angular/core';
import { TestService } from './test.service'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [TestService]
})
export class AppComponent {
title = 'app';
constructor(private testSvc: TestService) {}
ngOnInit() {
this.testSvc.executeGet('http://www.example.com');
}
}
test.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class TestService {
constructor(private http:HttpClient) {}
executeGet(url:string) {
this.http.get(url)
.subscribe(
data => console.log('success', data),
error => console.log('error', error)
);
}
}
test.service.spec.ts:
import { HttpClient, HttpHandler } from '@angular/common/http';
import { TestBed, inject } from '@angular/core/testing';
import { TestService } from './test.service';
describe('TestService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [HttpClient, HttpHandler, TestService]
});
});
it('should executeGet', inject([TestService], (svc: TestService) => {
expect(svc.executeGet).toBeDefined();
// this is where the 'undefined' error occurs
svc.executeGet('http://www.example.com');
}));
});
任何指导或指针,我们将不胜感激.
Any guidance or pointers greatly appreciated.
推荐答案
缺少HttpClientModule的导入
Import of HttpClientModule missing
describe('TestService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientModule],
providers: [TestService]
});
});
it('should executeGet', () => {
const testService = TestBed.get(TestService);
expect(testService.executeGet).toBeDefined();
testService.executeGet('http://www.example.com');
}));
});
这篇关于单元测试HttpClientModule(Angular 4.3+)时出错的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!