*ByRole reads hidden element names as ""

• @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 https://github.com/testing-library/dom-testing-library/pull/804 ?

[sheryarshirazi]

I’m facing similar issue. I want to find a display value of a textbox but getting multiple results

Example code:

<input name="text" value="val" /> <input name="text" value="val" aria-hidden="true" style={{display: 'none'}} />

Test Query:

await waitFor(() => { screen.getByDisplayValue("val"); });

and the error i’m getting:

Error: Found multiple elements with the display value: val.

in my expectation displayed value are the elements in the DOM with visibility

Packages Detail: @testing-library/jest-dom: 5.11.6 @testing-library/react: 11.2.2 react-scripts: 3.4.0

[czm1290433700]

Sorry, I had a similar problem and I was wondering if this problem was solved. I tried to filter the results with hidden: true, but getAllByRole returns me all the roles

example code for unit code const hiddenNote = screen.getAllByRole("note", { hidden: true }); const normalNote = screen.getByRole("note");

example code for dom <div role="note" style={{ display: "none" }} aria-hidden> 1234 </div> <div role="note">1234</div>

In my expectation, this should return that element corresponding to the aria attribute under this role instead of throwing it all to me

If anyone can help me with this problem, it would be really appreciated！