您可以使用jest.fn()为setVisible创建一个mock函数，然后在调用onClose和onCancel时检查它是否已使用预期值调用。这样，您就无需担心Dialog组件的实现细节或查询关闭和取消按钮。

import { render } from "@testing-library/react";
import RankDialog from "./RankDialog";
import Dialog from "./Dialog"; // Import the Dialog component

// Mock the Dialog component
jest.mock("./Dialog", () => {
  return (props) => (
    <div
      onClick={props.onClose}
      onContextMenu={props.onCancel}
      data-testid="mock-dialog"
    >
      {props.children}
    </div>
  );
});

describe("RankDialog", () => {
  it("passes setVisible(false) to onClose and onCancel", () => {
    const setVisible = jest.fn();
    const { getByTestId } = render(
      <RankDialog visible={true} setVisible={setVisible} />
    );

    const mockDialog = getByTestId("mock-dialog");

    // Simulate onClose
    mockDialog.click();
    expect(setVisible).toHaveBeenCalledWith(false);

    // Simulate onCancel
    mockDialog.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true }));
    expect(setVisible).toHaveBeenCalledTimes(2);
    expect(setVisible).toHaveBeenCalledWith(false);
  });
});

您可以将一个Jest模拟函数作为setVisible prop传递给RankDialog组件，允许您捕获对该函数的调用并对其进行Assert。
这两个测试用例检查在单击“close”和“cancel”按钮时setVisible函数是否被调用，参数为false。使用@testing-library/user-event模拟用户事件是here提到的测试库生态系统中推荐的方法，因为据说它可以紧密模拟真实的用户交互，并确保测试更接近实际的用户行为。

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

import RankDialog from "./RankDialog";

describe("RankDialog", () => {
  it("should call setVisible with false when clicking the close button", async () => {
    // Create a mock function for setVisible
    const setVisible = jest.fn();
    // Render the RankDialog component with necessary props
    render(<RankDialog visible={true} setVisible={setVisible} />);

    // Query for the element representing the "close" button
    const closeBtn = screen.getByRole("button", { name: /close/i });
    // Simulate a click on the "close" button
    await userEvent.click(closeBtn);
    // Assert that the setVisible function is called with false as an argument
    expect(setVisible).toHaveBeenCalledWith(false);
  });

  it("should call setVisible with false when clicking the cancel button", async () => {
    // Create a mock function for setVisible
    const setVisible = jest.fn();
    // Render the RankDialog component with the necessary props
    render(<RankDialog visible={true} setVisible={setVisible} />);

    // Query for the element representing the "cancel" button
    const cancelBtn = screen.getByRole("button", { name: /cancel/i });
    // Simulate a click on the "cancel" button
    await userEvent.click(cancelBtn);
    // Assert that the setVisible function is called with false as an argument
    expect(setVisible).toHaveBeenCalledWith(false);
  });
});

在第一个测试用例中，使用screen.getByRole("button", { name: /close/i })查询“close”按钮，并使用userEvent.click(closeBtn)模拟单击。然后，使用expectAssertsetVisible函数是以false作为参数调用的。
在第二个测试用例中，您通过查询“cancel”按钮来执行类似的操作。
这种方法允许您测试RankDialog组件的预期行为，而不依赖于按钮外观的特定实现细节，这使得测试对UI中的更改更具弹性。