reactjs - react 测试库与 userEvent.click 错误行为()警告

Question

我有几个用 Jest 和 React 测试库编写的测试。他们都模拟获取并使用 userEvent.click 调用来触发发出获取请求的提交按钮。状态在组件中得到更新，我做出断言。我正在使用 useEffect Hook 来填充数据数组，但它仅在初始加载时运行，因为我将一个空的依赖项数组传递给它。我所有的测试目前都通过了。如果我一起运行它们，我会得到一个错误的 act() 错误，该错误源于 useEffect:

Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:

// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);

// for react-test-renderer:
import TestRenderer from react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);

但是，当我单独运行其中一个时，我没有收到警告。我可以单独运行其中任何一个，并且不会收到任何警告。我只有在同时运行两个或多个测试时才会收到警告。

我的测试是:

describe("CartDetail", () => {
  test("Order is submitted when user clicks Place Order button.", async () => {
    global.fetch = jest.fn().mockImplementationOnce(() =>
      Promise.resolve({
        status: 200,
      })
    );
    
    renderComponent();

    await act(async () => {
      userEvent.click(await screen.findByRole("button", { name: "Place Order" }));
    });

    expect(screen.queryByText("Your meal order was successfully processed.")).toBeInTheDocument();
  });

  test("Error message is displayed to user when order fails with a 400.", async () => {
    global.fetch = jest.fn().mockImplementationOnce(() =>
      Promise.resolve({
        status: 400,
      })
    );
    
    renderComponent();

    await act(async () => {
      userEvent.click(await screen.findByRole("button", { name: "Place Order" }));
    });

    expect(screen.queryByText("Please confirm that you are ordering at least one of each meal you have in your cart.")).toBeInTheDocument();
    userEvent.click(screen.getByLabelText("Close alert"));
  });

  test("Error message is displayed to user when API fails.", async () => {
    global.fetch = jest.fn().mockRejectedValueOnce(() =>
      Promise.reject({
        status: 500,
      })
    );
    
    renderComponent();

    await act(async () => {
      userEvent.click(await screen.findByRole("button", { name: "Place Order" }));
    });

    expect(screen.queryByText("Your order failed.")).toBeInTheDocument();
    userEvent.click(screen.getByLabelText("Close alert"));
  });
});

我读到您不必将 userEvent 包装在 act() 中，因为它已经在底层。但是，如果我不实际包装它，我的测试就会失败并抛出:

Warning: An update to CartDetail inside a test was not wrapped in act(...).
    
When testing, code that causes React state updates should be wrapped into act(...):
    
act(() => {
  /* fire events that update state */
});
/* assert on the output */

即使我注释掉我的断言，我的测试(当然)通过了，但我仍然收到错误的 act() 警告。问题直接来自:

await act(async () => {
  userEvent.click(await screen.findByRole("button", { name: "Place Order" }));
});

我不明白当 useEffect 在初始加载时执行并且不再运行时，包括通过 userEvent.click() 单击按钮时，问题是如何产生的。我试过改用 waitFor() 并产生相同的精确结果。我已经搜索了互联网，没有什么比这更接近我了。 This GitHub thread提到这是一个已知问题，但现在有点旧了，所以我不知道它是否仍然有效。

Answer 1

我终于找到了解决方法。 This GitHub post提到包装 userEvent()来电act()我已经做过了。 Warning: It looks like you're using the wrong act() around your test interactions. 的解决方法控制台报错是在userEvent()之后添加如下代码在断言之前调用和:

await new Promise((resolve) => setTimeout(resolve, 0));

我更新后的测试现在看起来像这样:

test("Order is submitted when user clicks Place Order button.", async () => {
    global.fetch = jest.fn().mockImplementationOnce(() =>
      Promise.resolve({
        status: 200,
      })
    );
    
    renderComponent();

    await act(async () => {
      userEvent.click(await screen.findByRole("button", { name: "Place Order" }));
    });

    await new Promise((resolve) => setTimeout(resolve, 0));

    expect(screen.queryByText("Your meal order was successfully processed.")).toBeInTheDocument();
  });

错误的 act() 警告现在消失了。