反应测试 - 样式表中的 display:none 不起作用，但在内联时起作用答案

【问题标题】：react tests- display:none in stylesheet doesn't work in but works when inline反应测试 - 样式表中的 display:none 不起作用，但在内联时起作用
【发布时间】：2020-09-18 20:27:43
【问题描述】：

我正在测试一个 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;

如果样式属性在样式表中，我如何让测试识别样式属性？

【问题讨论】：

标签： html css reactjs jestjs react-testing-library

【解决方案1】：

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

【讨论】：