title: Angular testing: Cannot read property 'nativeElement' of null
body: <p>I am new in Angular testing and at the moment I am trying to test this piece of code but I'm getting an error concerning the event raised on the DOM:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;li class="list-group-item" *ngFor="let user of users"&gt;
    &lt;a class="test-link"[routerLink]="['/detail', user.id]"&gt;
      {{user.userName}}
    &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>The Test file:</p>
  
  <pre class="lang-js prettyprint-override"><code>beforeEach(async(() =&gt; {
    TestBed.configureTestingModule({
      declarations: [AdminComponent, UserDetailComponent],
      imports: [HttpClientModule,RouterTestingModule.withRoutes([
        {path:'detail/:id',
          component: UserDetailComponent}],
      )],
      providers: [UserService, AuthService]
    })
      .compileComponents();
  }));
  
  beforeEach(() =&gt; {
    router = TestBed.get(Router);
    location = TestBed.get(Location);
  
    fixture = TestBed.createComponent(AdminComponent);
    debugElement = fixture.debugElement;
    component = fixture.componentInstance;
    fixture.detectChanges();
  
  });
  
  it('test demands redirection', fakeAsync(() =&gt; {
  
    debugElement
      .query(By.css('.test-link'))
      .nativeElement.click();
  
    tick();
  
    expect(location.path()).toBe('/detail/testing/1');
  
  }));
  </code></pre>
  
  <p>Why is click event on the native element is null?</p>