反应测试- 显示：样式表中的无不起作用，但在内联时有效

Question

我正在测试div是否设置为display: none.我已经在样式表中这样设置了它，但测试告诉我它仍然display: block.当我更改为内联CSS时，测试承认它确实是display: none。

是的，我确实记得导入样式表，因为该元素在浏览器中是不可见的。

反应组件的一部分

<div className="navbar-buttons">
<button type="button">Sign In</button>
</div>

样式表

.navbar-buttons{
display: none;
}

测试断言

expect(signinBtns).toHaveStyle('display: none')

测试结果打印到终端

expect(element).toHaveStyle()
- Expected
- display: none;
+ display: block;

如何让测试识别样式属性(如果它们在样式表中(？

Answer 1

您无法检查样式属性是否通过测试应用，除非它是内联样式。您只能检查类名是否已应用，并假定它是正确的类。