How to getByRole a button with image in React Testing Library

user_9599448 0
Viewed 17749

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!

react-testing-library reactjs javascript
3 Answers

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/>
user_138503550

You could select the corresponding button by screen.getByAltText('alt text').parentNode.

If it's only about firing a click event, you could directly use the img node - userEvent.click(screen.getByAltText('alt text')).

Hope this works for your case.

user_112365230

Can't you select all buttons with getAllByRole and then use a method to select this button in the array?

user_140420880
Related