获取 React 测试库中 styles 的列表

Question

我想检查所有选定span元素的样式：

<div class='color selected'>
  <span/>
</div>

我试过这样：

const selectedColorNodes = document.querySelectorAll('.color.selected');
const selectedColors = Array.from(selectedColorNodes).map(
      (item: HTMLElement) => item.firstElementChild.style.backgroundColor,
    );
expect(selectedColors).toBe(['ffffff', '000000', '7d533f']);

但selectedColors始终是['','','']

style也突出显示错误： Property 'style' does not exist on type 'Element'我做错了什么？

Answer 1

我不确定，因为您没有附加类 css 样式，但我可以看到您正在访问firstElementChild ，在您提供的示例中它是一个没有类的span 。 我假设这个跨度没有任何样式，但在页面上看起来它具有您试图断言的背景颜色，而实际上它是使用该颜色设置样式的父元素，所以您得到的是空字符串，因为那里子元素本身没有背景颜色。

通常不建议为样式编写测试，但如果您发现自己经常这样做，我建议您添加jest-dom ，它有许多有用的断言，如toHaveClass或toHaveStyle ，这将使您的测试更简洁和更具可读性。