...ByRole with paragraph not working

[thany]

• @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 😣

[thany]

For anyone running into this as well:

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

[MatanBobi]

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.

[thany]

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 👍🏻

[MatanBobi]

🎉 This issue has been resolved in version 10.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[chris-mcdonald-dev]

In case anyone else runs into this issue, I couldn't get this to work after the fix was implemented until I updated @testing-library/react from v14 -> v16.

[thathurtabit]

I get TestingLibraryElementError: Unable to find an accessible element with the role "paragraph" with:

    "@testing-library/dom": "^10.1.0",
    "@testing-library/jest-dom": "^6.4.6",
    "@testing-library/react": "^16.0.0",

[chris-mcdonald-dev]

I get TestingLibraryElementError: Unable to find an accessible element with the role "paragraph" with:

    "@testing-library/dom": "^10.1.0",
    "@testing-library/jest-dom": "^6.4.6",
    "@testing-library/react": "^16.0.0",

Similar to what I had. I also updated jsdom from v23 -> v24.1.
Not sure if that might help.

[thathurtabit]

I get TestingLibraryElementError: Unable to find an accessible element with the role "paragraph" with:

    "@testing-library/dom": "^10.1.0",
    "@testing-library/jest-dom": "^6.4.6",
    "@testing-library/react": "^16.0.0",

Similar to what I had. I also updated jsdom from v23 -> v24.1. Not sure if that might help.

I'm on "jsdom": "^24.1.0", as well, so I might be out of luck there :/
I've used another selector instead of getByRole("paragraph") for now.

[MatanBobi]

@thathurtabit can you please open a new issue with a reproduction so we'll be able to help?
This should be resolved.

[thathurtabit]

Seems you're right @MatanBobi - I tried to recreate the issue here - but the test passes.
If I can successfully recreate it I'll create a new issue. 👍