Closed
Description
"@testing-library/react": "11.0.2",
"@testing-library/user-event": "^13.0.2",
"@testing-library/jest-dom": "5.11.4"
I am using jest with latest version of CRA.
default Jest environment (JSDom)
Node version 14
Relevant code or config:
Here is the error I get when I try
render(<Test />);
const tab1 = screen.getByRole('tab', { name: /Tab 1/ });
const tab2 = screen.getByRole('tab', { name: /Tab 2/ });
const panel1 = screen.getByRole('tabpanel', { name: /Panel 1/ });
const panel2 = screen.getByRole('tabpanel', { name: /Panel 2/ });
userEvent.click(tab2);
expect(tab1).not.toHaveFocus();
expect(panel1).not.toBeVisible();
expect(tab2).toHaveFocus();
expect(panel2).toBeVisible();
I have been refactoring to use screen.getByRole with getByText and previous this test was working, but now it doesn't seem to work. Mainly the error I am getting is the following
Unable to find an accessible element with the role "tabpanel" and name
/Panel 1/
and here are the rest of the error (notice the tabpanel where it expects Name as "Tab 1" instead of "Panel 1"):
Here are the accessible roles:
tablist:
Name "Pages":
<div
aria-label="Pages"
aria-orientation="horizontal"
id="id-iqb0tk"
role="tablist"
variant="graph"
/>
--------------------------------------------------
tab:
Name "Tab 1":
<button
aria-controls="id-iqb0tk-3"
aria-selected="true"
class="css-vurnku"
id="id-iqb0tk-1"
role="tab"
tabindex="0"
/>
Name "Tab 2":
<button
aria-controls="id-iqb0tk-4"
aria-selected="false"
class="css-vurnku"
id="id-iqb0tk-2"
role="tab"
tabindex="-1"
/>
--------------------------------------------------
tabpanel:
Name "Tab 1":
<div
aria-labelledby="id-iqb0tk-1"
id="id-iqb0tk-3"
role="tabpanel"
style=""
tabindex="0"
variant="graph"
/>
--------------------------------------------------
<body>
<div>
<div
aria-label="Pages"
aria-orientation="horizontal"
id="id-iqb0tk"
role="tablist"
variant="graph"
>
<div
class="css-vurnku"
>
<button
aria-controls="id-iqb0tk-3"
aria-selected="true"
class="css-vurnku"
id="id-iqb0tk-1"
role="tab"
tabindex="0"
>
Tab 1
</button>
<button
aria-controls="id-iqb0tk-4"
aria-selected="false"
class="css-vurnku"
id="id-iqb0tk-2"
role="tab"
tabindex="-1"
>
Tab 2
</button>
</div>
</div>
<div
aria-labelledby="id-iqb0tk-1"
id="id-iqb0tk-3"
role="tabpanel"
style=""
tabindex="0"
variant="graph"
>
<div>
Panel 1
</div>
</div>
<div
aria-labelledby="id-iqb0tk-2"
hidden=""
id="id-iqb0tk-4"
role="tabpanel"
style="display: none;"
tabindex="0"
variant="graph"
>
Panel 2
</div>
</div>
</body>
TestingLibraryElementError: Unable to find an accessible element with the role "tabpanel" and name `/Panel 1/`
Here are the accessible roles:
tablist:
Name "Pages":
<div
aria-label="Pages"
aria-orientation="horizontal"
id="id-iqb0tk"
role="tablist"
variant="graph"
/>
--------------------------------------------------
tab:
Name "Tab 1":
<button
aria-controls="id-iqb0tk-3"
aria-selected="true"
class="css-vurnku"
id="id-iqb0tk-1"
role="tab"
tabindex="0"
/>
Name "Tab 2":
<button
aria-controls="id-iqb0tk-4"
aria-selected="false"
class="css-vurnku"
id="id-iqb0tk-2"
role="tab"
tabindex="-1"
/>
--------------------------------------------------
tabpanel:
Name "Tab 1":
<div
aria-labelledby="id-iqb0tk-1"
id="id-iqb0tk-3"
role="tabpanel"
style=""
tabindex="0"
variant="graph"
/>
--------------------------------------------------
<body>
<div>
<div
aria-label="Pages"
aria-orientation="horizontal"
id="id-iqb0tk"
role="tablist"
variant="graph"
>
<div
class="css-vurnku"
>
<button
aria-controls="id-iqb0tk-3"
aria-selected="true"
class="css-vurnku"
id="id-iqb0tk-1"
role="tab"
tabindex="0"
>
Tab 1
</button>
<button
aria-controls="id-iqb0tk-4"
aria-selected="false"
class="css-vurnku"
id="id-iqb0tk-2"
role="tab"
tabindex="-1"
>
Tab 2
</button>
</div>
</div>
<div
aria-labelledby="id-iqb0tk-1"
id="id-iqb0tk-3"
role="tabpanel"
style=""
tabindex="0"
variant="graph"
>
<div>
Panel 1
</div>
</div>
<div
aria-labelledby="id-iqb0tk-2"
hidden=""
id="id-iqb0tk-4"
role="tabpanel"
style="display: none;"
tabindex="0"
variant="graph"
>
Panel 2
</div>
</div>
</body>
var your => (code) => here;Metadata
Metadata
Assignees
Labels
No labels