React 测试库元素标题未定义

Question

我正在尝试测试当我将鼠标悬停在图标上时，会出现带有特定文本的工具提示。

使用 Jest，react 测试库，工具提示是一个 MUI 4 组件。

图标和工具提示

<div
   data-testid="tooltip-icon"
   className={classes.infoTooltipIcon}
>
   <Tooltip
      data-testid="tooltip-text"
      title="Tooltip text"
   >
      <InfoIcon/>
   </Tooltip>
</div>

瘦身测试

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

    const infoIcon = screen.getByTestId('tooltip-icon');
    userEvent.hover(infoIcon); // works
    
    const infoTooltip = screen.getByTestId('tooltip-text')
    expect(infoTooltip.title).toEqual('Tooltip text);
  });

目前，这会导致

actual: undefined
expected: 'Tooltip text'

如果我 screen.debug(infoTooltip) title 在那里并且有正确的文本，但它是 <svg/> 这会导致问题吗？

screen.debug(infoTooltip)的输出

<svg
      aria-hidden="true"
      class="MuiSvgIcon-root makeStyles-center-52"
      data-testid="tooltip-text"
      focusable="false"
      title="Tooltip text"
      viewBox="0 0 24 24"
    >
      <path
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
      />
    </svg>

另外，我也试过screen.getByTitle('Tooltip text')，还是不行。

Answer 1

您对跨度的建议很好！如果您不想添加跨度，那么我认为您只需要调整查询以查找 aria-hidden 元素。（由于 svg 具有 aria-hidden=true 它会从可访问性树中排除）。查询如下所示： const tooltip = screen.getByTitle("Tooltip text", { hidden: true } )

Answer 2

似乎 MUI 将工具提示应用于<Tooltip/> 的任何子对象，在我的情况下，它是由<InfoIcon/> 生成的<svg/>。如果将<InfoIcon/> 包装在<span> 标记中，则工具提示title 将应用于<span/>，从而可以显式查找工具提示文本。

我的用户界面

<div
   data-testid="tooltip-icon"
   className={classes.infoTooltipIcon}
>
   <Tooltip
      data-testid="tooltip-text"
      title="Tooltip text"
   >
      <span>
         <InfoIcon/>
     </span>
   </Tooltip>
</div>

我的测试

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

    const infoIcon = screen.getByTestId('tooltip-icon');
    userEvent.hover(infoIcon);
    
    const infoTooltip = screen.getByTestId('tooltip-text')
    expect(infoTooltip.title).toEqual('Tooltip text);
  });

这样，如果我有多个工具提示，我可以确保通过测试 id 获取我想要的确切一个。

Answer 3

更好的解决方案是你应该只使用 InfoIcon 和 titleAccess 道具。 https://material-ui.com/api/svg-icon

<InfoIcon titleAccess="Tooltip Text" />

之后，您可以像这样对组件进行测试。

expect(
      getByRole('tooltip', { hidden: true, name: 'Tooltip Text' }),
    ).toBeInTheDocument();