title: Angular 7 spyon from is not working in unit testing?
body: <p>Firstly, I tried all the questions &amp; answers related to this topic. Additionally and I tried related questions and try to solve it but no success. So please read my question thoroughly.</p>
  
  <p><strong>Search Questions</strong>:</p>
  
  <p><a href="https://stackoverflow.com/questions/49775474/spyon-in-angular-testing">SpyOn in Angular testing</a></p>
  
  <p><a href="https://stackoverflow.com/questions/53385444/spyon-not-working-in-http-interceptor-in-angular-6">spyOn not working in Http Interceptor in Angular 6</a></p>
  
  <p>Basically, my unit test calls a method on a component that calls a service and compares to data but somehow <strong>from</strong> is error are there. </p>
  
  <p><strong>Error:</strong></p>
  
  <pre><code>Property 'from' does not exist on type 'typeof Observable'.ts(2339)
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/nqffl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nqffl.png" alt="enter image description here"></a></p>
  
  <p><strong>interface</strong></p>
  
  <pre><code>export interface servicecasemodel {
      _id:string,
      propertyName:string,
      propertyDesc:string,
      propertyType:number
  }
  </code></pre>
  
  <p><strong>service</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { servicecasemodel } from 'src/app/service-test-case/model/servicecasemodel';
  import { HttpClient } from '@angular/common/http';
  import { Observable,of } from 'rxjs';
  import { catchError } from 'rxjs/operators';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ServicecaseService {
  
    constructor( private http:HttpClient) { }
  
     url:string = 'http://XXX.XXX.X.X:5000/api/property';
    getproduct():Observable&lt;servicecasemodel[]&gt; {
      return this.http.get&lt;servicecasemodel[]&gt;(this.url);
  
    }
  
  }
  </code></pre>
  
  <p><strong>Component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {ServicecaseService} from 'src/app/service-test-case/service/servicecase.service';
  import { servicecasemodel } from './model/servicecasemodel';
  
  @Component({
    selector: 'app-servicce-test-case',
    templateUrl: './service-test-case.component.html',
    styleUrls: ['./service-test-case.component.css']
  })
  export class ServiceTestCaseComponent implements OnInit {
  
    product:servicecasemodel[];
    constructor( private service_instance:ServicecaseService) { }
  
    ngOnInit() {
     this.service_instance.getproduct().subscribe(
        (responce:servicecasemodel[]) =&gt; {
          console.log(responce);
          this.product = responce;
        }
      );
  
    }
  
  }
  </code></pre>
  
  <p><strong>Unit Test Code</strong></p>
  
  <pre><code>import {ServicecaseService} from 'src/app/service-test-case/service/servicecase.service';
  import { ServiceTestCaseComponent } from './service-test-case.component';
  import { servicecasemodel } from './model/servicecasemodel';
  import { Observable,from,of, observable,throwError } from 'rxjs';
  
  describe('ServiceTestCaseComponent', () =&gt; {
    let component :ServiceTestCaseComponent;
    let service: ServicecaseService;
    const Getdata :servicecasemodel[] =[
      {
        _id:'1',
        propertyName:'Pro Nmae',
        propertyDesc:'Pro Desc',
        propertyType:1
      },
      {
        _id:'2',
        propertyName:'Pro Nmae 2',
        propertyDesc:'Pro Desc 2',
        propertyType:3
      },
    ];
  
  
    beforeEach(() =&gt; {
  
      service = new ServicecaseService(null);
      component = new ServiceTestCaseComponent(service);
  
    });
  
    it('should set property with the items returned',() =&gt;{
  
        spyOn(service,'getproduct').and.callFake(() =&gt; { 
        return Observable.from([Getdata]);
      }); 
  
  
      // Make actual call
      component.ngOnInit();
      //expect(service).toBeTruthy();
      expect(component.product).toEqual(Getdata);
    });
  });
  </code></pre>