title: Error: <toHaveBeenCalled> : Expected a spy, but got undefined
body: <p>I am getting an error expected Spy but got undefined in my angular 10 test. I am using Jasmine and Karma. I have mocked the service SpreadsheetService as mockSpreadSheetService. I am calling the its method. I fail to understand why its expecting a spy.</p>
  <p>One possible reason i could think of is that mockSpreadSheetService gets created before running the test and we are calling component.ngOnit which possible recreates the component instance. I tried to explicitly create the mockservice after component.ngOnit but it still didnt work.</p>
  <p>My question Ideally we should be testing on the mock object. Why is spy needed.</p>
  <pre><code>expect(mockSpreadSheetService.loadXML).toHaveBeenCalled();
  </code></pre>
  <p>TestComponent</p>
  <pre><code> let component: SpreadsheetComponent;
    let fixture: ComponentFixture&lt;SpreadsheetComponent&gt;;
    let mockSpreadSheetService;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
          imports: [HttpClientTestingModule],
          declarations: [SpreadsheetComponent],
          providers: [{SpreadsheetService, useFactory: () =&gt;   mockSpreadSheetService.Object}]
        })
        .compileComponents();
    }));
  
    beforeEach(() =&gt; {
  
      mockSpreadSheetService = new Mock&lt;SpreadsheetService&gt;({
        loadXML: () =&gt; of(xmlData)
      });
  
      fixture = TestBed.createComponent(SpreadsheetComponent);
      component = fixture.componentInstance;
      //fixture.detectChanges();
  
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  
    it('should call loadXML when ngOnInit is called', fakeAsync(() =&gt; {
     // spyOn(component.spreadsheetService, 'loadXML');
      component.ngOnInit();
      tick();
      expect(mockSpreadSheetService.loadXML).toHaveBeenCalled();
    }));
  });
  </code></pre>
  <p>Main component</p>
  <pre><code> ngOnInit(): void {
      this.spreadsheetService.loadXML().subscribe((data) =&gt; {
        this.parseXML(data)
          .then((data) =&gt; {
            console.log('data is ' , data);
            this.xmlItems = data;
          });
      });
    }
  </code></pre>