ReactDOM act() function 使用酶导致混淆

Question

I am trying to write a unit test to make sure my component for changing a user's password calls the correct functions inside onSubmit when the form is submitted. There are several other tests using the same method as this one and they all pass and give the same error.

Here's one of the tests:

import { act } from "react-dom/test-utils";

it("should render an Alert component if password and confirmPassword do not match", async () => {
    global.scrollTo = jest.fn();
    const wrapper = mount(
        <Provider store={reduxStore}>
            <Router>
                <ChangePassword />
            </Router>
        </Provider>
    );

    pwFuncs.checkCurrentPassword = jest.fn(() => true);
    pwFuncs.comparePW = jest.fn(() => false);

    const fakeEvent = {
        preventDefault: () => console.log("Prevent default..."),
    };

    wrapper
        .find("input")
        .at(0)
        .simulate("change", {
            target: { name: "currentPassword", value: "password1234" },
        });
    wrapper
        .find("input")
        .at(1)
        .simulate("change", {
            target: { name: "newPassword", value: "1234drowssap" },
        });
    wrapper
        .find("input")
        .at(2)
        .simulate("change", {
            target: { name: "confirmPassword", value: "password4321" },
        });

    await act(async () => {
        wrapper.find("form").simulate("submit", fakeEvent);
    });

    expect(pwFuncs.checkCurrentPassword).toBeCalled();
    expect(pwFuncs.comparePW).toBeCalled();
    expect(wrapper.find(Alert).length).toEqual(1);
});

The test passes so I don't have any problems with the implementation but the act() function is giving me some trouble.

Here's the error:

console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
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 ConnectFunction (at ChangePassword.js:191)
    in form (at ChangePassword.js:131)
    in div (at ChangePassword.js:130)
    in section (at ChangePassword.js:125)
    in main (at ChangePassword.js:124)
    in ChangePassword (created by Context.Consumer)
    in withRouter(ChangePassword) (created by ConnectFunction)
    in ConnectFunction (at ChangePassword.test.js:51)
    in Router (created by MemoryRouter)
    in MemoryRouter (at ChangePassword.test.js:50)
    in Provider (at ChangePassword.test.js:49)

Firstly, Enzyme's docs say that I shouldn't even have to wrap my state updating functions in act() because the mount function does this automatically (I'm using React v16.12.0), and yet without it the test suite fails to run saying act() is needed.

From https://github.com/enzymejs/enzyme#reacttestutilsact-wrap

If you're using React 16.8+ and.mount(), Enzyme will wrap apis including.simulate(), .setProps(), .setContext(), .invoke() with ReactTestUtils.act() so you don't need to manually wrap it.

and secondly I've tried using:

import TestRenderer from 'react-test-rendrer';
const { app } = TestRenderer;

but it gives exactly the same error.

I don't understand why the error is showing up since all the tests are passing anyway. It's quite hard to find any info online referring to errors with act() so if anyone could shed any light on this that would be great.

Answer 1

OK so there should have been more information in the question. The component I am trying to test is wrapped in withRouter so when I added WrappedComponent...

const wrapper = mount(
    <Provider store={reduxStore}>
        <Router>
            <ChangePassword.WrappedComponent {...props} />
        </Router>
    </Provider>
);

...the error went away and all tests now pass normally. Hope this helps someone