...ByRole with paragraph not working #1234
Description
@testing-library/domversion: 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 😣