单元测试中Tailwind CSS样式未生效问题求助

问题背景 #

使用Vite+React+Vitest+Testing Library编写组件测试时，手动测试排序下拉菜单的hover显示功能正常，但自动化测试在hover后的可见性断言处失败。排查发现jsdom环境下Tailwind的peer-hover伪类样式未生效，即使配置了引入全局CSS和开启Vitest的css选项也无法解决。

技术栈 #

• vite
• react
• vitest
• testing-library/react
• testing-library/jest-dom

问题原因 #

jsdom 不支持模拟CSS伪类的状态（如:hover），userEvent.hover()仅会触发mouseenter/mouseleave DOM事件，但不会让Tailwind的peer-hover这类依赖CSS伪类的样式生效，导致下拉菜单始终处于隐藏状态。

解决方案 #

方案1：改用React状态控制下拉菜单显示（推荐） #

将CSS伪类的交互逻辑改为React状态管理，这样测试时可以通过事件触发状态变化，更符合React组件的测试逻辑，也不受限于CSS环境：

修改后的组件代码

// src/components/CommentTitle.jsx
import Proptypes from "prop-types";
import { MdSort } from "react-icons/md";
import { useState } from "react";

function CommentTitle({ commentListLength }) {
  const [showSortMenu, setShowSortMenu] = useState(false);

  return (
    <div
      data-testid="comment-title"
      className="flex flex-row items-center gap-6 mb-20 "
    >
      <span data-testid="number-of-comments">
        comments{commentListLength || ""}
      </span>
      <div className="flex flex-row gap-2 items-center">
        <div className="flex flex-row items-center relative cursor-pointer">
          <div 
            className="self-start text-lg" 
            data-testid="sort-by-icon"
            onMouseEnter={() => setShowSortMenu(true)}
            onMouseLeave={() => setShowSortMenu(false)}
          >
            <MdSort />
          </div>
          <ul className={`${showSortMenu ? 'block' : 'hidden'} absolute rounded whitespace-pre top-6 left-1/2 -translate-x-1/2 p-2`}>
            <li>Hottest First</li>
            <li>Newest First</li>
          </ul>
        </div>
        <div data-testid="sort-text">sort</div>
      </div>
    </div>
  );
}

CommentTitle.propTypes = {
  commentListLength: Proptypes.number
};

export default CommentTitle;

测试代码无需修改

原测试代码中的user.hover()会触发mouseenter事件，进而更新状态，此时断言元素可见即可通过。

方案2：测试时手动修改样式（临时方案） #

如果不想修改组件实现，可以在测试hover后手动修改下拉菜单的样式，强制其显示：

// test/comment.test.jsx
import { it, expect } from "vitest";
import { screen, render } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
import CommentTitle from "../components/Comment/CommentTitle";

it("存在排序图标，hover时显示包含“Hottest First”和“Newest First”的列表，图标旁有“sort”文本。", async () => {
  const user = userEvent.setup();
  render(<CommentTitle commentListLength={0} />);

  expect(screen.queryByText("sort")).not.toBeNull();

  const sortByIcon = screen.queryByTestId("sort-by-icon");
  expect(sortByIcon).not.toBeNull();
  const hottestFirst = screen.queryByText("Hottest First");
  const newestFirst = screen.queryByText("Newest First");
  expect(hottestFirst).not.toBeVisible();
  expect(newestFirst).not.toBeVisible();
  
  await user.hover(sortByIcon);
  // 手动修改样式，模拟peer-hover生效
  hottestFirst.classList.remove('hidden');
  hottestFirst.classList.add('block');
  newestFirst.classList.remove('hidden');
  newestFirst.classList.add('block');
  
  expect(hottestFirst).toBeVisible();
  expect(newestFirst).toBeVisible();
});

说明 #

方案1更推荐，因为它将交互逻辑纳入React的状态管理，不仅测试更可靠，也让组件的交互逻辑更清晰，便于后续维护。方案2属于临时 workaround，仅适用于无法修改组件代码的场景。

内容的提问来源于stack exchange，提问作者peterhuan