React-Testing-Library can't find component with given role and name

Question

I have an input with a dynamically-generated name that I would like to select with react-testing-library. RTL doesn't detect the input, even though the CLI error output contains an element with the correct name and role.

Here is an excerpt of the test code:

const attributeInput = await getByRole(container, 'textbox', {name: 'attributes[0].value'});
await waitFor(() => {
      expect(attributeInput).toBeTruthy();
});

The error message of the test is as follows:

TestingLibraryElementError: Unable to find an accessible element with the role "textbox" and name "attributes[0].value"

Here are the accessible roles:

... (list of accessible roles and inputs of different types with various names, omitted for brevity) ...

  --------------------------------------------------
  textbox:

  Name "":
  <input
    aria-invalid="false"
    class="MuiInputBase-input MuiOutlinedInput-input"
    name="attributes[0].value"
    rows="1"
    type="text"
    value=""
  />

Clearly, the element is in the container, is of role "textbox," and has a name property with the value 'attributes[0].value' associated with it. Why then does RTL not register that this component of the correct type and name, is the one I'm looking for? Why the erroneous

Name: ""

output in the command line?

Possibly relevant: I am using material-ui and this HTML is generated from a TextField wrapped in a react-hook-form controller. Moreover, this assertion is arrived at after some previous react-testing-library actions that programmatically navigate to this page and expect to see this input. None of the previous 'gets' 'acts' or 'waitFor/expects' fail, and a number of the other inputs have names recognized by react-testing-library (although the names assigned to them by RTL appear to be their InputLabel texts and not what is assigned to the 'name' attribute on the generated HTML).

The name you pass to the getByRole query options is the accessible name for the element. From RTL docs: "The accessible name is for simple cases equal to e.g. the label of a form element, or the text content of a button, or the value of the aria-label attribute." — juliomalves
– juliomalves, Commented Mar 19, 2021 at 11:20

Rahul Soni · Accepted Answer · 2022-05-25 02:43:03Z

0

For any Async operation it is recommended to not use getBy instead please try with findByRole/findAllByRole method. Reference:

  [
                { name: 'Chocolate', imagePath: '/images/chocolate.png' },
                { name: 'Vanilla', imagePath: '/images/vanilla.png' },
            ]
  test("display each impage of scoop as response api", async () => {
    render(<Options optionType="scoops" />);

    // Find images
    const scoopImages =  await screen.findAllByRole('img', {
        name: /scoop$/i
    });
    expect(scoopImages).toHaveLength(2);

    const altText = scoopImages.map((elem) => elem.alt);
    expect(altText).toEqual('Chcolate scoop', 'Vanilla scoop');
})

answered May 25, 2022 at 2:43

Rahul Soni

1051 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-Testing-Library can't find component with given role and name

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related