如何在通过道具钻孔发送的函数上测试点击事件？

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);
  });
});

更多细节请看 代码和盒子