要在@testing-library/user-event的最新版本中使用假计时器，您需要在设置userEvent时配置advanceTimers选项（文档）：

const user = userEvent.setup({
  advanceTimers: () => jest.runOnlyPendingTimers(),
});

字符串
以下是您的更新测试：

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

jest.useFakeTimers();

function FakeComponent() {
  const { renderAlert, setAlert } = useAlert();

  return (
    <div>
      <button onClick={() => setAlert("fake alert")}>Set Alert</button>
      <p>{renderAlert}</p>
    </div>
  );
}

test("testing", async () => {
  const user = userEvent.setup({
    advanceTimers: () => jest.runOnlyPendingTimers(),
  });
  render(<FakeComponent />);
  const button = screen.getByRole("button", { name: /set alert/i });

  await user.click(button);
  expect(screen.getByText(/fake alert/i)).toBeInTheDocument();

  act(() => jest.runAllTimers());
  expect(screen.queryByText(/fake alert/i)).toBeNull();
});

型

可以将delay属性作为null传递给userEvent.setup调用

test("testing", async () => {
  const user = userEvent.setup({ delay: null });

  render(<FakeComponent />);
  const button = screen.getByRole("button", { name: /set alert/i });

  await user.click(button);
});

字符串

@som-shekhar-mukherjee的解决方案是好的，但不严格，尽管它设法为这个非常特殊的情况下工作。
但是，我建议在userEvent的advanceTimers配置中使用advanceTimersToNextTimer而不是runOnlyPendingTimers。
这样做可以确保jest只运行userEvent的内部方法设置的计时器。如果userEvent触发了代码中使用计时器的内容，runOnlyPendingTimers将耗尽这些内容。advanceTimersToNextTimer只会提前userEvent所导致的计时器。
基本上，您的setTimeout回调需要在测试中运行两次。

• 一次：挂载元件后至少200毫秒（因为挂载元件时会呼叫useEffect）。
• 两次：设置"fake alert"后至少200 ms。

@som-shekhar-mukherjee提出的解决方案之所以有效，是因为一旦测试到达并执行await user.click(button);行，runOnlyPendingTimers将耗尽所有挂起的计时器：

• 安装测试组件时useEffect设置的定时器;
• 由user.click调用设置的计时器。

它恰好适用于您的情况，但却阻止您控制正在测试的计时器何时发生。（你可能不知道）提前了你的测试组件的计时器。这是不正确的，因为，在真实的的执行中，它不会只在单击按钮时被耗尽。这个
所以我建议如下：

beforeEach(() => {
  jest.useFakeTimers();
});

afterEach(() => {
  jest.runOnlyPendingTimers();
  jest.useRealTimers();
});

test("testing", async () => {
  const user = userEvent.setup({
    advanceTimers: () => jest.advanceTimersToNextTimer(),
  });

  render(<FakeComponent />);

  // Basically allows the callback scheduled via the component mount to run.
  // You could control more granularly what timers you want to advance here.
  jest.runOnlyPendingTimers();

  const button = screen.getByRole("button", { name: /set alert/i });

  // `advanceTimersToNextTimer` will prevent this from blocking indefinitely
  // and that's what, primarily, solves your question.
  await user.click(button);

  expect(screen.getByText(/fake alert/i)).toBeInTheDocument();

  // Allows the callback scheduled via the set of "fake alert" to run.
  // Again, you could control more granularly what timers you want to advance here.
  act(() => jest.runOnlyPendingTimers());

  expect(screen.queryByText(/fake alert/i)).not.toBeInTheDocument();
});

字符串
总而言之，在userEvent配置上使用advanceTimersToNextTimer解决了阻塞问题，并允许您在测试期间更正确地控制所测试组件的计时器发生的情况。测试挂钩是由React Testing Library docs建议的。顺便说一句，我使用您的组件和上面的挂钩仔细测试了我提出的解决方案。如果您对我的答案有疑问，请告诉我。