React 测试库：测试按钮点击时的 API 调用

Question

我正在为 React 组件Order编写测试，它呈现用户的订单并允许用户通过单击“查看项目”按钮查看订单上的项目，这会触发 API 调用。

import { useState, useEffect } from "react";
import Skeleton from "react-loading-skeleton";

import { Customer } from "../../../api/Server";
import capitalise from "../../../util/capitalise";
import renderOrderTime from "../../../util/renderOrderTime";

const Order = props => {
    // Destructure props and details
    const { details, windowWidth, iconHeight, cancelOrder } = props;
    const { id, createdAt, status } = details;

    // Define server
    const Server = Customer.orders;
    
    // Define order cancel icon
    const OrderCancel = (
        <svg className="iconOrderCancel" width={iconHeight} height={iconHeight} viewBox="0 0 24 24">
            <path className="pathOrderCancel" style={{ fill:"#ffffff" }} d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5 15.538l-3.592-3.548 3.546-3.587-1.416-1.403-3.545 3.589-3.588-3.543-1.405 1.405 3.593 3.552-3.547 3.592 1.405 1.405 3.555-3.596 3.591 3.55 1.403-1.416z"/>
        </svg>
    )

    // Set state and define fetch function
    const [items, setItems] = useState([]);
    const [fetchItems, setFetchItems] = useState(false);

    const [isLoadingItems, setIsLoadingItems] = useState(false);
    const [error, setError] = useState(null);

    const fetchOrderItems = async() => {
        setIsLoadingItems(true);

        try {
            let order = await Server.getOrders(id);
            setItems(order.items);
            setIsLoadingItems(false);
        } catch (err) {
            setError(true);
            console.log(err);
        }
    }

    useEffect(() => {
        if (items.length === 0 && fetchItems) fetchOrderItems();
        // eslint-disable-next-line
    }, [fetchItems]);

    // Define function to view order items
    const viewItems = e => {
        e.preventDefault();
        setFetchItems(fetchItems ? false : true);

        const items = document.getElementById(`items-${id}`);
        items.classList.toggle("show");
    }

    // RENDERING
    // Order items
    const renderItems = () => {
        // Return error message if error
        if (error) return <p className="error">An error occurred loading order items. Kindly refresh the page and try again.</p>;

        // Return skeleton if loading items
        if (isLoadingItems) return <Skeleton containerTestId="order-items-loading" />;

        // Get total cost of order items
        let total = items.map(({ totalCost }) => totalCost).reduce((a, b) => a + b, 0);

        // Get order items
        let list = items.map(({ productId, name, quantity, totalCost}, i) => {
            return (
                <div key={i} className="item" id={`order-${id}-item-${productId}`}>
                    <p className="name">
                        <span>{name}</span><span className="times">&times;</span><span className="quantity">{quantity}</span>
                    </p>
                    <p className="price">
                        <span className="currency">Ksh</span><span>{totalCost}</span>
                    </p>
                </div>
            )
        });

        // Return order items
        return (
            <div id={`items-${id}`} className={`items${items.length === 0 ? null : " show"}`} data-testid="order-items">
                {list}
                {
                    items.length === 0 ? null : (
                        <div className="item total" id={`order-${id}-total`}>
                            <p className="name">Total</p>
                            <p className="price">
                                <span className="currency">Ksh</span><span>{total}</span>
                            </p>
                        </div>
                    )
                }
            </div>
        )
    };

    // Component
    return (
        <>
            <div className="order-body">
                <div className="info">
                    <p className="id">#{id}</p>
                    <p className="time">{renderOrderTime(createdAt)}</p>
                    <button className="view-items" onClick={viewItems}>{ fetchItems ? "Hide items" : "View items"}</button>
                    {renderItems()}
                </div>
            </div>
            <div className="order-footer">
                <p className="status" id={`order-${id}-status`}>{capitalise(status)}</p>
                {status === "pending" ? <button className="cancel-order" onClick={cancelOrder}>{windowWidth > 991 ? "Cancel order" : OrderCancel}</button> : null}
            </div>
        </>
    )
}

export default Order;

以下是我为Order编写的测试。 我在 API 调用上编写测试时遇到了一些问题。

import { render, fireEvent, screen } from "@testing-library/react";
import { act } from "react-dom/test-utils";

import Order from "../../../components/Primary/Orders/Order";

import { Customer } from "../../../api/Server";
import { orders } from "../../util/dataMock";

// Define server
const Server = Customer.orders;

// Define tests
describe("Order", () => {
    describe("View items button", () => {
        const mockGetOrders = jest.spyOn(Server, "getOrders");
        beforeEach(() => {
            const { getAllByRole } = render(<Order details={orders[2]} />);
            let button = getAllByRole("button")[0];

            fireEvent.click(button);
        });

        test("triggers API call when clicked", () => {
            expect(mockGetOrders).toBeCalled();
        });

        test("renders loading skeleton during API call", () => {
            let skeleton = screen.getByTestId("order-items-loading");
            expect(skeleton).toBeInTheDocument();
        });

        ///--- PROBLEMATIC TEST ---///
        test("renders error message if API call fails", async() => {
            await act(async() => {
                mockGetOrders.mockRejectedValue("Error: An unknown error occurred. Kindly try again.");
            });

            // let error = await screen.findByText("An error occurred loading order items. Kindly refresh the page and try again.");
            // expect(error).toBeInTheDocument();
        });
    });

    test("calls cancelOrder when button is clicked", () => {
        const clickMock = jest.fn();

        const { getAllByRole } = render(<Order details={orders[2]} cancelOrder={clickMock} />);
        let button = getAllByRole("button")[1];

        fireEvent.click(button);
        expect(clickMock).toBeCalled();
    });
});

在我标记为有问题的测试中，我期待模拟的拒绝值Error: An unknown error occurred. Kindly try again. Error: An unknown error occurred. Kindly try again. 被记录到控制台，但我得到一个TypeError: Cannot read properties of undefined (reading 'items') 。 这表明我的模拟 API 调用没有正常工作，并且该组件正在尝试对它应该从 API 接收的项目数组进行操作。我应该如何修复我的测试以获得期望的结果？

Answer 1

我正在试验您案例的一个简化示例，似乎问题在于使用beforeEach挂钩，您在其中呈现组件并在每次测试之前单击按钮。 对于 RTL，这不是一个好主意，事实上，有一个Eslint 规则。

为了避免在每个测试中重复自己，您可以使用setup function 对每个测试执行这些操作：

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Order from "../../../components/Primary/Orders/Order";

import { Customer } from "../../../api/Server";
import { orders } from "../../util/dataMock";

// Define server
const Server = Customer.orders;

// Setup function
const setup = () => {
  render(<Order details={orders[2]} />);

  const button = screen.getAllByRole("button")[0];
  userEvent.click(button);
}

// Define tests
describe("Order", () => {
    describe("View items button", () => {
        const mockGetOrders = jest.spyOn(Server, "getOrders");
  
        test("triggers API call when clicked", () => {
            setup()
            expect(mockGetOrders).toBeCalled();
        });

        test("renders loading skeleton during API call", async () => {
            setup()
            const skeleton = await screen.findByTestId("order-items-loading");
            expect(skeleton).toBeInTheDocument();
        });

        test("renders error message if API call fails", async () => {
          mockGetOrders.mockRejectedValue(new Error("An unknown error occurred. Kindly try again."));
          setup()

          const error = await screen.findByText("An error occurred loading order items. Kindly refresh the page and try again.");
          expect(error).toBeInTheDocument();
        });
    });

    test("calls cancelOrder when button is clicked", () => {
        const clickMock = jest.fn();

        render(<Order details={orders[2]} cancelOrder={clickMock} />);
        const button = screen.getAllByRole("button")[1];

        userEvent.click(button);
        expect(clickMock).toBeCalled();
    });
});

我还做了一些小的更改，例如：使用userEvent而不是fireEvent ，使用screen而不是从render的结果中解构查询函数，等等。这些更改都是库的创建者推荐的。

此外，在fetchOrderItems function 中，您应该将加载标志设置为false ，以防抛出异常。

注意： act警告可能来自测试 #1 和 #2。 这可能是因为测试用例在所有组件的 state 更新完成之前结束（例如，在单击获取按钮后加载 state 切换）。 不建议在 RTL 上使用act ，相反，您可以修改这些测试并使用 RTL 中的waitForElementToBeRemoved实用程序。 这仍将满足测试 #2，您在其中检查是否存在加载骨架，因为如果找不到此加载 UI，它无论如何都会抛出：

test("triggers API call when clicked", async () => {
    setup()
    await waitForElementToBeRemoved(() => screen.queryByTestId("order-items-loading"))
    expect(mockGetOrders).toBeCalled();
});

test("renders loading skeleton during API call", async () => {
    setup()
    await waitForElementToBeRemoved(() => screen.queryByTestId("order-items-loading"))
});

如果这对你有用，请告诉我。