React Query + Jest: Test finishes before mutation onSuccess can invalidate and refetch data.

[bzitzow]

When invalidating a query in the onSuccess handler of a mutation, the test appears to be unable to wait for the new data (and the next render cycle) so that assertions can be made.

When console.log() is placed in onSuccess() as a troubleshooting step, Jest returns an error:

Cannot log after tests are done. Did you forget to wait for something async in your test?

Indicating that asynchronous operations are happening that need to be awaited. Using waitFor(() => ...) (even with a custom timeout of 90,000ms) appears to be insufficient.

Question:

How do we properly setup query cache invalidation such that a test will wait until the new data has been fetched, and the component rendered so that we can make assertions in the test?

Versions

React 17.x
React Query 3.32
@testing-library/user-event 13.5.0

MyComponent.js

export const MyComponent = () => {
    const { mutateAsync } = useCustomMutation();
    const updateTheThing = async (event) => {
      // build payload
      await mutateAsync(payload);
    }

    return (
        // ...
        <button onClick={updateTheThing}
        // ...
    );
}

useCustomMutation.js

export const useCustomMutation = () => {
  return useMutation(
    async (payload) => {
      const response = await fetch(url, {
        method: 'POST',
        credentials: 'include',
        headers: { accept: 'application/json' },
        body: JSON.stringify(payload),
      });
      if (response && !response.ok) {
        const data = response ? await response.json() : null;
        return data;
      }
    },
    {
      onSuccess: async () => {
        console.log('begin query invalidation');

        await queryClient.invalidateQueries({
            queryKey: ['query-key-1'],
          });

        await queryClient.invalidateQueries({
            queryKey: ['query-key-2'],
          });

        console.log('done invalidating queries');
      },
    },
  );
};

MyComponent.test.js

const renderWrapper = async () => {
  const queryClient = new QueryClient();

  queryClient.defaultQueryOptions({
    staleTime: 0,
    cacheTime: Infinity,
    retry: 0,
  });

  await render(
    <QueryClientProvider client={queryClient}>
        <MyComponent></MyComponent>
    </QueryClientProvider>
  }
}

describe('...', () => {
  beforeEach(async () => {
    await renderWrapper();
  });
  
  it('updates and fetches new data', async () => {
    // ... 
    
    userEvent.click(saveButton);
    // 1. click initiates the mutate
    // 2. onSuccess -> invalidate cache(s)
    // 3. refetch (react query)
    // 4. re-render components
    
    // Assert component was re-rendered with updated data
    await waitFor(() => expect(element).toContain('updatedData'));
  });
});

[TkDodo]

code looks generally okay.

await waitFor(() => expect(element).toContain('updatedData'));

• I don't know where element comes from, it's not shown
• I don't know why there should be the text 'updatedData' because you're not showing how the queries are rendered in the component.

This would be easier if you would show a running reproduction.

[bzitzow]

Thanks for taking a look!

I don't know where element comes from, it's not shown

element is the result of a react-testing-library query of the DOM. It's standard boilerplate to obtain a reference to a DOM element, and as such I figured it would just add noise to the example.

I don't know why there should be the text 'updatedData' because you're not showing how the queries are rendered in the component.

updatedData is a contrived example that represents the updated DOM after:

1. queryClient.invalidateQueries
2. updated data is then rendered in <MyComponent>

I did not include wiring this up in the example as it did not seem relevant, and it all works properly in the browser with the actual implementation.

Additional Information:
The test will reliably pass if we increase the timeout of the waitFor:

await waitFor(() => {
  expect(element).toContain('updatedData')
  },
  {
    timeout: 90000 // <-- timeout of 90 seconds
  }
  );

waitFor() essentially polls until the outcome is successful.

The empirical evidence is showing us that it is taking 10+ seconds to:

1. click the button
2. execute the mutation
3. execute the mutations onSuccess()
4. Invalidate the query
5. Fetch the updated data (mocked via Mock Service Worker)
6. Render the updated data

In Chrome it takes less than 1 second

Is polling for the expected result via waitFor() the recommended/preferred approach?

We were wondering if there is a way to approach the test that is not polling. Perhaps some way that react will know it has more state updates to make upon the button click?

This would be easier if you would show a running reproduction.

I hear you. I did start one, it's taking a bit of effort to set it up properly though ...

[TkDodo]

await waitFor(() => {
  expect(element).toContain('updatedData')
})

is fine, yeah, but you shouldn't need to add a timeout.

I hear you. I did start one, it's taking a bit of effort to set it up properly though ...

feel free to fork my testing-react-query repo, it has msw and rq set up for queries, and I think you could exend it with mutations:

https://github.com/tkdodo/testing-react-query