Why is getByRole not working in this case?

user_5781737 0
Viewed 1287

I'm having a hard time understanding why my assertion isn't working.

Here's the DOM:

<h4>
  <span aria-hidden="true">foo</span>
  <span>bar</span>
</h4>

And here's my assertion:

screen.getByRole('heading', { name: /foo/i, hidden: true })

I've read the documentation on the hidden flag, but i'm still having trouble understanding why this isn't working.

Any ideas?

testing-library react-testing-library
1 Answers

I think the problem is where you're setting the aria-hidden attribute, as it is not being set to the h1, which has the heading role.

I made a CodeSandBox demo with failing test when the aria-hidden is set within the h1 tag.

user_52767130
Related