`getByRole` is unable to find an accessible elements in nested react components #1173

shadaxv · 2022-09-26T08:26:03Z

@testing-library/dom version: 8.17.1
Testing Framework and version: @testing-library/[email protected] + @testing-library/[email protected] + [email protected]
DOM Environment: [email protected]

Relevant code or config:

Tested component

export const InputPassword = ({ label, name }) => {
  const [passwordShown, setPasswordShown] = useState(false);
  const togglePassword = () => {
    setPasswordShown(!passwordShown);
  };

  return (
    <Input
      type={passwordShown ? "text" : "password"}
      label={label}
      name={name}
      iconRight={
        <button
          aria-label={passwordShown ? "hide password" : "show password"}
          type="button"
          data-input-icon
          onClick={togglePassword}
        >
          {passwordShown ? <EyeClose /> : <EyeOpen />}
        </button>
      }
    />
  );
};

export const Input = ({
  label,
  iconRight,
  type,
  name
}) => {
  const id = useId();
  return (
    <div>
      {label ? <label htmlFor={id}>{label}</label> : null}
      <div data-input-wrapper>
        <input
          aria-describedby={`${id}-helperText`}
          id={id}
          type={type}
          name={name}
        />
        {iconRight}
      </div>
    </div>
  );
};

Test

import "@testing-library/jest-dom/extend-expect";
import { render, screen } from "@testing-library/react";
import { InputPassword } from "../input";

test("should render password input", () => {
  render(<InputPassword label="Password" name="password" />);
  const inputPasswordElement = screen.getByRole("textbox", {
    name: /password/i
  });
  expect(inputPasswordElement).toBeInTheDocument();
});

What you did:

I want to test a component by using getByRole query, which uses another component underneath

What happened:

Query getByRole does not find an accessible element, however, any other query can find the element (e.g. getByTestId, getByText)

Error output

Input component › should render password input

    TestingLibraryElementError: Unable to find an accessible element with the role "textbox" and name `/password/i`

    Here are the accessible roles:

      button:

      Name "show password":
      <button
        aria-label="show password"
        data-input-icon="true"
        type="button"
      />

      --------------------------------------------------

    Ignored nodes: comments, script, style
    <body>
      <div>
        <div
          data-input="true"
        >
          <label
            for=":r0:"
          >
            Password
          </label>
          <div
            data-input-wrapper="true"
          >
            <input
              aria-describedby=":r0:-helperText"
              id=":r0:"
              name="password"
              type="password"
            />
            <button
              aria-label="show password"
              data-input-icon="true"
              type="button"
            >
              <svg>...</svg>
            </button>
          </div>
        </div>
      </div>
    </body>

Reproduction:

https://codesandbox.io/s/react-testing-library-demo-forked-v3dz08

Problem description:

Testing library is unable to find an accessible element in nested react components

Suggested solution:

Testing library should find an accessible element in a nested structure

The text was updated successfully, but these errors were encountered:

MatanBobi · 2022-09-26T08:32:33Z

Hi @shadaxv, thanks for opening this one.
The reason for this is that the name attribute isn't considered the component's accessible name (which is what we're querying for).. In the case of an input, the accessible name is defined by an aria-label or aria-labelledyby.
To solve that issue, I'd replace the name attribute with an aria-label and then the query will work.
Since this isn't an issue with testing-library, I'm closing this one :) Thanks again.

shadaxv · 2022-09-26T08:40:48Z

Hi @MatanBobi, thank you for your quick reply, I was just about to close the issue because I already found this thread - #567

I think it is simply caused by the fact that the input with the password type, does not have its role, aria-label also will not work in this case, but thank you very much for the suggestion

For anyone who stumbles across this thread: instead of getByRole, you can use getByLabelText, which will be a good alternative

MatanBobi · 2022-09-26T08:43:01Z

Wasn't familiar with that one.. Thanks!

urbain32 · 2023-02-01T09:27:53Z

Hi @MatanBobi, thank you for your quick reply, I was just about to close the issue because I already found this thread - #567

I think it is simply caused by the fact that the input with the password type, does not have its role, aria-label also will not work in this case, but thank you very much for the suggestion

For anyone who stumbles across this thread: instead of getByRole, you can use getByLabelText, which will be a good alternative

hello i used getByLabelText but i had to remove 'toBeInTheDocument()' for it to work can you help me to understand why?

here is the code:

describe('add new sub:', () => {
    test('Should render without crash', async () => {
        render(<ItineraryDialog />  );
        const inputField = screen.getByLabelText('destinatio');
        expect(inputField);
    });
});

MatanBobi · 2023-02-05T12:00:56Z

@urbain32 - We'll need more data to try and help you with that issue.

PeymanOruji · 2023-08-04T10:05:25Z

Hello guys! I want to test a fail scenario.
I know the cardHeadingElement element is not found, but I want to show result with expect function, But the result is:
Unable to find an accessible element with the role "heading" and name /shazam/i

` render()
const searchElement = await screen.findByPlaceholderText(/type for search/i)
fireEvent.change(searchElement, {target: {value: 'marvel'}})

    const cardHeadingElement = screen.getByRole('heading', {
        name: /shazam/i
    })

    expect(cardHeadingElement).not.toBeInTheDocument()`

Please help :)

MatanBobi · 2023-08-06T06:51:28Z

@PeymanOruji You can follow the guides here:
https://testing-library.com/docs/guide-disappearance#asserting-elements-are-not-present

PeymanOruji · 2023-08-06T11:30:40Z

Thank you sir. Can i ask another question? How we can test valid date ? :)

…

On Sun, Aug 6, 2023, 11:21 Matan Borenkraout ***@***.***> wrote: @PeymanOruji <https://github.com/PeymanOruji> You can follow the guides here: https://testing-library.com/docs/guide-disappearance#asserting-elements-are-not-present — Reply to this email directly, view it on GitHub <#1173 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMN35H5OTCGTQZEMNSF6WALXT45HVANCNFSM6AAAAAAQVRP4OA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

MatanBobi · 2023-08-06T11:36:23Z

I can't really understand what you mean with this question and this issue is aimed to provide answer for something else.
If you have any questions about RTL, please feel free to open a stackoverflow question or reach out on our discord server and we'd be happy to help :)

MatanBobi closed this as completed Sep 26, 2022

unnamed-lab mentioned this issue Jun 26, 2024

🚀 Enhancement: Configured project for UI component testing unnamed-lab/cypheir-mock#6

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

`getByRole` is unable to find an accessible elements in nested react components #1173

`getByRole` is unable to find an accessible elements in nested react components #1173

shadaxv commented Sep 26, 2022 •

edited

Loading

MatanBobi commented Sep 26, 2022

Uh oh!

shadaxv commented Sep 26, 2022

Uh oh!

MatanBobi commented Sep 26, 2022

Uh oh!

urbain32 commented Feb 1, 2023 •

edited by MatanBobi

Loading

Uh oh!

MatanBobi commented Feb 5, 2023

Uh oh!

PeymanOruji commented Aug 4, 2023

Uh oh!

MatanBobi commented Aug 6, 2023

Uh oh!

PeymanOruji commented Aug 6, 2023 via email

Uh oh!

MatanBobi commented Aug 6, 2023

Uh oh!

getByRole is unable to find an accessible elements in nested react components #1173

getByRole is unable to find an accessible elements in nested react components #1173

Comments

shadaxv commented Sep 26, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Relevant code or config:

What you did:

What happened:

Reproduction:

Problem description:

Suggested solution:

MatanBobi commented Sep 26, 2022

Uh oh!

shadaxv commented Sep 26, 2022

Uh oh!

MatanBobi commented Sep 26, 2022

Uh oh!

urbain32 commented Feb 1, 2023 • edited by MatanBobi Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MatanBobi commented Feb 5, 2023

Uh oh!

PeymanOruji commented Aug 4, 2023

Uh oh!

MatanBobi commented Aug 6, 2023

Uh oh!

PeymanOruji commented Aug 6, 2023 via email

Uh oh!

MatanBobi commented Aug 6, 2023

Uh oh!

`getByRole` is unable to find an accessible elements in nested react components #1173

`getByRole` is unable to find an accessible elements in nested react components #1173

shadaxv commented Sep 26, 2022 •

edited

Loading

urbain32 commented Feb 1, 2023 •

edited by MatanBobi

Loading