如何在 React 测试库中获取带有图像的按钮

Question

我们可以在 React 测试库中使用的最好的 select 是 getByRole()。这很好，因为我们可以 select 我们的节点通过它的角色和可访问性名称。

如果我们有一个呈现的组件，其中有多个按钮 - 所以我不能只使用 getByRole('button') - 并且按钮没有文本，这意味着它没有可访问的名称，相反，我们有一张图片，我该如何处理 select 呢？

我知道图像的可访问名称源自 alt 属性，我也知道我可以使用 data-testid 等替代方法，但我更愿意使用 getByRole如果有机会，那么我的测试类似于我的软件使用方式。

<Button onClick{() => void}>
 <img
  src={"foo"}
  alt={"alt text"}
/>
<Button/>

getByRole('button') 会给我一个错误，因为包装组件上会有多个按钮 getAllByRole('button') 将 return 一个包含所有按钮的数组，但是我只想要带有图像的那个

我试过 getByRole('button', {name: "alt text"}) 但这行不通，因为它是不同的节点，所以有点道理。

如果有合理的方法可以使用 getByRole 或者我不得不放弃并求助于 data-testid 之类的东西，有什么想法吗？

谢谢！

Answer 1

您可以select按screen.getByAltText('alt text').parentNode对应的按钮。

如果只是触发点击事件，可以直接使用img节点—— userEvent.click(screen.getByAltText('alt text')).

希望这对您有用。

Answer 2

你不能 select 所有带有 getAllByRole 的按钮，然后使用一种方法 select 数组中的这个按钮吗？

Answer 3

据我所知，执行此操作的最佳方法是向按钮元素添加 aria-label。 RTL 将能够将其作为可访问名称进行查询：

getByRole('button', { name: /button-name/i })

<Button aria-label="button-name" onClick{() => void}>
  <img
    src={"foo"}
    alt={"alt text"}
  />
<Button/>

How to getByRole a button with image in React Testing Library