@testing-library/react-hooks Warning: It looks like you're using the wrong act() around your test interactions

Question

I have quite complex and still growing application. We use react with hooks, context and other useful stuff. In general, testing react hooks with @testing-library/react-hooks is easy. Just from time to time we have a situation when tests pass but strange warning occurs:

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

here is working small application with tests. Unfortunately, it works only on chrome. On FF the tests never end. Tests are passing but in the console is visible warning. If it doesn't work for you please take a look at the image:

I would appreciate if someone could explain to me how to get rid of this warning. I've tried many different approaches but in the end, many of our tests throw this warning.

Answer 1

I had the same issue, was fixed by specifying the import for act like this

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

based on documentation https://react-hooks-testing-library.com/installation#renderer

for your case other import options might work, depending on what's used in project

Answer 2

The warning was triggered because something down your chain of dependencies was calling ReactDOM.render directly.

In hooks.js you have:

import { useManageNotifications } from "./notifications";

In notifications.js:

import { notification, Alert } from "antd";

The notification package from antd does:

import Notification from 'rc-notification';

That's the component that calls ReactDOM.render directly.

If you scan up a few lines you'll see that you could tell that component to use a specific test render by passing a TEST_RENDER property. Unfortunately, there doesn't seem any way to get a TEST_RENDER property through notification from antd and into Notification from rc-notification.

One option to avoid triggering the warning is to skip that component if you detect you're running tests. i.e. guard its usage which a check to process.env.NODE_ENV in your src/notifications.js file:

    if (process.env.NODE_ENV !== 'test') {
      notification[type]({
        message: messageIntlId && <b>{messageIntlId}</b>,
        description: descriptionIntlId && { descriptionIntlId },
        duration: null,
        ...restProps
      });
    }