5

我有一个带有某种形式的屏幕，在提交时，我使用 axios 将请求发送到后端。成功收到响应后，我用 react-toastify 展示了一个 toast。非常直接的屏幕。但是，当我尝试使用 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 出现。我正在使用模拟服务人员来模拟响应。我确认响应返回正常，但由于某种原因，toast 拒绝出现。我目前的测试如下：

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 的调用，但我无法让它正常工作。另外，这似乎是一个实现细节，所以我认为我不应该嘲笑它。

我认为问题是我在 axios 承诺解决后显示敬酒，所以计时器不知何故感到困惑。

我试图搜索很多地方，但未能找到答案。

提前致谢。

4

3 回答 3

9

谢谢@Estus Flask，但问题要愚蠢得多:) 我必须在组件之前渲染 ToastContainer，如下所示：

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

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

然后，测试很简单，我只需要等待吐司的标题：

expect(await screen.findByText("alert text")).toBeInTheDocument();

findByRole 似乎由于某种原因不起作用，但我太累了，无法深入挖掘 :) 我不必使用任何假计时器或刷新承诺。显然，当您使用 await 和 finBy* 查询时，RTL 已经做到了，只是渲染顺序错误。

于 2020-11-17T14:10:49.470 回答
0

我要做的是模拟方法 fromreact-toastify以监视该方法以查看调用它的内容，而不是屏幕上出现的实际组件：

// setupTests.js
jest.mock('react-toastify', () => {
  const actual = jest.requireActual('react-toastify');
  Object.assign(actual, {toast: jest.fn()});
  return actual;
});

然后在实际测试中：

// test.spec.js
import {toast} from 'react-toastify';

const toastCalls = []
const spy = toast.mockImplementation((...args) => {
     toastCalls.push(args)
  }
)

describe('...', () => {
  it('should ...', () => {
    // do something that calls the toast
    ...
    // then
    expect(toastCalls).toEqual(...)
   }
 }
)

另一个建议是将其mockImplementation放入一个单独的辅助函数中，您可以轻松地调用它来进行所需的测试。这是熊骨头的方法：


function startMonitoring() {
  const monitor = {toast: [], log: [], api: [], navigation: []};

  toast.mockImplementation((...args) => {
    monitor.toast.push(args);
  });
  log.mockImplementation((...args) => {
    monitor.log.push(args);
  });
  api.mockImplementation((...args) => {
    monitor.api.push(args);
  });
  navigation.mockImplementation((...args) => {
    monitor.navigation.push(args);
  });
  return () => monitor;
}

it('should...', () => {
  const getSpyCalls = startMonitoring();
  // do something

  expect(getSpyCalls()).toEqual({
    toast: [...],
    log: [...],
    api: [...],
    navigation: [...]
  });
});
于 2020-11-24T20:41:54.293 回答
0

在这里，解决方案是使用 getByText：

await waitFor(() => {
  expect(screen.getByText(/Logged!/i)).toBeTruthy()
})
于 2021-06-14T19:41:51.003 回答