React Testing Library测试MUI侧边栏hover显示标题失败求助

针对你遇到的hover样式在测试环境不生效的问题，核心原因是jsdom（React Testing Library默认的测试环境）不支持CSS伪类（如:hover）的自动样式计算，以下是几个可行的测试方案：

方案1：测试状态逻辑而非直接测样式 #

把hover显示标题的逻辑从纯CSS伪类改成组件内的状态控制，直接测试状态变化带来的渲染结果：

• 用useState定义isHovered状态
• 给<a>元素绑定onMouseEnter和onMouseLeave事件，更新isHovered
• 标题元素的display属性根据isHovered动态切换
• 测试时触发hover事件，断言标题元素的可见性

示例代码片段：

const SidebarItem = () => {
  const [isHovered, setIsHovered] = useState(false);
  const classes = useStyles();

  return (
    <a
      className={classes.item}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <Icon />
      <span 
        className={classes.itemTitle} 
        style={{ display: isHovered ? 'inline-block' : 'none' }}
      >
        标题
      </span>
    </a>
  );
};

// 测试代码
test('hover时显示标题', async () => {
  render(<SidebarItem />);
  const item = screen.getByRole('link');
  const title = screen.getByText('标题');

  expect(title).not.toBeVisible();
  await userEvent.hover(item);
  expect(title).toBeVisible();
});

方案2：手动模拟JSS的hover样式应用 #

如果坚持用纯CSS伪类实现，可手动获取JSS生成的hover样式规则，直接应用到元素后再断言：

• 通过screen.debug()找到JSS生成的hover类（比如itemTitle-xxxx-hover）
• 触发mouseOver事件后，手动给标题元素添加对应hover类
• 再用getComputedStyle或toBeVisible()验证样式变化

示例代码片段：

test('hover时显示标题', () => {
  render(<SidebarItem />);
  const item = screen.getByRole('link');
  const title = screen.getByText('标题');

  expect(title).not.toBeVisible();
  fireEvent.mouseOver(item);
  // 替换成实际JSS生成的hover类名
  title.classList.add('itemTitle-xxxx-hover');
  expect(getComputedStyle(title).display).toBe('inline-block');
});

方案3：结合ThemeProvider与toHaveStyle断言 #

确保测试环境加载Material UI的ThemeProvider保证JSS样式正常生成，再用@testing-library/jest-dom的toHaveStyle断言样式：

示例代码片段：

test('hover时显示标题', async () => {
  render(
    <ThemeProvider theme={createTheme()}>
      <SidebarItem />
    </ThemeProvider>
  );
  const item = screen.getByRole('link');
  const title = screen.getByText('标题');

  await userEvent.hover(item);
  expect(title).toHaveStyle({ display: 'inline-block' });
});

关键注意点 #

• 测试必须用ThemeProvider包裹组件，否则JSS样式无法正常注入
• 优先测试用户可见的行为（元素是否可见），而非过度纠结CSS属性细节

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