Angular2 testing: What's the difference between a DebugElement and a NativeElement object in a ComponentFixture? Angular2 testing: What's the difference between a DebugElement and a NativeElement object in a ComponentFixture? angular angular

Angular2 testing: What's the difference between a DebugElement and a NativeElement object in a ComponentFixture?


  • nativeElement returns a reference to the DOM element
  • DebugElement is an Angular2 class that contains all kinds of references and methods relevant to investigate an element or component (See the source of DebugNode and DebugElement


to add on to what has been mentioned already :

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

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


Take a look at Angular discussion about this topic and related PR.

Mainly:

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