dom-testing-library
dom-testing-library copied to clipboard
testing-library
getByRole not finding Element by implicit role
@testing-library/domversion: 16.9- Testing Framework and version: 9.2
- DOM Environment: 4.1.0
See codesandbox
Relevant code or config:
test("getByRole", () => {
render(
<div>
<strong>hello</strong>
</div>
);
screen.getByRole("strong"); // errors
});
What you did:
What happened:
Unable to find an accessible element with the role "strong"
Here are the accessible roles:
document:
Name "":
<body />
--------------------------------------------------
<body>
<div>
<div>
<strong>
hello
</strong>
</div>
</div>
</body>
Reproduction:
https://codesandbox.io/s/react-testing-library-demo-forked-lzjrl1?file=/src/tests/getByRole.js
Problem description:
According to https://testing-library.com/docs/queries/byrole/, we should use the HTMLElement's role. According to this table, <strong> has an implicit role of strong but it does not get found
This should be available in the next version of aria-query.
The fix was committed in this PR https://github.com/A11yance/aria-query/pull/447 (updated the relatedConcepts of the button role)
When is the deployment scheduled for this? Currently facing a similar issue in react-testing-library not being able to select strong elements by their implicit role.
@samirergaibi - DTL 10 was released in our alpha channel, you can give it a try. We still want to run it in some wider codebases before releasing it. If you can give it a try in your repo by using overrides and provide inputs it can be amazing.
:tada: This issue has been resolved in version 10.0.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket: