使用userEvent/fireEvent hover无法触发Tooltip组件span可见性切换

核心问题原因 #

你遇到的问题是因为：styled-components生成的伪类样式（:hover）不会直接反映在元素的style属性上，而是通过计算后的CSS生效。直接断言元素的style.visibility会获取不到伪类触发的样式，必须通过getComputedStyle来读取实际渲染的样式值。

解决方案1：通过计算样式断言可见性 #

直接使用getComputedStyle获取元素实际生效的CSS属性，这是最直接的解决方式：

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Tooltip from './Tooltip';

test('tooltip 悬停时显示', async () => {
  const user = userEvent.setup();
  render(<Tooltip content="测试提示">悬停触发</Tooltip>);
  
  const triggerElement = screen.getByText('悬停触发');
  const tooltipElement = screen.getByRole('tooltip'); // 建议给TooltipBox添加role属性方便查询

  // 初始状态校验
  expect(getComputedStyle(tooltipElement).visibility).toBe('hidden');

  // 触发悬停事件
  await user.hover(triggerElement);

  // 校验计算后的可见性
  expect(getComputedStyle(tooltipElement).visibility).toBe('visible');
});

解决方案2：确认组件DOM结构层级 #

确保TooltipBox是TooltipWrapper的直接或间接子元素，否则父元素的:hover伪类无法作用到子元素。比如正确的组件结构：

import styled from 'styled-components';

const TooltipWrapper = styled.div`
  position: relative;
  &:hover .tooltip-content {
    visibility: visible;
  }
`;

const TooltipBox = styled.span`
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* 其他样式 */
`;

export default function Tooltip({ content, children }) {
  return (
    <TooltipWrapper>
      {children}
      <TooltipBox className="tooltip-content" role="tooltip">
        {content}
      </TooltipBox>
    </TooltipWrapper>
  );
}

解决方案3：改用state控制显示（备选） #

如果伪类测试始终有问题，可以换成通过鼠标事件手动控制状态，这种方式在测试中更易断言：

import { useState } from 'react';
import styled from 'styled-components';

const TooltipWrapper = styled.div`
  position: relative;
`;

const TooltipBox = styled.span`
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
`;

export default function Tooltip({ content, children }) {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <TooltipWrapper
      onMouseEnter={() => setIsVisible(true)}
      onMouseLeave={() => setIsVisible(false)}
    >
      {children}
      <TooltipBox 
        role="tooltip"
        style={{ visibility: isVisible ? 'visible' : 'hidden' }}
      >
        {content}
      </TooltipBox>
    </TooltipWrapper>
  );
}

对应的测试代码：

test('tooltip 悬停时显示', async () => {
  const user = userEvent.setup();
  render(<Tooltip content="测试提示">悬停触发</Tooltip>);
  
  const triggerElement = screen.getByText('悬停触发');
  const tooltipElement = screen.getByRole('tooltip');

  await user.hover(triggerElement);
  expect(tooltipElement).toHaveStyle('visibility: visible');
});

额外检查点 #

• 确保使用的@testing-library/react和@testing-library/user-event是最新版本，旧版本可能存在hover事件触发的bug。
• 如果使用的是userEvent v13及以下版本，不需要用userEvent.setup()，直接调用userEvent.hover(triggerElement)即可（无需await）。

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