如何使用Angular Material组件测试工具进行DOM断言？

你遇到的问题核心是：MatButtonToggleHarness.host()返回的是TestElement对象，而toBeVisible()这类断言方法只接受原生HTMLElement/SVGElement，直接传入TestElement就会触发报错。下面是三种解决方式，按推荐程度排序：

1. 优先使用TestElement内置API（最推荐） #

Angular Component Harnesses设计的初衷就是屏蔽原生DOM的直接操作，TestElement本身提供了大量用于断言的异步方法，完全不需要获取原生元素。比如判断可见性可以直接用isVisible()：

const toggle = await loader.getHarness(MatButtonToggleHarness);
const host = await toggle.host();
// 直接断言异步返回的布尔值
expect(await host.isVisible()).toBe(true);

其他常用断言场景的示例：

• 断言组件文本：

  expect(await toggle.text()).toBe('我的按钮');
  

• 断言是否包含某个CSS类：

  expect(await host.hasClass('mat-button-toggle-checked')).toBe(true);
  

• 断言DOM属性值：

  expect(await host.getAttribute('aria-pressed')).toBe('true');
  

2. 获取原生HTMLElement（特殊场景用） #

如果确实需要用原生DOM的断言方法（比如一些自定义匹配器），可以通过TestElement的nativeElement属性获取原生元素：

const toggle = await loader.getHarness(MatButtonToggleHarness);
const host = await toggle.host();
// 先获取原生元素，注意nativeElement是Promise类型
const nativeEl = await host.nativeElement;
expect(nativeEl).toBeVisible();

3. 利用Harness自身提供的快捷方法 #

部分Material组件的Harness已经封装了常用状态的断言方法，比如MatButtonToggleHarness可以直接用isChecked()断言选中状态：

const toggle = await loader.getHarness(MatButtonToggleHarness);
expect(await toggle.isChecked()).toBe(true);

总结 #

你之前的操作错误在于把TestElement对象直接传给了需要原生DOM元素的断言方法。优先使用TestElement的内置API或Harness提供的封装方法，既能符合Harness的设计理念，也能避免原生DOM操作带来的耦合问题。

内容的提问来源于stack exchange，提问作者bjmc