CODEWITHSUNDEEP
angularunit-testingkarma-jasmineangular6
Darshan theerth
Darshan theerth

Reputation: 536

TypeError: Cannot read property 'query' of undefined while unit testing Angular 6

I am learning unit testing for Angular 6 using karma and Jasmine. I have tried a simple unit test of a text present inside <p> tag. Here's my HTML code:

<p>
  dash works!
</p>

And also in my dash.component.spec.ts, I am giving a test code like this:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { DashComponent } from './dash.component';
import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';

describe('DashComponent', () => {
  let component: DashComponent;
  let fixture: ComponentFixture<DashComponent>;
  let de: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DashComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DashComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
    it('should have a p tag of `dash works!`', () => {
        expect(de.query(By.css('p')).nativeElement.innerText).toBe('dash works!');
    });
});

After doing ng test, I am getting this error. please suggest me how to proceed.

TypeError: Cannot read property 'query' of undefined
    at UserContext.eval (./src/app/dash/dash.component.spec.ts?:32:19)
    at ZoneDelegate.invoke (./node_modules/zone.js/dist/zone.js?:387:26)
    at ProxyZoneSpec.onInvoke (./node_modules/zone.js/dist/zone-testing.js?:287:39)
    at ZoneDelegate.invoke (./node_modules/zone.js/dist/zone.js?:386:32)
    at Zone.run (./node_modules/zone.js/dist/zone.js?:137:43)
    at runInTestZone (./node_modules/zone.js/dist/zone-testing.js?:508:34)
    at UserContext.eval (./node_modules/zone.js/dist/zone-testing.js?:523:20)
    at attempt (http://localhost:9876/absoluteD:/thbs/coe/iot/2.POC/Unit%20Testing/angular-unit-testing/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:4478:46)
    at ZoneQueueRunner.QueueRunner.run (http://localhost:9876/absoluteD:/thbs/coe/iot/2.POC/Unit%20Testing/angular-unit-testing/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:4402:20)
    at runNext (http://localhost:9876/absoluteD:/thbs/coe/iot/2.POC/Unit%20Testing/angular-unit-testing/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:4446:20)

Upvotes: 1

Views: 4617

Answers (2)

ShamPooSham
ShamPooSham

Reputation: 2379

Your variable de isn't assigned anything, it needs the debugElement from the fixture. Put de = fixture.debugElement in either beforeEach (after the fixture definition) or in it('should have a p tag of dash works!') (before your expect)

Upvotes: 1

Sanju
Sanju

Reputation: 1518

Assign your variable 'de' to fixture's debugElement like this:

let de: DebugElement = fixture.debugElement;  // OR de = fixture.debugElement;  after creating component

Upvotes: 0

Related Questions