ng test No provider for Http! error

Question

I try to make tests for my Angular2 application. I didn't make mockingservices yet, so I try to use my normal service.

the exact error:

Error: No provider for Http!
    at injectionError (http://localhost:9876/base/src/test.ts:1538:86) [angular]
    at noProviderError (http://localhost:9876/base/src/test.ts:1576:12) [angular]
    at ReflectiveInjector_.Array.concat.ReflectiveInjector_._throwOrNull (http://localhost:9876/base/src/test.ts:3077:19) [angular]
    at ReflectiveInjector_.Array.concat.ReflectiveInjector_._getByKeyDefault (http://localhost:9876/base/src/test.ts:3116:25) [angular]
    at ReflectiveInjector_.Array.concat.ReflectiveInjector_._getByKey (http://localhost:9876/base/src/test.ts:3048:25) [angular]
    at ReflectiveInjector_.Array.concat.ReflectiveInjector_.get (http://localhost:9876/base/src/test.ts:2917:21) [angular]
    at DynamicTestModuleInjector.Array.concat.NgModuleInjector.get (http://localhost:9876/base/src/test.ts:3864:52) [angular]

The @component of the component I want to test is:

@Component({
  selector: 'app-game-board',
  templateUrl: './game-board.component.html',
  styleUrls: ['./game-board.component.css'],
  providers: [GameBoardService]
})

I tried to import the HTTPModule in the spec.ts class(test), but I can't get it to work. here is the code of the spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { GameBoardComponent } from './game-board.component';
import { GameBoardService } from "app/services/gameboardservice";

describe('GameBoardComponent', () => {
  let component: GameBoardComponent;
  let fixture: ComponentFixture<GameBoardComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [HttpModule], //this is where I try to import the HttpModule
      declarations: [ GameBoardComponent ],
      providers: [GameBoardService]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(GameBoardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

I also tried this in the providers of the test class:

providers: [{ provide: Http, useValue: GameBoardService }]

Answer 1

You will still need to provide a HTTP to your test class, and you will likely want to use MockBackend for that.

This is the lines I believe you need to add.

import { MockBackend } from '@angular/http/testing';
import { HttpClient } from '@angular/common/http';

Within your providers of your TestBed.configureTestingModule:

providers: [
  {provide: HttpClient, deps: [MockBackend]},
  ...
],