act() mismatch with the react-testing-library

[SBoudrias]

• react-hooks-testing-library version: 3.7.0
• react-test-renderer version: react-test-renderer@16.13.0
• react version: 16.13.1
• node version: v12.13.1

Relevant code or config:

Example of one of our Next.js mocks

...
import { act } from '@testing-library/react';

export const useRouter = () => {
    const [router, setRouter] = React.useState(fakeRouterInstance);

    // Mock the hook triggering a state change when there's any router state change.
    React.useEffect(() => {
        const update = () => {
            act(() => {
                setRouter({ ...fakeRouterInstance });
            });
        };

        fakeRouterInstance.events.on('beforeHistoryChange', update);
        return () => {
            fakeRouterInstance.events.off('beforeHistoryChange', update);
        };
    }, []);

    return router;
};

What you did:

The act() from react-testing-library and the one from the hook testing library are mismatching. This makes it hard to create global mocks (with for examples jest __mocks__ folder) with which to replace APIs who're not playing well with test environment.

What happened:

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

Suggested solution:

I understand the 2 libraries are using a different react test tool. But I wonder if it'd be possible to unify the testing-library toolchain for react to run with the same environment? This would make it much easier to combine both library tool chain in the same application code.

If you know work around to detect which act should be use when (programmatically), this could also be good to document.

[mpeyper]

Hi @SBoudrias,

You're right about the issue being because we use two different renderers and they have different act implementations. Unfortunately, the renderers have different constraints for different use cases which is why we have diverged our usage of them.

Also unfortunately, I'm not aware of any way you can programatically identify which act to use from within the code shared. You may be interested in some in-flight work which would allow you to switch out the renderer and act implementations to the DOM variants in #510, but this is not ready yet.

I will say that it is unusual to be calling act from within the hook itself. Usually you would use on the async utils which will act as it waits for the the updates to occur. I believe the @testing-library/react utils do this as well, so it may be possible to change the code here to not act at all, and keep the acting in the test file.

[mpeyper]

Closing this now, but happy to reopen if there is more discussion to be had.