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

Question

Hello Stack Overflow Community，

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

但是，这会导致 TypeError： 无法读取 Angular 组件的 null 属性 'nativeElement'。例如，具有应用电影选择器的电影组件：

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 将抛出错误，因为调试元素本身将为空(null(。示例错误：

TypeError: Cannot read property 'nativeElement' of null

Answer 2

访问元素时使用..

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

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

const debugMovieElement = fixture.debugElement.query(By.css('app-movie'))
expect(debugElement).toBeTruthy();
expect(debugElement.nativeElement).toBeTruthy();

(虽然在检查调试元素后可能不需要检查 nativeElement，但它是你试图做的(