angular - 测试验证 DOM 中是否存在组件元素 - Jasmine 和 Angular

Question

Stack Overflow 社区您好，

我在 Angular 5 中编写简单的 Jasmine 单元测试来验证组件的 DOM 中是否存在元素时遇到问题。我成功测试了标准 HTML 元素，例如 p: expect(fixture.debugElement.query(By.css('p')).nativeElement).toBeTruthy();

但是，这会导致 TypeError:无法读取 Angular 组件的 null 属性“nativeElement”。例如，带有 app-movie 选择器的电影组件:

it ('在 DOM 中应该有一个名为 app-root 的元素选择器', () => {
Expect(fixture.debugElement.query(By.css('app-movie')).nativeElement).toBeTruthy();

您能建议一下如何做到这一点吗？非常感谢!

Answer 1

检查调试元素而不是其 native 元素。

const debugElement = fixture.debugElement.query(By.css('p'));
expect(debugElement).toBeTruthy();

如果我们按照问题描述在 native 元素上进行测试，那么如果找不到该元素，Jasmine 将抛出错误，因为 debugElement 本身将为空(null)。错误示例:

TypeError: Cannot read property 'nativeElement' of null