title: Angular 7 Component Test is using original service instead of mock
body: <p>I am trying to test a component that has an injected service. I want to provide a mock service in my test. However the test is using the original service instead of the mock one (I know this because I am getting a "No provider for HttpClient!" error and also I have a console.log in the original service that is outputting in the test).</p>
  
  <p>I can fix the error by importing the HttpClientTestingModule but this doesn't fix the fact that the original service is being used instead of the mock one.</p>
  
  <p>Any ideas what I am doing wrong?</p>
  
  <p>Here is my test code. Angular version 7</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { TestBed, async, ComponentFixture } from '@angular/core/testing';
  import { HelloWorldComponent } from '../../app/components/hello-world/hello-world.component';
  import { HelloWorldService } from '../../app/services/hello-world.service';
  
  describe('HelloWorldComponent', () =&gt; {
  
    let component: HelloWorldComponent;
    let fixture: ComponentFixture&lt;HelloWorldComponent&gt;;
    let mockHelloWorldService;
    
    beforeEach(() =&gt; {
  
      mockHelloWorldService = jasmine.createSpyObj(['getHelloWorld']);
      
      TestBed.configureTestingModule({
        imports: [],
        declarations: [HelloWorldComponent],
        providers: [
          [{ provide: HelloWorldService, useClass: mockHelloWorldService }]
        ]
      }).compileComponents();
  
      fixture = TestBed.createComponent(HelloWorldComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
   
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
    
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I have tried overrideProvider and now I am now getting a 'Cannot read property 'subscribe' of undefined' error, which sort of feels like progress...</p>
  
  <p>Here's my test code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { TestBed, async, ComponentFixture } from '@angular/core/testing';
  import { HelloWorldComponent } from '../../app/components/hello-world/hello-world.component';
  import { HelloWorldService } from '../../app/services/hello-world.service';
  import { of } from 'rxjs';
  
  describe('HelloWorldComponent', () =&gt; {
  
    let component: HelloWorldComponent;
    let fixture: ComponentFixture&lt;HelloWorldComponent&gt;;
    let mockHelloWorldService;
  
    beforeEach(async(() =&gt; {
      mockHelloWorldService = jasmine.createSpyObj(['getHelloWorld']);
      TestBed.configureTestingModule({
        imports: [],
        declarations: [HelloWorldComponent]
      });
      TestBed.overrideProvider(HelloWorldService, { useValue: mockHelloWorldService });
      TestBed.compileComponents();
  
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(HelloWorldComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's my component</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { HelloWorldService } from '../../services/hello-world.service';
  
  @Component({
    selector: 'app-hello-world',
    templateUrl: './hello-world.component.html',
    providers: [HelloWorldService]
  })
  export class HelloWorldComponent implements OnInit {
  
    helloWorldMessage: any;
    constructor(private helloWorldService: HelloWorldService) { }
  
    ngOnInit() {
      this.getHelloWorldMsg();
    }
  
    getHelloWorldMsg() {
      this.helloWorldService
        .getHelloWorld()
        .subscribe((data) =&gt; {
          this.helloWorldMessage = data;
          }, err =&gt; this.handleErrorResponse('There was a problem loading the hello world message', err));
    }
  
    handleErrorResponse(errorMsg: string, error?: any) {
      console.log("There was a problem getting the message");
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here's my service</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  import { environment } from '../../environments/environment';
  
  @Injectable()
  export class HelloWorldService {
    constructor(private http: HttpClient) { }
  
    getHelloWorld(): Observable&lt;any&gt; {
      console.log("Why is the test coming here when I provide a mock?");
      var getHelloWorldApiUrl = environment.apiUrl + "/api/v1.0/helloworld/GetHelloWorldMessageAuth";
      return this.http
      .get(getHelloWorldApiUrl);
    }
  }</code></pre>
  </div>
  </div>
  </p>