How to getByRole a button with image in React Testing Library

Question

The best possible selector we can use in React Testing Library is getByRole(). This is good because we can select our node by it's role and accessibility name.

If we have a rendered component where we have multiple buttons - so I can't just use only getByRole('button') - and the button doesn't have text, meaning it doesn't have an accessible name, instead we have an image, how would I go about selecting that?

I know the image's accessible name derives from the alt attribute, and I am also aware I could use alternatives such as data-testid, however I would prefer to go with getByRole if there is a chance, so my tests resembles the way my software is used.

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

getByRole('button') will throw me an error as there will be multiple buttons on the wrapping component getAllByRole('button') will return an array with all the buttons, however I only want the one with the image

I tried getByRole('button', {name: "alt text"}) but this doesn't work, it kinda makes sense as it's a different node.

Any ideas if there is a logical way to get this using getByRole or I have to give up and resort to something like data-testid?

Thank you!

Answer 1

The best way that I know of to do this is by adding an aria-label to the button element. RTL will be able to query that as an accessible name with:

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

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