带有 useEffect 的 Jest Act 警告

Question

I have Jest set up using react-testing-library and I have a test written as so:

describe("Some Functionality", () => {
it("Should add a given product to the cart state", async () => {
    const state = getMockState();
    
    const { result: { getByTestId }, store } = deepRender(
        <ProductView />,
        { initialState: state });

    act(() => {
        fireEvent.click(getByTestId("add-to-cart-btn"));
    })

    const newState = store.getState() as RootState;
    expect(someassertion);
});
});

My test runs and passes but I continue to get an act warning that an update to the state wasn't wrapped in an act function.

I assume since the component has a useEffect firing on load that is changing the state that the render method needs to be wrapped in an act block also but doing this:

    act(() => {
        const { result: { getByTestId }, store } = deepRender(
             <ProductView />,
             { initialState: state });

        fireEvent.click(getByTestId("add-to-cart-btn"));
    })

Doesn't get rid of the warnings and also makes the store from the result unavailable to the assertions outside the act block. Is there any way to format this to mitigate the act() warnings?

in response to a question below, the component's useEffect is:

useEffect(() => {
    if (something) {
        getDetails(something)
        .then(getVariances)
        .then(setProductVariances);
    }
}, []);

This sets a productVariances state value using useState

Answer 1

You don't need to wrap render in an act block. You're getting an act warning because there is a state update after the resolution of a promise and so that state update happens outside of an act block. I've generally gotten around this by await ing on the same promise whose resolution is triggering a state update in my test.

Also, you don't need to wrap fireEvent in an act block either because it uses act internally.

Answer 2

You need to wait for any sideeffects that change the state to resolve, my approach in this cases is to give the component a prop for the service that handles this async request and mock in my test, then "await" on the mock service to resolve.

Heres an example:

it('renders when empty list of smartfields is passed', async () => {
    const rendered = render(
        <SomeComponent
          someprop={'321'}
          someotherprop={'123'}
          serviceProp={yourServiceMocked}
        />
    );
    // here you would make assertions on your "loading" state
    
    // HERE you await for you promise to resolve
    await act(() => yourServiceMocked);
    
    // here you would make assertions when your state has solved the promise
  });

Hope my oversimplified example helps, I had a hard time finding the solution for this