Как проверить, правильно ли проходят реквизиты компонента

Вы можете использовать jest.fn(), чтобы создать фиктивную функцию для setVisible, а затем проверить, была ли она вызвана с ожидаемым значением при вызове 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 компоненту RankDialog, что позволит вам перехватывать вызовы функции и утверждать их.

Эти два теста проверяют, вызывается ли функция setVisible с ожидаемым аргументом (false) при нажатии кнопок «закрыть» и «отмена». Использование @testing-library/user-event для имитации пользовательских событий является рекомендуемым подходом в экосистеме библиотеки тестирования, как упоминалось здесь, так как говорят, что он точно имитирует реальные взаимодействия с пользователем и гарантирует, что тесты будут ближе к реальному поведению пользователя.

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 }), а щелчок по ней имитируется с помощью userEvent.click(closeBtn). Затем вы используете expect, чтобы утверждать, что функция setVisible вызывается с false в качестве аргумента.

Во втором тестовом случае вы выполняете аналогичное действие, запрашивая кнопку «Отмена». screen.getByRole("button", { name: /cancel/i }) использовался для запроса кнопки.

Этот подход позволяет тестировать ожидаемое поведение компонента RankDialog, не полагаясь на конкретные детали реализации внешнего вида кнопок, что делает тесты более устойчивыми к изменениям в пользовательском интерфейсе.