Angular testing: Cannot read property 'nativeElement' of null

Question

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:

<li class="list-group-item" *ngFor="let user of users">
  <a class="test-link"[routerLink]="['/detail', user.id]">
    {{user.userName}}
  </a>
</li>

The Test file:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [AdminComponent, UserDetailComponent],
    imports: [HttpClientModule,RouterTestingModule.withRoutes([
      {path:'detail/:id',
        component: UserDetailComponent}],
    )],
    providers: [UserService, AuthService]
  })
    .compileComponents();
}));

beforeEach(() => {
  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(() => {

  debugElement
    .query(By.css('.test-link'))
    .nativeElement.click();

  tick();

  expect(location.path()).toBe('/detail/testing/1');

}));

Why is click event on the native element is null?

score 12 · Accepted Answer · answered Oct 15 '19 at 15:35

12

This is because when this test will run, your users array will be empty, and hence there will be no element in html with .test-link selector.

Before clicking the element, you should fill the users array and let angular run the change detection so that your anchor tag is available when you click on it.

Code:

it('test demands redirection', fakeAsync(() => {

  component.users = [
    // fill it with user objects
  ];

  fixture.detectChanges();

  debugElement
    .query(By.css('.test-link'))
    .nativeElement.click();

  tick();

  expect(location.path()).toBe('/detail/testing/1');

}));

answered Oct 15 '19 at 15:35

Archit Garg

2,908
2
14
22

Thanks for answer, but can i fill it with dummy data? – Mellville Oct 15 '19 at 16:11
Yes, you can fill it with any data you want. – Archit Garg Oct 15 '19 at 17:10

score 0 · Answer 2 · answered Dec 04 '20 at 17:18

0

I had the same error - "TypeError: Cannot read property 'nativeElement' of null" - and found that I had copy-pasted the same html element id into multiple locations. I ensured

answered Dec 04 '20 at 17:18

Chris

5,485
15
68
130

Angular testing: Cannot read property 'nativeElement' of null

2 Answers2