title: Property 'click' does not exist on type 'DebugElement'
body: <p>I have just started with Karma and Jasmine. I am stuck at a point where I am not able to perform a unit test on my component, the function that I want to trigger is in binding with <code>*ngIf</code> condition with the button for some specific values.</p>
  
  <h2>my.component.ts</h2>
  
  <pre><code>import { Component, Input, EventEmitter, Output } from '@angular/core';
  import { Location } from '@angular/common';
  import { XService } from 'src/app/services/x-service';
  
  @Component({
    selector: 'my-head-component',
    templateUrl: './headComponent.html',
    styleUrls: ['./head.scss']
  })
  export class MyComponent {
    @Input() variableX = '';
  
    @Output() outVar1: EventEmitter&lt;string&gt; = new EventEmitter();
    @Output() outVar2: EventEmitter&lt;string&gt; = new EventEmitter();
  
    y1='';
    y2='';
    constructor(private location: Location,
      private xServ:XService ) { }
  
    lookBack() {
      this.location.back();
    }
  
    doSearch() {
      this.y1= '';
      this.y2 = '';
  
      this.outVar1.emit(this.y1);
      this.outVar2.emit(this.y2);
    }
  
     ...
  }
  </code></pre>
  
  <h2>headComponent.html</h2>
  
  <pre><code>...
  
  &lt;header class="head"&gt;
      &lt;div class="firstDiv"&gt;
          &lt;a href="javascript:;" class="btnClass"
            *ngIf="(variableX !== 'value1')
                &amp;&amp; (variableX !== 'value2')
            (click)="lookBack()"&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  
  ...
  </code></pre>
  
  <h2>x-service.ts</h2>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Yserv } from './y-service';
  import { Router } from '@angular/router';
  
  const keyName = 'xxxxx';
  
  @Injectable({
    providedIn: 'root'
  })
  export class XService {
  
    constructor(private http: HttpClient, private util: YServ,
      private router: Router) { }
  
    logout() {
      this.router.navigate(['/home-page']);
      this.util.removeValue(keyName);
    }
  
    getUser() {
      return JSON.parse(this.util.getValue(keyName));
    }
  
  }
  </code></pre>
  
  <h2>my.component.spec.ts</h2>
  
  <pre><code>import {TestBed, ComponentFixture, inject, async} from '@angular/core/testing';
  import {MyComponent} from './my.component';
  import { HttpClientTestingModule } from '@angular/common/http/testing';
  import { RouterTestingModule } from '@angular/router/testing';
  import { XService } from 'src/app/services/x-service';
  import {Location, LocationStrategy, PathLocationStrategy, APP_BASE_HREF} from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import {DebugElement} from '@angular/core';
  import {By} from '@angular/platform-browser';
  
  describe('MyComponent',()=&gt;{
  
    let component: MyComponent;
    let fixture: ComponentFixture&lt;MyComponent&gt;;
    let xServ: XService;
    let locServ : Location;
    let backEl: DebugElement;
  
    beforeEach(async(()=&gt;{
      TestBed.configureTestingModule({
        declarations: [MyComponent],
        imports: [FormsModule, HttpClientTestingModule,RouterTestingModule],
        providers: [XService,Location,{ provide: LocationStrategy, useClass: PathLocationStrategy }, {provide: APP_BASE_HREF, useValue : '/' }]
      }).compileComponents().then(()=&gt;{
          fixture = TestBed.createComponent(MyComponent);
          component = fixture.componentInstance;
          xServ = TestBed.get(XService);
          locServ = TestBed.get(Location);
      });
    }));
  
    it('should have a defined a type of MyComponent', () =&gt; {
      expect(component).toBeTruthy();
    });
  
    it('should click back button when variableX = value1 or value2 or value3 and call function Back()',async(()=&gt;{
      spyOn(locServ,'back');
      component.variableX = 'value1';
      fixture.detectChanges();
      fixture.whenStable().then(()=&gt;{
        backEl = fixture.debugElement.query(By.css('a.btnClass')).nativeElement;
        backEl.click();   /* &lt;- error TS2339: Property 'click' does not exist on type 'DebugElement'. */
        expect(locServ.back).toHaveBeenCalled();
      });
    }));
  });
  </code></pre>
  
  <p>While running my spec file using <code>ng test</code> from the terminal, it's not starting it is throwing an error <a href="https://imgur.com/gallery/3vFs4z9" rel="nofollow noreferrer">like this</a>
  <code>error TS2339: Property 'click' does not exist on type 'DebugElement'</code>.
  But as I change something in my spec file and save it, ng test automatically runs my spec file and shows this error- <code>TypeError: Cannot read property 'nativeElement' of null</code> and <code>TypeError: Cannot read property 'nativeElement' of null</code></p>
  
  <p>So, In a nutshell, I am not able to target the anchor tag in the html file to fire lookBack function in my component. I am not sure what I am doing wrong. So far I have formatted the code based upon my searches and reading.</p>
  
  <p>Any help would be highly appreciated. Thanks :)</p>