...ByRole with `paragraph` not working

thany commented 1 year ago

@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 commented 1 year ago

For anyone running into this as well:

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

MatanBobi commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

~~@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 :)

MatanBobi commented 3 months ago

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

The release is available on:

Your semantic-release bot :package::rocket:

chris-mcdonald-dev commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

thathurtabit commented 1 month ago

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

testing-library / dom-testing-library