小编Fat*_*muş的帖子

我有一个带有某种形式的屏幕，在提交时，我使用 axios 将请求发送到后端。成功收到响应后，我用 react-toastify 敬酒。非常直接的屏幕。但是，当我尝试使用 jest 和 react 测试库通过集成测试来测试这种行为时，我似乎无法让 Toast 出现在 DOM 上。

我有一个像这样的实用程序渲染器来渲染我正在使用 toast 容器测试的组件：

import {render} from "@testing-library/react";
import React from "react";
import {ToastContainer} from "react-toastify";

export const renderWithToastify = (component) => (
  render(
    <div>
      {component}
      <ToastContainer/>
    </div>
  )
);

在测试本身中，我用 react-testing-library 填写表单，按下提交按钮，然后等待 toast 出现。我正在使用模拟服务工作者来模拟响应。我确认响应返回 OK，但由于某种原因，吐司拒绝出现。我目前的测试如下：

expect(await screen.findByRole("alert")).toBeInTheDocument();

我正在寻找具有角色警报的元素。但这似乎不起作用。另外，我尝试做这样的事情：

...

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

...

it("test", () => {
  ...

  act(() =>
    jest.runAllTimers();
  )
  expect(await screen.findByRole("alert")).toBeInTheDocument();
}

我对 JS 有点陌生，问题可能是由于 axios 和 react-toastify 的异步性质，但我不知道如何测试这种行为。我尝试了很多东西，包括模拟定时器并运行它们，模拟定时器并推进它们，而不是模拟它们并等待等等。我什至试图模拟 toast …