Description
@testing-library/dom
version: 7.28.1- Testing Framework and version: Jest 26.6.3
- DOM Environment: jsdom 16.4.0
Relevant code or config:
import { render } from "@testing-library/react";
import { getByRole } from "@testing-library/dom";
const { container } = render(
<>
<input aria-label="Input" style={{ display: "none" }} />
<button aria-label="Button" style={{ display: "none" }} />
</>,
);
expect(
getByRole(container, "textbox", { name: "Input", hidden: true }),
).toBeInTheDocument();
expect(
getByRole(container, "button", { name: "Button", hidden: true }),
).toBeInTheDocument();
What you did:
Attempted to test the presence of accessible elements with display: none;
What happened:
The Testing Library error reporter claims the name of these elements is ""
and fails to match them against the provided name:
TestingLibraryElementError: Unable to find an element with the role "textbox" and name "Input"
Here are the available roles:
textbox:
Name "":
<input
aria-label="Input"
style="display: none;"
/>
--------------------------------------------------button:
Name "":
<button
aria-label="Button"
style="display: none;"
/>
--------------------------------------------------
Reproduction:
Hopefully the provided code is sufficient, let me know if not
Problem description:
The example I've given is a little simplified–the real code I'm testing contains elements that are visible in desktop-width viewports, and if I understand correctly media query parsing is out-of-scope for Testing Library–but the issue is the same: these elements will become part of the accessibility tree under certain circumstances and I'm ignoring their invisibility in order to check that they have the correct accessible names. I would expect that I'd be able to do that with the hidden: true
option set.
Suggested solution:
I don't have the time to spare to figure out the cause of this right now :( it might be related to recent changes around #804 ?