React Testing Library测试Navbar悬停菜单显示失败问题求助

问题描述 #

我是React测试新手，在Next.js项目中开发了NavbarOption组件：菜单默认通过hidden类隐藏，鼠标悬停时显示。编写测试用例验证该逻辑时，初始状态断言菜单不可见却报错，提示元素可见。

组件代码 #

type NavbarOptionProps = {
  name: string;
  menu?: React.ReactNode;
};

function NavbarOption({ name, menu }: NavbarOptionProps) {
  return (
    <div className="group hover:bg-slate-700/60 relative flex z-20">
      <div className="flex items-center justify-center gap-3 w-full h-full px-4">
        <FontAwesomeIcon
          icon={faChevronDown}
          style={{ fontSize: 12, color: "#807979", cursor: "pointer" }}
        />
        <span className="cursor-pointer">{name}</span>
      </div>
      <div className="hidden group-hover:block">{menu}</div>
    </div>
  );
}

测试代码 #

test("displays menu on hover", () => {
  const name = "Example Name";
  const menu = <div>Example Menu</div>;
  render(
    <NavbarOption
      name={name}
      menu={menu}
    />
  );

  const navbarOption = screen.getByText(name);
  expect(screen.queryByText(/Example Menu/i)).not.toBeVisible();

  userEvent.hover(navbarOption);

  const menuElement = screen.getByText(/Example Menu/i);
  expect(menuElement).toBeVisible();
});

报错信息 #

● displays menu on hover

expect(element).not.toBeVisible()

Received element is visible:

解决方法 #

1. 加载Tailwind CSS到测试环境 #

Jest默认不会解析Tailwind工具类，导致hidden类无法生效，元素始终处于可见状态。

• 解决：在Jest配置文件（如jest.setup.js）中导入项目全局样式文件（确保文件已引入Tailwind）：

import '@/styles/globals.css';

2. 修正悬停目标元素 #

原测试中悬停的是name对应的<span>元素，但组件中触发group-hover样式的是外层div.group容器，只有悬停这个容器才会触发菜单显示。

• 修正后的测试代码：

test("displays menu on hover", () => {
  const name = "Example Name";
  const menu = <div>Example Menu</div>;
  render(<NavbarOption name={name} menu={menu} />);

  // 获取外层group容器
  const navbarGroup = screen.getByText(name).closest("div.group");
  const menuElement = screen.getByText(/Example Menu/i);

  // 初始状态验证
  expect(menuElement).toHaveClass("hidden");
  expect(menuElement).not.toBeVisible();

  // 悬停group容器
  userEvent.hover(navbarGroup!);

  // 悬停后状态验证
  expect(menuElement).toHaveClass("block");
  expect(menuElement).toBeVisible();
});

3. 优化断言逻辑 #

结合类名检查和可见性断言，让测试更可靠：

• 初始状态：验证菜单元素包含hidden类且不可见
• 悬停后：验证菜单元素包含block类且可见

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