Angular2测试：ComponentFixture中的DebugElement和NativeElement对象之间有什么区别？

我目前正在汇总一些最佳实践，以在组件级别上测试Angular 2应用程序。

我看过一些教程，查询灯具的NativeElement对象以获取选择器等，例如

it('should render "Hello World!" after click', async(() => {
    builder.createAsync(HelloWorld).then((fixture: ComponentFixture<HelloWorld>) => {
        fixture.detectChanges();
        let el = fixture.nativeElement;
        el.querySelector('h1').click();
        fixture.detectChanges();
            
        expect(el.querySelector('h1')).toHaveText('Hello World!');
    });
}));

但是，在juliemr的Angular 2测试种子中，她通过父DebugElement对象访问NativeElement。

it('should render "Hello World!" after click', async(() => {
    builder.createAsync(HelloWorld).then((fixture: ComponentFixture<HelloWorld>) => {
      fixture.detectChanges();
      let compiled = fixture.debugElement.nativeElement;
      compiled.querySelector('h1').click();
      fixture.detectChanges();
            
      expect(compiled.querySelector('h1')).toHaveText('Hello World!');
    });
}));

您是否在其nativeElement上使用灯具的debugElement.nativeElement有什么特定情况？

• nativeElement 返回对DOM元素的引用
• DebugElement是Angular2类，其中包含与调查元素或组件相关的各种引用和方法（请参见DebugNode和DebugElement的源代码）。

补充已经提到的内容：

  abstract class ComponentFixture {
  debugElement;       // test helper 
  componentInstance;  // access properties and methods
  nativeElement;      // access DOM
  detectChanges();    // trigger component change detection
}

来源：https : //github.com/angular/angular/blob/a7e9bc97f6a19a2b47b962bd021cb91346a44baa/modules/angular2/src/testing/test_component_builder.ts#L31

看看有关此主题和相关PR的Angular讨论。

主要是：

fixture.componentInstance == fixture.debugElement.componentInstance;
fixture.nativeElement == fixture.debugElement.nativeElement;

.nativeElement()返回DOM树，而debugElement返回JS对象（debugElement树）。debugElement是Angular的方法。

.nativeElement()是特定于浏览器的API，用于返回或提供对DOM树的访问权限。但是，如果应用程序在非浏览器平台（例如服务器或Web-Worker）上运行，在那种情况下.nativeElement()可能会引发错误。

如果我们确定我们的应用程序只能在浏览器上运行，那么我们可以使用let el = fixture.nativeElement。但是，如果我们不确定该平台，则可以安全使用，let le = fixture.debugElement因为它会返回一个普通的JS对象。