Angular中的fixture.componentInstance和fixture.debugElement.componentInstance有什么区别？

Question

使用 Angular 执行单元测试时，您通常使用 ComponentFixture 来获取组件的引用。 Angular CLI 中自动生成的单元测试为您提供如下内容：

const fixture = TestBed.createComponent(TestComponent);
const component = fixture.debugElement.componentInstance;

但是，我也可以像这样直接在fixture 上使用componentInstance 属性：

const fixture = TestBed.createComponent(TestComponent);
const component = fixture.componentInstance; // note that I don't reference `debugElement` here

这两者有什么区别，我什么时候应该使用一个而不是另一个？

Answer 1

这会给你更清晰的画面：https://angular.io/guide/testing#debugelement

因此，简短的回答是，如果您在没有 DOM 或其 DOM 仿真不支持完整 HTMLElement API 的非浏览器平台上运行测试，那么您必须使用 fixture.debugElement.componentInstance，否则你的测试会失败。其他的没关系，用浏览器的都可以。

另外： fixture.debugElement.componentInstance 给出 componentInstance 类型为 any 而fixture.componentInstance 为您提供componentInstance 类型的T。