title: TypeError: x(...).subscribe is not a function
body: <p>I am trying to unit test my component that calls a service method in ngOnInit. When I try to run the test I get the error:</p>
  
  <p>TypeError: this.adminService.getTestString(...).subscribe is not a function</p>
  
  <p>Following are the files for reference.</p>
  
  <p>app.component.ts
  <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>@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'ISAppAdmin';
  
    greet: String;
    errorMessage: String;
    constructor(private adminService: AdminService, private router: Router) {}
  
    ngOnInit() {
      this.adminService.getTestString().subscribe(
        data =&gt; this.greet = data,
        error =&gt; this.errorMessage = &lt; any &gt; error
      )
  
      this.adminService.putTestString().subscribe(
        res =&gt; console.log(res),
        error =&gt; this.errorMessage = &lt; any &gt; error
      )
  
      console.log("in app");
    }
  
    onClick() {
      console.log("button clicked");
      this.router.navigate(['admin']);
      console.log("still on same page");
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>app.component.spec.ts</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>class MockAdminService {
    res = "Hello World";
    getTestString() {
      return this.res;
    }
  }
  
  describe('AppComponent', () =&gt; {
  
    let mockAdminService: MockAdminService;
    let fixture: ComponentFixture &lt; AppComponent &gt; ;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        providers: [{
          provide: AdminService,
          useClass: MockAdminService
        }],
        imports: [HttpClientTestingModule, RouterTestingModule],
        declarations: [AppComponent],
      }).compileComponents();
  
      mockAdminService = new MockAdminService();
      fixture = TestBed.createComponent(AppComponent);
      const component = fixture.componentInstance;
      //mockAdminService = jasmine.createSpyObj(['getTestString']);
  
    }));
    it('should receive Hello World when getTestString is called', () =&gt; {
      let testData = "Hello World";
      fixture.detectChanges();
      expect(this.component.greet).toEqual(testData);
    });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>admin.service.ts</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>@Injectable({
    providedIn: 'root'
  })
  export class AdminService {
  
    private url = 'http://localhost:8080/rest/test';
    data: String;
    constructor(private http: HttpClient) {}
  
  
    getTestString(): Observable &lt; any &gt; {
  
      const headers = new HttpHeaders({
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
        'Access-Control-Allow-Headers': '*'
      });
      return this.http.get("http://localhost:8080/rest/test", {
        headers: headers,
        responseType: 'text'
      });
    }
  }</code></pre>
  </div>
  </div>
  </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>Chrome 65.0 .3325(Windows 10.0 .0) AppComponent should receive Hello World when getTestString is called FAILED
  TypeError: this.adminService.getTestString(...).subscribe is not a
  function
  at AppComponent.ngOnInit(webpack: ///./src/app/app.component.ts?:26:43)
      at checkAndUpdateDirectiveInline(webpack: ///./node_modules/@angular/core/fesm5/core.js?:9547:19)
        at checkAndUpdateNodeInline(webpack: ///./node_modules/@angular/core/fesm5/core.js?:10811:20)
          at checkAndUpdateNode(webpack: ///./node_modules/@angular/core/fesm5/core.js?:10773:16)
            at debugCheckAndUpdateNode(webpack: ///./node_modules/@angular/core/fesm5/core.js?:11406:38)
              at debugCheckDirectivesFn(webpack: ///./node_modules/@angular/core/fesm5/core.js?:11366:13)
                at Object.eval[as updateDirectives](ng: ///DynamicTestModule/AppComponent_Host.ngfactory.js:9:9)
                  at Object.debugUpdateDirectives[as updateDirectives](webpack: ///./node_modules/@angular/core/fesm5/core.js?:11358:21)
                    at checkAndUpdateView(webpack: ///./node_modules/@angular/core/fesm5/core.js?:10755:14)</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can someone please help me understand my mistake and how to correct it.</p>
  
  <p>Thank you</p>