Question

Hello Stack Overflow社区，

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

但是，这会导致TypeError：无法读取属性＆＃39; nativeElement＆＃39;为Angular组件的null。作为示例，具有app-movie选择器的电影组件：

it ('should have a element selector called app-root in DOM', () => { expect(fixture.debugElement.query(By.css(‘app-movie’)).nativeElement).toBeTruthy();

你能告诉我怎么做吗？非常感谢！

Answer 1

检查调试元素而不是其本机元素。

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

如果我们按照问题描述在本机元素上对其进行测试，那么如果未找到该元素，那么Jasmine将抛出错误，因为debugElement本身将为空（空）。示例错误：

TypeError: Cannot read property 'nativeElement' of null

Answer 2

使用..访问元素。

fixture.debugElement.query(...).nativeElement

..应该可以工作，所以我认为在debugElement内找不到您的元素。为了防止这种情况的发生，我建议您在访问nativeElement之前添加一个Test：

const debugMovieElement = fixture.debugElement.query(By.css('app-movie'))

expect(debugElement).toBeTruthy();
expect(debugElement.nativeElement).toBeTruthy();

（尽管在检查debugElement之后可能不必检查nativeElement，但它是您尝试执行的操作）

测试以验证DOM中是否存在组件元素 - Jasmine＆amp;角

2 个答案: