Angular 7 Jasmine单元测试：如何获取组件NativeElement？

Question

在我的主要组件html中有一个my-grid组件

main.component.html

 <my-grid
    id="myDataGrid"
    [config]="gridOptions"
 </my-grid>

在main.component.specs.ts中如何获取my-grid NativeElement？

到目前为止，我有1个测试可以检查网格是否已渲染

it('should render grid', () => {
     fixture = TestBed.createComponent(MainComponent);
     const compiled = fixture.debugElement.nativeElement;
     expect(compiled.querySelector('my-grid')).not.toBe(null);
})

Answer 1

您可以使用debugElement来查询组件：

示例

const debugElement = fixture.debugElement.query(By.directive(MyGridComponent));
const nativeElement = debugElement.nativeElement;
const component: MyGridComponent = debugElement.componentInstance;