7

我有相当复杂且仍在增长的应用程序。我们使用带有钩子、上下文和其他有用的东西的反应。一般来说，测试反应钩子@testing-library/react-hooks很容易。有时我们会遇到测试通过但出现奇怪警告的情况：

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(() => ...);

这是带有测试的小型应用程序。不幸的是，它只适用于 chrome。在 FF 上，测试永远不会结束。测试正在通过，但在控制台中是可见的警告。如果它不适合您，请查看图像：

代码沙盒工作示例

如果有人能向我解释如何摆脱这个警告，我将不胜感激。我尝试了许多不同的方法，但最后，我们的许多测试都抛出了这个警告。

4

2 回答 2

3

触发警告是因为您的依赖链中的某些东西ReactDOM.render直接调用。

在hooks.js你有：

import { useManageNotifications } from "./notifications";

在notifications.js：

import { notification, Alert } from "antd";

来自 antd 的通知包会：

import Notification from 'rc-notification';

那就是直接调用 ReactDOM.render的组件。

如果您扫描几行，您会发现您可以通过传递一个TEST_RENDER属性来告诉该组件使用特定的测试渲染。不幸的是，似乎没有任何方法可以通过from和 into from获得TEST_RENDER属性。notificationantdNotificationrc-notification

如果您检测到您正在运行测试，则避免触发警告的一种选择是跳过该组件。process.env.NODE_ENV即在您的src/notifications.js文件中检查它的使用情况：

    if (process.env.NODE_ENV !== 'test') {
      notification[type]({
        message: messageIntlId && <b>{messageIntlId}</b>,
        description: descriptionIntlId && { descriptionIntlId },
        duration: null,
        ...restProps
      });
    }
于 2020-11-04T11:32:02.057 回答
3

我有同样的问题，通过为这样的行为指定导入来解决

import { renderHook, act } from '@testing-library/react-hooks/dom' // will use react-dom

基于文档https://react-hooks-testing-library.com/installation#renderer

对于您的情况，其他导入选项可能会起作用，具体取决于项目中使用的内容

于 2021-12-16T11:01:54.920 回答