title: How to getByRole a button with image in React Testing Library
body: <p>The best possible selector we can use in React Testing Library is <code>getByRole()</code>. This is good because we can select our node by it's role and accessibility name.</p>
  <p>If we have a rendered component where we have multiple buttons - so I can't just use only <code>getByRole('button')</code> - 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?</p>
  <p>I know the image's accessible name derives from the <code>alt</code> attribute, and I am also aware I could use alternatives such as <code>data-testid</code>, however I would prefer to go with <code>getByRole</code> if there is a chance, so my tests resembles the way my software is used.</p>
  <pre><code>&lt;Button onClick{() =&gt; void}&gt;
   &lt;img
    src={&quot;foo&quot;}
    alt={&quot;alt text&quot;}
  /&gt;
  &lt;Button/&gt;
  </code></pre>
  <p><code>getByRole('button')</code> will throw me an error as there will be multiple buttons on the wrapping component
  <code>getAllByRole('button')</code> will return an array with all the buttons, however I only want the one with the image</p>
  <p>I tried <code>getByRole('button', {name: &quot;alt text&quot;})</code> but this doesn't work, it kinda makes sense as it's a different node.</p>
  <p>Any ideas if there is a logical way to get this using <code>getByRole</code> or I have to give up and resort to something like data-testid?</p>
  <p>Thank you!</p>