javascript - How to getByRole a button with image in React Testing Library - Stack Overflow

admin管理员组

文章数量:1257740

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!

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!

• javascript
• reactjs
• react-testing-library

Share Improve this question Follow asked Jul 20, 2020 at 17:08 anddakanddak 66111 gold badge66 silver badges1717 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 25

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

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.

本文标签： javascriptHow to getByRole a button with image in React Testing LibraryStack Overflow