Found multiple elements error in React Testing Library

Question

Im having a problem with a query, I'm trying to get two radio inputs, I don't have any problem with one of them, but with the other one React Testing Library thrown an error: It Found multiple elements with the role "radio" and name /to/i:

queries

test('Render form with default items', () => {
  const handleUpdateValue = jest.fn();
  const handleNextStep = jest.fn();
  render(
    <Form
      handleNextStep={handleNextStep}
      updateValue={handleUpdateValue}
      transferFundsValues={{}}
    />
  );

  const amountInput = screen.getByLabelText(/amount/i);
  const fromRadio = screen.getByLabelText(/from/i);
  const toRadio = screen.getByLabelText(/to/i);
  const messageInput = screen.getByLabelText(/message/i);

  const continueButton = screen.getByRole('button', { name: /continue/i });
  const cancelButton = screen.getByRole('button', { name: /cancel/i });

  // If no value has been entered to the inputs, the continue button must be
  // disabled
  expect(continueButton).toBeDisabled();
});

Html structure

<label for="transferFunds_from" class="ant-form-item-required" title="From">From</label>
<input id="transferFunds_from" type="radio" class="ant-radio-button-input" value="">

<label for="transferFunds_to" class="ant-form-item-required" title="To">To</label>
<input id="transferFunds_to" type="radio" class="ant-radio-button-input" value="">

Error thrown by RTL

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

    Here are the matching elements:

    <input
      class="ant-radio-button-input"
      id="transferFunds_from"
      type="radio"
      value=""
    />

    <input
      class="ant-radio-button-input"
      id="transferFunds_to"
      type="radio"
      value=""
    />

I don't know if I'm doing something wrong in the HTML structure or if it's a React Testing Library error.

Are these the full tests? I think we may need a bit more context. Usually you get that error if you try getByRole and there's multiple elements, yet I don't see that called anywhere — Jonathan Southern
– Jonathan Southern, Commented Aug 26, 2021 at 18:27

Rimian · Accepted Answer · 2022-10-10 05:57:03Z

50

Just a quick tip, if you have multiple matching elements, you can query like this:

HTML:

<a href="/my-element">My element</a>
<a href="/my-element">My element</a>

TEST:

test('renders my element', () => {
  let link = screen.getAllByText('My element')[0] as HTMLAnchorElement;
  expect(link.href).toContain('/my-element');
});

edited Oct 10, 2022 at 5:57

Rimian

38.7k17 gold badges127 silver badges119 bronze badges

answered Oct 15, 2021 at 2:16

JosephA91

7756 silver badges13 bronze badges

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

3 Comments

Psth Over a year ago

Is this the best practice or would it be better to use data-testid on original doc and use it on tests when more than 1 element are present?

JosephA91 Over a year ago

You can do that as well, if you prefer.

oddmeter Over a year ago

Also, in my case I actually wanted to see that there was two instances of what I was searching for. In such a case I used getAllByText('some text').toHaveLength(2)

Ross Mawdsley · Accepted Answer · 2022-05-27 10:48:10Z

20

What was causing this for me was simply having another render() in the test file that was not inside an it().... so the component was being rendered twice.

rookie mistake :-)

answered May 27, 2022 at 10:48

Ross Mawdsley

3713 silver badges4 bronze badges

1 Comment

eazy_g Over a year ago

Along similar lines, I ran into this in a test file that had both enzyme and RTL tests. Had to call wrapper.unmount() on earlier tests so that there was no extra lingering component by the time my RTL test ran

Ivan K. · Accepted Answer · 2022-10-06 01:48:12Z

12

If you have multiple matching elements try this one

<Typography component={"span"}>
  Some text
</Typography>

getAllByText if more then 1 Matches it`ll return array

Types of Queries Please check the documentation Summary Table

it('It will display Some text', () => {
    const subTitle = screen.getAllByText(/Some text/i);
    expect(subTitle[0]).toBeInTheDocument();
})

answered Oct 6, 2022 at 1:48

Ivan K.

1,12412 silver badges12 bronze badges

Comments

Nishith · Accepted Answer · 2023-07-03 06:14:02Z

2

If you are having multiple tests under it and you have a single render function in the describe then you can try putting that render function inside a beforeEach

describe('This is a test section'), () => {

  beforeEach(() => render(<Element {...testProps}/>))

  it('smaller test',() => {
    // actual test
  })
})

and then try to run the test. This should solve it. If not then you can try to run the cleanup function and clear all the mocks after each test

answered Jul 3, 2023 at 6:14

Nishith

1,12811 silver badges15 bronze badges

Comments

user9760669 · Accepted Answer · 2021-08-26 18:50:19Z

0

I wrote similar expects and for me works well. Maybe something is wrong with your current @testing-library/react version. Try 10.4.9

The code that I used

import React from 'react'
import { render, screen } from '@testing-library/react'

function Form() {
  return (
    <div>
      <label
        htmlFor="transferFunds_from"
        className="ant-form-item-required"
        title="From"
      >
        From
      </label>
      <input
        id="transferFunds_from"
        type="radio"
        className="ant-radio-button-input"
        value=""
      />

      <label
        htmlFor="transferFunds_to"
        className="ant-form-item-required"
        title="To"
      >
        To
      </label>
      <input
        id="transferFunds_to"
        type="radio"
        className="ant-radio-button-input"
        value=""
      />
    </div>
  )
}

test('Render form with default items', () => {
  render(<Form />)

  const fromRadio = screen.getByLabelText(/from/i)
  const toRadio = screen.getByLabelText(/to/i)

  expect(fromRadio).toBeVisible()
  expect(toRadio).toBeVisible()
})

answered Aug 26, 2021 at 18:50

user9760669

1 Comment

Cristian Flórez Over a year ago

I'm using @testing-library/react: ^11.2.3. So I need to downgrade to 10.4.9?

Marcos Querino · Accepted Answer · 2023-06-22 03:53:13Z

0

You can fix it using string instead of regex:

const toRadio = screen.getByLabelText("to");

There is some problem with two caracters names in Jest.

answered Jun 22, 2023 at 3:53

Marcos Querino

1

Comments

Mark Swardstrom · Accepted Answer · 2024-11-20 02:42:09Z

0

I'm using vitest and didn't have this in initially:

    afterEach(cleanup);

this can be added to the test, or it may be due to the config.

test: {
  globals: true
}

This can be added to vite.config.ts

More information here: https://github.com/testing-library/vue-testing-library/issues/296

answered Nov 20, 2024 at 2:42

Mark Swardstrom

18.3k6 gold badges74 silver badges75 bronze badges

Collectives™ on Stack Overflow

Found multiple elements error in React Testing Library

queries

Html structure

Error thrown by RTL

7 Answers 7

3 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

queries

Html structure

Error thrown by RTL

7 Answers 7

3 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related