Open RedX2501 opened 2 weeks ago
Hi @RedX2501. As you can see from this line:
<li class="MuiTreeItem-root css-lvlffg" role="treeitem" aria-expanded="false" id=":r2:-12" tabindex="-1"><div class="css-tc4u2w MuiTreeItem-content"><div class="MuiTreeItem-iconContainer"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="m376-276-16-16 188-188-188-189 16-16 204 205-204 204Z"></path></svg></div><div class="MuiTreeItem-label"><div class="MuiBox-root css-11odjfa"><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true"><path d="m644-276-16-16 188-188-188-188 16-16 204 204-204 204Zm-328 0L112-480l204-204 16 16-188 188 188 188-16 16Zm3.719-178Q309-454 301.5-461.57q-7.5-7.57-7.5-18.29 0-10.719 7.57-18.929Q309.14-507 319.86-507q10.719 0 18.929 8.281 8.211 8.28 8.211 19 0 10.719-8.281 18.219-8.28 7.5-19 7.5Zm160 0Q469-454 461.5-461.57q-7.5-7.57-7.5-18.29 0-10.719 7.57-18.929Q469.14-507 479.86-507q10.719 0 18.929 8.281 8.211 8.28 8.211 19 0 10.719-8.281 18.219-8.28 7.5-19 7.5Zm160 0Q629-454 621.5-461.57q-7.5-7.57-7.5-18.29 0-10.719 7.57-18.929Q629.14-507 639.86-507q10.719 0 18.929 8.281 8.211 8.28 8.211 19 0 10.719-8.281 18.219-8.28 7.5-19 7.5Z"></path></svg><div class="MuiBox-root css-15fzge"><span aria-label="Ethernet SocketConnections" class="">Eth SockCon</span> (60)</div></div></div></div></li>
Your text is divided into different element: Eth SockCon and (60) are in two different elements and that's what's probably causing the issue.
To top that, the span
has an aria-label and that's probably why getByRole('treeitem', {name: "Eth SockCon (60)"})
isn't working.
Can you please try: getByRole('treeitem', {name: "Ethernet SocketConnections (60)"})
instead?
@testing-library/react
version: 19.0.1Relevant code or config:
I'm tiiyng to find a menu item in a react application by it's text.
The text I see is
Eth SockCon (60)
but it cannot be found found bygetByText
or role and name.As can be seen below fetching all
treeitem
returns the element I'm expecting to see (output 43) but when trying to fetch by that text (output 51) it cannot find the element.The generated html can be seen in dump 42.
To see what is even found I created the following setup to just dump the information:
which created the following output:
Each item in the menu is created with
So from my point of view, this looks like a bug when trying to retrieve the text but I'm unsure whether I'm doing anything wrong.