Found multiple elements error in React Testing Library

Introduction

While working with React-Testing-Library to test UI components, you might encounter an error like the following:

TestingLibraryElementError: Found multiple elements with the role "radio" and name `/to/i`

HTML Structure:

Here’s an example of the HTML structure that I’m trying to test:

<label for="from" title="From">From</label>
<input id="from" type="radio" value="">

<label for="to" title="To">To</label>
<input id="to" type="radio" value="">

Test Suite:

In the following test suite, I’m trying to query the radio inputs by their label text, as the following:

test('renders my element', () => {
  const fromRadio = screen.getByLabelText(/from/i);
  const toRadio = screen.getByLabelText(/to/i);
});

And when trying to run the test, I’m getting this error:

TestingLibraryElementError: Found multiple elements with the role "radio" and name `/to/i`

    Here are the matching elements:

    <input
      id="from"
      type="radio"
      value=""
    />

    <input
      id="to"
      type="radio"
      value=""
    />

The reason for this error is coming from trying to query a single element by text/attribute, but indeed there are multiple element that are matching the query.

So in order to fix this, we can use the multiple elements matchers from React-Testing-Library, as described below:

  • Multiple Elements
    • getAllBy...: Returns an array of all matching nodes for a query, and throws an error if no elements match.
    • queryAllBy...: Returns an array of all matching nodes for a query, and return an empty array ([]) if no elements match.
    • findAllBy...: Returns a promise which resolves to an array of elements when any elements are found which match the given query. The promise is rejected if no elements are found after a default timeout of 1000ms.
      • findBy methods are a combination of getBy* queries and waitFor. They accept the waitFor options as the last argument (i.e. await screen.findByText('text', queryOptions, waitForOptions))
And here’s how we can fix the test suite:
test('renders my element', () => {
  const radioInputs = screen.getAllByLabelText(/from/i);
  // OR 
  // const radioInputs = screen.getAllByLabelText(/to/i);


  expect(radioInputs[0]).toBeVisible(); // From input
  expect(radioInputs[1]).toBeVisible(); // To input
});

Resources: #types-of-queries

That’s it for today, Hope you learned something!

Photo from Unsplash.

Related Posts

How to remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Highcharts Place text in the center of a pie chart

Highcharts Place text in the center of a pie chart

To place text in the center of a pie chart in Highcharts, you can use the chart.renderer object to create a custom label and position it in…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

Highcharts How To Change Series Color with examples

Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article. Option 1: Using the…

A quick introduction to Javascript shadow DOM

A quick introduction to Javascript shadow DOM

Introduction JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own…

Leave a Reply

%d bloggers like this: