angular: Running Jasmine tests: TypeError: Cannot read property 'nativeElement' of null

Why is this closed? I just started Unit Testing in Angular 5 and this issue immediately presents itself ie

it('should show subscription section', () => {
    fixture.detectChanges();
    const el = fixture.debugElement.query(By.css('#subscription-section')).nativeElement;
    expect(el).toBeTruthy();
  });

Was there ever a suitable resolution for this issue?

Fast forward several months and it’s still prevalent and causing me issues (Angular 5, Karma 1.7.1 and Jasmine 2.8.0)

Thanks

Sorry for the late reply.

Resolution:-

it(‘productSelection’, async(() => { spyOn(component, ‘productSelection’); const btn = fixture.debugElement.query(By.css(‘.BPNormal’)); btn.triggerEventHandler(‘click’, ‘productSelection’); fixture.whenStable().then(() => { expect(component.productSelection).toHaveBeenCalled(); }); }));

On Fri, Dec 7, 2018 at 6:32 PM choubani amir notifications@github.com wrote:

Could you share your solution please ?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/angular/angular/issues/19292#issuecomment-445226028, or mute the thread https://github.com/notifications/unsubscribe-auth/Ano3b6k-05QQx5QNC4liH_sJAFv2HgVnks5u2mb0gaJpZM4Pd7PZ .

Workaround If you are using *ngIf in the element, use hidden instead. <h2 [hidden]="hideItem"> My Message</h2>

This error is caused when jasmine could not find that element in the DOM. The most common scenario is using *ngIf in the template. According to docs, *ngIf destroys the element from DOM, if the expression evaluates to false.

Why is this closed? This is still a problem Friday Jan 25, 2019

Hello. I solved this problem by using fakeAsync call.

describe('validate Siret ', () => {
            it('should call the method validateSiret() when the blur event is triggered', () => {
                fakeAsync(() => {
                    spyOn(comp, 'validateSiret');
                    fixture.detectChanges();
                    const input: ElementRef = debugElement.query(By.css('#field_cc'));
                    input.nativeElement.blur();
                    tick();
                    expect(comp.validateSiret).toHaveBeenCalled();
                });
            });
        });

@jrmcdona - after setting comp.welcome = ‘test’; - try using fixture.detectChanges() in test suite. This may help you, as by default, Test components don’t run change detection automatically. To enable auto change detection - use fixture.autoDetectChanges() in beforeEach function.

I’ve found out what was my issue: the element I was trying to get wasn’t defined in the template at the moment that I tried to get it. In my case, I was trying to get a button inside a td, but my table was empty because I didn’t populate it with mock data.

Using a debugger, I could see that fakeAsync() and async() just make the compiler keep waiting for something that never comes, until the testing process ends and makes it seem like the test passed, but in reality it just didn’t run.

This issue is closed by the OP him/herself, feel free to open a new issue with minimal reproduction.

All, if using change-detection OnPush on the component, refer this ancient issue https://github.com/angular/angular/issues/12313 . In short, when using OnPush in the component, let the constructor’s ChangeDetectorRef be public. In the test, when you change a component’s member, do component.changeDetector.detectChanges()