Cleanup does not prevent error for finding multiple elements with the same role

Question

I am trying to run a test with the React Testing Library It clicks a button inside a component. I map over the component, so the button exists several times. Even though i have a cleanup set up, i still get the following error:

** TestingLibraryElementError: Found multiple elements with the role "button" **

This is my code:

afterEach(cleanup);

describe("button", () => {
  it("calls a function when button is clicked", () => {
    const callback = jest.fn();
    render(<ProductCard onCartToggleClicked={callback} />);

    const { getByRole } = render(<ProductCard />);

    fireEvent.click(getByRole("button"));
    expect(callback).toHaveBeenCalled();
  });
  afterEach(cleanup);
});

Answer 1

Since you have multiple buttons in the ProductCard component . You should be using getAllByRole instead of getByRole .

Now you can fireEvent with the index as

fireEvent.click(getByRole("button")[0]);

But if you want to target the button specifically then i would suggest to add data-testid prop to the button.

{someData.map((product, index) => (
       <button data-testid={`button-${index}`}> click </button>
   ))}

Now with this in place you can use the getByTestId query

fireEvent.click(getByTestId("button-0"));

logRoles

If you are not sure how many buttons are present . Then you can use the logRoles .

import { logRoles } from '@testing-library/dom'

const { container } = render(<ProductCard onCartToggleClicked={callback} />)

logRoles(container)

This will give you all the possible roles.