@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 😣
@testing-library/domversion: 9.3.0Relevant code or config:
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 usingqueryAllByRole('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
...ByRolelinks to the specification on W3C where thepelement is listed has having theparagraphrole. 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 😣