reactjs - 清理不会防止查找具有相同角色的多个元素时出错

Question

我正在尝试使用 React 测试库运行测试它单击组件内的按钮。我映射了组件，因此按钮存在多次。即使我设置了清理，我仍然收到以下错误：

** TestingLibraryElementError：发现多个具有“按钮”角色的元素**

这是我的代码：

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

由于您在ProductCard组件中有多个按钮。您应该使用getAllByRole而不是getByRole.

现在您可以使用indexas触发事件

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

但是，如果您想专门针对按钮，那么我建议您向data-testid按钮添加道具。

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

现在有了这个，您可以使用getByTestId查询

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

日志角色

如果您不确定有多少按钮。然后你可以使用logRoles .

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

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

logRoles(container)

这将为您提供所有可能的角色。