MockBackendのプロバイダはありません！角度2

Question

でエラー私は私のテストコードは以下のように見える角度2でサービスのテストを記述しようとしています：モデルのユーザーのための

account.spec.ts

import {} from 'jasmine' 
import { inject, TestBed } from '@angular/core/testing'; 
import { MockBackend } from '@angular/http/testing'; 
import { HttpModule, XHRBackend, Response, ResponseOptions} from '@angular/http'; 
import { AccountService } from './account.service'; 
import { environment } from '../../environments/environment'; 


fdescribe('with mocked account service',()=>{ 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     imports: [HttpModule], 
     providers: [ 
     { provide:environment.api_url}, 
     AccountService, 
     { provide: XHRBackend, useClass: MockBackend }, 
     ] 
    }); 
    }); 

    fdescribe('user()',()=> { 
    it('should return an Observable', inject([AccountService, MockBackend], 
     (accountService, mockBackend) => { 
     const mockResponse = { 
      data:[ 
      {user_id:0, organization_id:0, full_name:'John Smith', organization:'hospital', email:'john@gmail.com'}, 
      ] 
     }; 

     mockBackend.connections.subscribe((connection) => { 
      connection.mockRespond(new Response(new ResponseOptions({ 
      body: JSON.stringify(mockResponse) 
      }))); 
     }); 

     accountService.user().subscribe((users)=> { 
      expect(users.length).toBe(1); 
      expect(users[0].full_name.toEqual('John Smith')) 
     }); 
    })); 
    }); 
}); 

を、それはある以下のコード：私はNGテストを実行した user.model.ts

export interface User { 
    user_id: number; 
    organization_id: number; 
    full_name: string; 
    organization: string; 
    email: string; 
} 

、私はこのエラーを受け取ります：

Chrome 56.0.2924 (Linux 0.0.0) with mocked account service user() should return an Observable FAILED 
     Error: No provider for MockBackend! 
     Error: DI Error 
      at NoProviderError.ZoneAwareError (webpack:///~/zone.js/dist/zone.js:958:0 <- src/polyfills.ts:4398:33) 
      at NoProviderError.BaseError [as constructor] (webpack:///~/@angular/core/src/facade/errors.js:22:0 <- src/test.ts:33829:16) 
      at NoProviderError.AbstractProviderError [as constructor] (webpack:///~/@angular/core/src/di/reflective_errors.js:54:0 <- src/test.ts:64479:16) 
      at new NoProviderError (webpack:///~/@angular/core/src/di/reflective_errors.js:116:0 <- src/test.ts:64541:16) 
      at ReflectiveInjector_._throwOrNull (webpack:///~/@angular/core/src/di/reflective_injector.js:485:0 <- src/test.ts:102328:19) 
      at ReflectiveInjector_._getByKeyDefault (webpack:///~/@angular/core/src/di/reflective_injector.js:524:0 <- src/test.ts:102367:25) 
      at ReflectiveInjector_._getByKey (webpack:///~/@angular/core/src/di/reflective_injector.js:456:0 <- src/test.ts:102299:25) 
      at ReflectiveInjector_.get (webpack:///~/@angular/core/src/di/reflective_injector.js:325:0 <- src/test.ts:102168:21) 
      at TestBed.get (webpack:///~/@angular/core/bundles/core-testing.umd.js:827:0 <- src/test.ts:9245:67) 
      at webpack:///~/@angular/core/bundles/core-testing.umd.js:832:50 <- src/test.ts:9250:65 
      at Array.map (native) 
      at TestBed.execute (webpack:///~/@angular/core/bundles/core-testing.umd.js:832:0 <- src/test.ts:9250:33) 
      at Object.<anonymous> (webpack:///~/@angular/core/bundles/core-testing.umd.js:922:32 <- src/test.ts:9340:49) 
      at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:330:0 <- src/polyfills.ts:3770:26) 
      at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:79:0 <- src/test.ts:91173:39) 

私はこのエラーを解決するのを助けていただきありがとうございます。ありがとう。

Answer 1

テストNgModuleのプロバイダリストにMockBackendを追加する必要があります。

TestBed.configureTestingModule({ 
    imports: [HttpModule], 
    providers: [ 
    { provide:environment.api_url}, 
    AccountService, 
    { provide: XHRBackend, useClass: MockBackend }, 
    MockBackend, // <-- add this line 
    ] 
}); 

説明： あなたのテストモジュールは、コンポーネント/サービスがXHRBackendを要求したとき、代わりにそれをMockBackendのインスタンスを与えると言っています。しかし、あなたはMockBackendのインスタンスを取得する方法を決して指定しませんでした。

Answer 2

ur app-module.tsコンポーネントにはMockBackendを追加する必要があります。

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { AppComponent } from './app.component'; 
import { RouterModule, Routes } from '@angular/router'; 
import { HttpModule } from '@angular/http'; 

import {AppRoutingModule, routableComponents } from './app-routing.module'; 
import { MockBackend } from '< MockBackend module location>'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    AppRoutingModule, 
    HttpModule 
    ], 
    declarations: [ 
    AppComponent, 
    routableComponents 
    ], 
    providers: [ 
    MockBacked 
    ], 
    bootstrap: [ AppComponent] 
}) 
export class AppModule { 
}