No provider for MockBackend! error in angular 2

Question

I am trying to write a test for a service in angular 2. my test code looks like below:

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

for model user, it is code below: user.model.ts

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

When I ran ng test, I get this error:

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)

I would appreciate to get helped solving this error. Thanks.

Answer 1

I think you should inject the provided type and let the TestBed use your mock class, instead of:

it('should return an Observable', inject([AccountService, MockBackend],

Try:

it('should return an Observable', inject([AccountService, XHRBackend],

Answer 2

MockBackend needs to be added to the providers list of your test NgModule.

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

Explanation: Your test module is saying that when a component/service requests XHRBackend, give it an instance of MockBackend instead. But you never specified how to get an instance of MockBackend.

Answer 3

MockBackend needs to be added to ur app-module.ts component.

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 {
}