React Jest - An update to LoginForm inside a test was not wrapped in act(...)-CodePudding

This is driving me nuts. I really don't understand this issue at all after I've tried wrapping everything with act (which already feels hacky, but I had to try it). The tests pass, but the console is littered with errors regarding "act".

This is the original test code.

const setup = () =>
    render(
        <Provider store={store}>
            <LoginForm />
        </Provider>
    );

jest.mock('@hooks/auth', () => ({
    useLogin: jest.fn()
}));

describe('Login form', () => {
    it('matches snapshot', () => {
        const asFragment = setup();
        expect(asFragment()).toMatchSnapshot();
    });
});

Even a test as simple as this is yielding the console errors "act".

I bet the solution is simple, but I'd love to know a) what it is and b) why it works that way

I thought act was only for firing events/submits etc, because I managed to solve some of the console errors using that before, but this just isn't working in the above example.

Thanks SO SO MUCH to anybody who can help me here. It's probably simple, but I left testing until late which is a lesson learned.

CodePudding user response：

Made it(...) async and used waitFor on fireEvent and userEvent. Essentially anything that triggers a state update