React 测试库元素标题未定义

Question

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

使用 Jest，反应测试库，工具提示是 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

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

<InfoIcon titleAccess="Tooltip Text" />

之后，您可以像这样测试组件作为示例。

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

Answer 2

似乎 MUI 将工具提示应用于 <Tooltip/> 的任何子项，在我的例子中它是由 <InfoIcon/> 生成的 <svg/>。如果将 <InfoIcon/> 包装在 <span> 标记中，工具提示 title 将应用于 <span/>，从而可以明确查找工具提示文本。

我的UI

<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

你对跨度的建议很好！如果您不想添加跨度，那么我认为您只需要调整查询以查找 aria-hidden 元素。（因为 svg 有 aria-hidden=true 它被排除在可访问性树之外）。查询看起来像： const tooltip = screen.getByTitle("Tooltip text", { hidden: true } )

React 测试库元素标题未定义

React testing library element title undefined

reactjs

jestjs

material-ui

react-testing-library