Menu
My apologies If this is a duplicate question. I couldn't find an answer anywhere else.
Component:
<ul>
<li>Pending tasks</li>
</ul>
Test code:
expect(getByRole("listitem", { name: "Pending tasks" })).toBeInTheDocument();
Error:
TestingLibraryElementError: Unable to find an accessible element with the role "listitem" and name "Pending tasks"
Here's the codesandbox link to reproduce this: https://codesandbox.io/s/wandering-browser-mrf78?file=/src/App.test.js
Even though it shows error saying unable to find, it still suggests me li & ul tags as the available roles.
Here are the accessible roles:
--------------------------------------------------
list:
Name "":
<ul />
--------------------------------------------------
listitem:
Name "":
<li />
Could someone please explain what am I missing here? I tried using regex matchers but no luck.
504
To find elements by className in React testing library: Render a component and destructure the container object from the result. Use the getElementsByClassName() method on the container to find elements by class name.
The Testing Library family of libraries is a very light-weight solution for testing without all the implementation details. The main utilities it provides involve querying for nodes similarly to how users would find them. In this way, testing-library helps ensure your tests give you confidence in your UI code.
We are able to query the the list by screen.getByRole ("list", { name: /fruits/i }) because we have labelled the <ul> with aria-label="fruits". Once we get the list ( <ul> ), we need to get all the list items rendered under the list. We can achieve that by using within (RTL provides this method which can be used to query within an element).
You can also query the returned element (s) by their accessible name by specifying the name argument: getByRole (expectedRole, name: 'The name'). The accessible name is for simple cases equal to the label of a form element, or the text content of a button, or the value of the aria-label attribute.
getByRole ('button') would only return the Close dialog -button. To make assertions about the Open dialog -button you would need to use getAllByRole ('button', { hidden: true }). The default value for hidden can be configured. You can filter the returned elements by their selected state by setting selected: true or selected: false.
For example, getByRole ('switch') would always match <div role="switch checkbox" /> because it's the first role, while getByRole ('checkbox') would not. However, getByRole ('checkbox', { queryFallbacks: true }) would enable all fallback roles and therefore match the same element. An element doesn't have multiple roles in a given environment.
A listitem is named by the Author by spec (https://www.w3.org/TR/wai-aria-1.2/#listitem).
Name from author is defined as
author: name comes from values provided by the author in explicit markup features such as the aria-label attribute, the aria-labelledby attribute, or the host language labeling mechanism, such as the alt or title attributes in HTML, with HTML title attribute having the lowest precedence for specifying a text alternative.
-- https://www.w3.org/TR/wai-aria-1.2/#namecalculation
That does not mean you should give it an aria-label. You should only add aria attributes if you have identified an issue with assistive technology.
For your specific query I'd suggest getAllByRole('listitem').find(listitem => listitem.textContent === 'Pending task').
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
