userEvent.click triggers warning that it must be wrapped in act

In this sample code, after running tests I get “Warning: An update to Test inside a test was not wrapped in act(…).” I have seen the kentcdodds’ blog and also other sources and as far as I know I have done everything right. Isn’t this a bug of userEvent.click?

Code:

import * as React from 'react';
import {render} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import {useState} from "react";
import {Button} from '@material-ui/core';

function Test() {
    const [result, setResult] = useState(0);

    const handle = () => {
        new Promise(resolve => {
            resolve(1);
        }).then((result) => {
            setResult(1);
        });
    };

    return (
        <>
            <Button
                className="test-button"
                onClick={() => {
                    handle();
                }}
            />
            <div>{result}</div>
        </>
    );
}

test('Test', () => {
    render(<Test/>);
    userEvent.click(document.querySelector('.test-button'));
});

[anilanar]

After several years of fighting against act, I have the firm belief that act is sadly an anti-pattern. It forces tests to know about how rendering happens. Tests need to know whether if there’s a useEffect that triggers an async rerendering or not. In my book and in many books, that’s called an anti-pattern. The community, perhaps over-trusting community leaders, has been unquestionably sprinkling act and waitFor here and there to silence these warnings.

Now that I let that out my system, I can get back to the subject 😺 :

It seems some bugs are fixed in version 14.0.0 and I stop getting act warnings after upgrading.

[ph-fritsche]

@babramczyk If the App in failing.test.js is exactly the component under test in your local setup, I have no explanation why there is an act warning. If it is only a part of the real component under test, look into what you do in the useEffect beside triggering the mock function. If your useEffect causes a rerender, you’ve got your culprit.