dom-testing-library ...ByRole with `paragraph` not working

@testing-library/dom version: 9.3.0
Testing Framework and version: vitest 0.28.5
DOM Environment: jsdom 21.1.0

Relevant code or config:

render(<div><p>blah</p></div>);
console.log(screen.queryAllByRole('paragraph'));

What you did:

Just searching for paragraphs in any rendered HTML, will fail. How the HTML gets rendered (React in this particular case) I don't think that matters anything.

What happened:

It won't find any elements by the role paragraph. Other roles are found successfully.

Reproduction:

https://codesandbox.io/s/react-testing-library-demo-forked-z4mf2z?file=/src/tests/hello.js

I've made the Hello component output a <p> and looked it up using queryAllByRole('paragraph'), which returns an empty array. I would expect an array of one item, namely the paragraph element.

Problem description:

I need to test if a paragraph, when certain conditions are met, is present or absent in the resulting render. The documentation on ...ByRole links to the specification on W3C where the p element is listed has having the paragraph role. So, it should work.

Suggested solution:

I've been digging around to figure out how the role of a given element is calculated, and to me it seems rather over-engineered. There's probably a good reason for it though, but I did end up at aria-query from where you seem to be fetching a list of what appears to be a mapping between elements and roles?

Ultimately I couldn't figure out how and where this list is getting built. I don't mean to patronise, but it seems pretty basic to me, having a map of tagName=>role floating somwhere. It could be the heat wave hitting my brain though 😣

Jun 12 '23 14:06 thany

For anyone running into this as well:

Our workaround, for the moment at least, is to use the querySelector or querySelectorAll functions.

Jun 12 '23 14:06 thany

Hi @thany :) AFAIU, this was already pushed to aria-query in this commit but unfortunately, aria-query hasn't released a new version containing this change to npm yet. Once they'll release it, we'll upgrade the dependency we have in order to fix this issue.

I've been digging around to figure out how the role of a given element is calculated, and to me it seems rather over-engineered. There's probably a good reason for it though, but I did end up at aria-query from where you seem to be fetching a list of what appears to be a mapping between elements and roles? Ultimately I couldn't figure out how and where this list is getting built. I don't mean to patronise, but it seems pretty basic to me, having a map of tagName=>role floating somwhere. It could be the heat wave hitting my brain though 😣

Since dom-testing-library is a library for dom testing, the separation of concerns is such that aria-query follows the spec and we're using it so we won't have any spec logic, rather only a set of utilities for testing. Hope that clears things :)

I'm keeping this issue open until we'll upgrade aria-query. Thanks again.

Jun 12 '23 14:06 MatanBobi

See, I knew there was an explanation. I hope for your sake it's not actually as complicated as my brain is comprehending it. Like I said, it's probably the heat 😀

Anyway, thanks for picking this up as quickly as you did 👍🏻

Jun 12 '23 15:06 thany

~~@thany Looks like a new version of aria-query was released, can you please re-install testing-library to get the latest version and see if this works now? Thanks :)~~

Edit: We've pinned the version at the moment because it caused us some issues. The above comment is irrelevant for now :)

Jun 14 '23 11:06 MatanBobi

:tada: This issue has been resolved in version 10.0.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

Apr 08 '24 13:04 MatanBobi