反应测试-显示：样式表中的任何内容都不起作用，但在内联时起作用

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

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