Fehler beim Komponententest HttpClientModule (Angular 4.3+)

Question

Ich erkunde das neue Angular HttpClientModule und stolperte in einen unerklärlichen Fehler. Das Modul ist neu genug, dass ich noch keine brauchbaren Informationen zum Komponententest finden kann, und die offizielle Dokumentation enthält keine Beispiele.

Die App enthält einen Dienst mit einer Methode, die eine URL an http.get übergibt. Wenn ich diese Methode in einem Browser-Kontext (alias ng serve) aufrufen, wird der http-Aufruf normal ausgeführt. Wenn im Rahmen eines Unit-Test genannt, bekomme ich folgende Fehlermeldung:

TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

Dies ist ein minimal-App ist mit kantigem CLI erzeugt. Hier ist der relevante 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'); 
    })); 
}); 

Jede mögliche Anleitung oder Zeiger sehr geschätzt.

Answer 1

Import von HttpClientModule fehlt

Here is the working example on plnkr

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'); 
    })); 
}); 

Answer 2

Kürzlich erlebte ich genau das gleiche Problem, bei dem die Fehlermeldung sagt:

TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

Für mich ist die Quelle dieser Fehler nicht HttpInterceptor ordnungsgemäß verwendet wurde. Wenn Sie auch benutzerdefinierte HttpInterceptor bieten stellen Sie sicher, dass Sie es richtig verwenden. Im folgenden Codeausschnitt beachten Sie, wie ich Observable, Promise, Array, or Iterable zurückgeben, wenn Fehlerstatus anders als 401 ist. Standardmäßig undefined wird von Observable, Promise, Array, or Iterable anstelle von Observable, Promise, Array, or Iterable zurückgegeben, so eckig beschwert sich darüber.

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    return next.handle(req).catch(err => { 
     if(err instanceof HttpErrorResponse) { 
     if(err.status === 401) { 
      this.store.dispatch(this.authAction.unauthorized(err)); 
      return Observable.throw(err); 
     } 
     } 
    }) 
    } 

und das Fix zu ist, war folgendes Code-Snippet.

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    return next.handle(req).catch(err => { 
     if(err instanceof HttpErrorResponse) { 
     if(err.status === 401) { 
      this.store.dispatch(this.authAction.unauthorized(err)); 
     } 
     } 
     return Observable.throw(err); //Actually this line of code 
    }) 
    }