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!