小编Ahm*_*sam的帖子

我有一个简单的 React 组件，最初有一个 Tailwind CSS 类，hidden该类应用 CSSdisplay: none并将该类更改为visible单击按钮。当我用expect().not.toBeVisible()它进行测试时，它告诉我该元素在具有类时已经可见hidden。

如果我不使用 Tailwind CSS 并使用法线，style={{display: 'none'}}它将正确识别该元素不可见。这显然意味着问题出在 Tailwind CSS 上。

这是我的测试：

test("Notification bar should be initially hidden but visible on click", async () => {
    render(<Notifications />);

    expect(await screen.findByTestId("list")).not.toBeVisible();
    // this test fails while the element already has a Tailwind CSS class of "hidden"
});

虽然这是我的组件：

<ul className="hidden" data-testid="list">
  <li>item 1</li>
</ul>

我想通过向特定项目添加隐藏的 sm:flex 来使我的导航栏具有响应能力。这意味着它默认会隐藏，但仅在小屏幕及以上屏幕上显示。我做了一些调试，发现隐藏覆盖了所有内容，甚至是响应式变体。其他显示属性适用于响应式变体。这是我的代码：

className="hidden sm:flex sm:w-2/5 w-11/12 mt-4 sm:mt-0 items-center shadow-md"