title: <spyOn> : could not find an object to spy upon
body: <p>I have a simple component:</p>
  
  <p>.html:</p>
  
  <pre><code>&lt;h1&gt;
    {{title}}
  &lt;/h1&gt;
  
  &lt;button (click)="changeTitle()"&gt;Change title&lt;/button&gt;
  </code></pre>
  
  <p>.ts:</p>
  
  <pre><code>export class AppComponent {
    title = 'app works!';
  
    changeTitle() {
      this.title = 'New Title!';
    }
  }
  </code></pre>
  
  <p>spec:</p>
  
  <pre><code>import {TestBed, async} from '@angular/core/testing';
  
  import { AppComponent } from './app.component';
  
  describe('AppComponent', () =&gt; {
    let fixture;
    let component;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent
        ],
      }).compileComponents().then(() =&gt; {
        fixture = TestBed.createComponent(AppComponent);
        component = fixture.componentInsance;
      });
    }));
  
    it('should create the app', async(() =&gt; {
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
    }));
  
    it(`should have as title 'app works!'`, async(() =&gt; {
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('app works!');
    }));
  
    it('should render title in a h1 tag', async(() =&gt; {
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('h1').textContent).toContain('app works!');
    }));
  
    it('should change the title to `New Title!`', async(() =&gt; {
      fixture.detectChanges();
      spyOn(component, 'changeTitle').and.callThrough();
      const compiled = fixture.debugElement.nativeElement;
  
      const button = compiled.querySelector('button');
      button.click();
      return fixture.whenStable().then(() =&gt; {
        fixture.detectChanges();
        expect(compiled.querySelector('h1').textContent).toBe('New Title!');
      });
    }));
  
  });
  </code></pre>
  
  <p>The first 3 tests are passing, the last one returns <code>Error: &lt;spyOn&gt; : could not find an object to spy upon for changeTitle()</code></p>
  
  <p>Any idea what's wrong?</p>