我想为我的反应 tsx 文件中的函数编写测试用例

Question

在我的 Header.tsx

功能 ：

const mobileMenuToggle: toggleMobileMenu = () => setIsNavOpen((prev) => !prev);

使用它的按钮：

     <button
        data-testid="hamburgerBtn"
        className="HAMBURGER-ICON space-y-2 px-5 "
        onClick={mobileMenuToggle}
      >
        <span className=""></span>
        <span className=""></span>
        <span className=""></span>
      </button>

头文件.test.tsx

test("hamburgerMenuToggle button called", () => {
const mockFunction = jest.fn();
render(
  <button onClick={mockFunction}>
    <span className=""></span>
    <span className=""></span>
    <span className=""></span>
  </button>
);
// expect(screen.getByRole("button")).toBeInTheDocument();
expect(mockFunction).toHaveBeenCalled();
});

我试图为它编写测试用例，但不知道如何从我的 Header.tsx 文件中定位它

Answer 1

您应该使用fireEvent 并添加data-testid="hamburgerBtn"

export interface IHamburgerMenuToggleProps {
  onClick?: () => void;
}
const HamburgerMenuToggle = ({ onClick }: IHamburgerMenuToggleProps) => {
  return (
    <button
      data-testid="hamburgerBtn"
      className="HAMBURGER-ICON space-y-2 px-5 "
      onClick={onClick}
    >
      <span className="" />
      <span className="" />
      <span className="" />
    </button>
  );
};
export default HamburgerMenuToggle;

//tests
import {
      fireEvent,
      render
    } from "@testing-library/react";
import HamburgerMenuToggle from "./hamburgerMenuToggle";

test("hamburgerMenuToggle button called", () => {
  const mockFunction = jest.fn();
  const { getByTestId } = render(
    <button data-testid="hamburgerBtn" onClick={mockFunction}>
      <span className=""></span>
      <span className=""></span>
      <span className=""></span>
    </button>
  );
  const button = getByTestId("hamburgerBtn");
  fireEvent.click(button);
  expect(mockFunction).toHaveBeenCalled();
});

test("hamburgerMenuToggle button called using component", () => {
  const mockFunction = jest.fn();
  const { getByTestId } = render(
    <HamburgerMenuToggle onClick={mockFunction} />
  );
  const button = getByTestId("hamburgerBtn");
  fireEvent.click(button);
  expect(mockFunction).toHaveBeenCalled();
});