Question

我的组件中有一个点击事件，我正在尝试使用@testing-library/react进行测试。该点击事件是由父组件发出的功能，例如：

<DownloadButton>
  {handleDownload => (
     <ActionButton
      onClick={handleDownload}
      data-testid={CONFIG.TEST_IDS.BUTTONS.DOWNLOAD}
     >
      Download
     </ActionButton>
  )}
</DownloadButton>

我可以在按钮上getByText和fireEvent.click，但是不确定如何测试handleDownload函数是否真正触发。

Answer 1

因此，如果我正确理解了您的问题，则不能确定在按onClick时是否调用了ActionButton处理程序？

您要测试的另一种情况是DownloadButton是否提供handleDownload渲染道具。

我会将一个测试分为两个测试，然后将每个组件单独分离。

import React from "react";
import { DownloadButton, ActionButton } from "./App";
import { render, fireEvent } from "@testing-library/react";

describe("DownloadButton", () => {
  it("returns handleDownloadFunction", () => {
    const childrenMock = jest.fn();
    render(<DownloadButton children={childrenMock} />);
    expect(childrenMock).toHaveBeenCalledTimes(1);
    expect(childrenMock.mock.calls[0][0].handleDownload).toBeDefined();
  });
});

describe("ActionButton", () => {
  it("onClick invokes function", () => {
    const onClickMock = jest.fn();
    const { getByTestId, debug } = render(
      <ActionButton onClick={onClickMock} data-testid={"test-button"} />
    );
    debug();
    const button = getByTestId("test-button");

    fireEvent.click(button);
    expect(onClickMock).toHaveBeenCalledTimes(1);
  });
});

有关更多详细信息，请查看codesandbox

如何在通过道具钻孔发送的功能上测试单击事件

1 个答案: