각도 2 단위 테스트가 debugElement를 찾을 수 없습니다.

Question

라우터 구성품에서 단위 테스트를 실행하려고합니다. 구성 요소에서 사용하는 라우터와 서비스를 스텁하고 테스트가 작동하는지 확인하기 위해 fixture.debugElement를 사용하여 요소를 가져 오려고합니다. 그러나이 항상 NULL로 반환됩니다.

테스트

import { TestBed, async, ComponentFixture } from '@angular/core/testing'; 
import { Router } from '@angular/router'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 

import { HeroesComponent } from './heroes.component'; 
import { HeroService } from '../hero.service'; 
import { StubHeroService } from '../testing/stub-hero.service'; 
import { StubRouter } from '../testing/stub-router'; 

let comp: HeroesComponent; 
let fixture: ComponentFixture<HeroesComponent>; 
let de:  DebugElement; 
let el:  HTMLElement; 

describe('Component: Heroes',() => { 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [HeroesComponent], 
     providers: [ 
     { provide: HeroService, useClass: StubHeroService }, 
     { provide: Router,  useClass: StubRouter } 
     ] 
    }) 
     .compileComponents() 
     .then(() => { 
     fixture = TestBed.createComponent(HeroesComponent); 
     comp = fixture.componentInstance; 
     de = fixture.debugElement.query(By.css('*')); 
     console.log(de); 
     el = de.nativeElement; 
     }); 
    })); 

    it('should create an instance',() => { 
    expect(comp).toBeTruthy(); 
    }); 

    it('should update the selected hero',() => { 
    comp.onSelect({ 
     id: 0, 
     name: 'Zero' 
    }); 
    fixture.detectChanges(); 

    expect(el.querySelector('.selected').firstChild.textContent).toEqual(0); 
    }); 
}); 

스텁 라우터 쿼리하기 전에

export class StubRouter { 
    navigateByUrl(url: string) { return url; } 
} 

Answer 1

요소 호출 fixture.detectChanges

fixture = TestBed.createComponent(HeroesComponent); 
comp = fixture.componentInstance; 

//call detect changes here 
fixture.detectChanges(); 

de = fixture.debugElement.query(By.css('*')); 
console.log(de); 
el = de.nativeElement;