javascript - 如何测试按钮是否被点击？

Question

我正在使用 React 测试库。我遇到的问题是 fireEvent 没有触发，并且抛出错误，如下:

   Expected number of calls: >= 1
   Received number of calls:   0

对于这个特定的测试，我需要使用@testing-library/react-hooks吗？我是否需要将我的 Product 组件渲染在导入函数的上下文提供程序上？

Product.tsx 组件

import React, { FunctionComponent } from "react";
import { useProducts } from "./ContextWrapper";
import { Button } from "@mui/material";
import { articleProps } from "./types";

const Product: FunctionComponent<{ article: articleProps }> = ({
  article,
}) => {
  const { handleAddToCart } = useProducts(); // this is from global context
  return (
      <Button
        aria-label="AddToCart"
        onClick={() => handleAddToCart(article)}
      >
        Add to cart
      </Button>

  );
};

export default Product;

Product.test.tsx

import React from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import Product from "./Product";
import { act, renderHook } from "@testing-library/react-hooks";

const article = {
  name: "samsung",
  variantName: "phone",
  categories: [],
};

const renderProduct = () => {
  return render(
    <ContextProvider>
      <Product article={article} />
    </ContextProvider>
  );
};

//first test just tests if button exists with provided content and works fine
test("renders product", () => {
  render(<Product article={article} />);
  const AddToCartbutton = screen.getByRole("button", { name: /AddToCart/i });
  expect(AddToCartbutton).toHaveTextContent("Add to cart");
});
// this test throws the error described above
test("test addToCart button", () => {
  renderProduct();
  const onAddToCart = jest.fn();
  const AddToCartbutton = screen.getByRole("button", { name: /AddToCart/i });
  fireEvent.click(AddToCartbutton);
  expect(onAddToCart).toHaveBeenCalled();
});

ContextWrapper.tsx

import React, {createContext, useContext, ReactNode, useState} from "react";
import { prodProps } from "../types";

type ProductContextProps = {
  productData: prodProps;
  handleAddToCart: (clickedItem: productPropsWithAmount) => void;

};

const ProductContextDefaultValues: ProductContextProps = {
  productData: null as any,
  handleAddToCart:null as any;
};

type Props = {
  children: ReactNode;
};

const ProductContext = createContext<ProductContextProps>(
  ProductContextDefaultValues
);

export function useProducts() {
  return useContext(ProductContext);
}

const ContextWrapper = ({ children }: Props) => {
  const { data } = useGraphQlData();
  const [productData, setProductData] = useState<Category>(data);
  const [cartItems, setCartItems] = useState<prodProps[]>([]);

  useEffect(() => {
    if (data) {
      setProductData(data);
    }
  }, [data]);

  const handleAddToCart = (clickedItem: prodProps) => {
    setCartItems((prev: prodProps[]) => {
      return [...prev, { ...clickedItem }];
    });
  };

  return (
    <ProductContext.Provider
      value={{
        productData,
        handleAddToCart,
      }}
    >
      {children}
    </ProductContext.Provider>
  );
};

export default ContextWrapper;

Answer 1

我建议您创建按钮组件并单独测试它，如下所示:

const onClickButton = jest.fn();
await render(<Button onClick={onClickButton} />);
const AddToCartbutton = screen.getByRole("button", { name: /AddToCart/i });
await fireEvent.click(AddToCartbutton);
expect(onClickButton).toHaveBeenCalled();