React Testing Library测试MUI4 Tooltip时获取SVG上title为undefined如何解决

• SVG属性取值异常
  你拿到的infoTooltip是被Tooltip包裹的SVG图标元素，SVG元素的title属性无法通过.title直接读取，必须使用getAttribute('title')方法才能获取到值，所以直接取.title会返回undefined。
• getByTitle查询失败
  你的SVG元素设置了aria-hidden="true"，React Testing Library默认查询时会忽略设置了aria-hidden的元素，所以直接调用getByTitle无法匹配到目标SVG。

你的测试目标是验证hover后tooltip浮层展示指定文本，原测试实际校验的是SVG元素的静态属性，没有覆盖MUI Tooltip的浮层展示逻辑，推荐使用方案1完成功能测试。

方案1：测试Tooltip浮层展示效果（推荐） #

首先调整组件中Tooltip的配置，给浮层添加可识别标识（也可以不加，直接用role查询）：

<Tooltip
  title="Tooltip text"
  // 给MUI生成的浮层添加testid，可选配置
  PopperProps={{
    'data-testid': 'tooltip-popup'
  }}
>
  <InfoIcon/>
</Tooltip>

调整测试代码，处理MUI Tooltip的动画延迟，等待浮层渲染：

it('has a tooltip on the info icon', async () => {
  render(<Component />);
  const user = userEvent.setup();

  // 触发hover
  await user.hover(screen.getByTestId('tooltip-icon'));

  // 等待tooltip浮层渲染，MUI Tooltip浮层默认role为tooltip
  const tooltipPopup = await screen.findByRole('tooltip');
  // 校验浮层文本
  expect(tooltipPopup).toHaveTextContent('Tooltip text');
});

方案2：仅校验静态title属性（适配原有测试逻辑） #

如果不需要校验浮层展示效果，只需要校验title属性存在，修改断言方式即可：

it('has a tooltip on the info icon', () => {
  render(<Component />);

  const infoTooltip = screen.getByTestId('tooltip-text', {
    // 不忽略aria-hidden的元素
    ignoreAriaHidden: false
  });
  // 用getAttribute读取SVG的title属性
  expect(infoTooltip.getAttribute('title')).toEqual('Tooltip text');
});

如果要用getByTitle查询，也需要加上ignoreAriaHidden: false配置：

const tooltipIcon = screen.getByTitle('Tooltip text', { ignoreAriaHidden: false });

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