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

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 .

现在您可以使用 index 作为

触发事件

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

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

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

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

logRoles(container)

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

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

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

testing

reactjs

jestjs

testing-library