How do I test that a refetch has been requested after a cache invalidation (in v3)?

[gidztech]

Hi, I'm fairly new user of the library so I may be misunderstanding some concepts. I have a mutation which deletes and item, and when it successfully completes, it calls queryClient.invalidateQueries(MY_LIST_QUERY_KEY);. This will trigger the list to refetch from the server, which now doesn't include the item. This is all done in a custom hook, and I would like to test that the list query requested a refetch from the server. My first attempt was the following:

const myQueryFn = jest.fn();
const observer = new QueryObserver(queryClient, { queryKey: MY_LIST_QUERY_KEY, enabled: false })
const unsubscribeQuery = observer.subscribe(myQueryFn);

... call my hook which does the mutation and invalidates the cache...

expect(myQueryFn).toHaveBeenCalledTimes(1);
unsubscribeQuery();

From what I understand, when you subscribe it calls the function straight away so I set it to be disabled. I expected that a subsequent refetch would trigger it once. This is the behaviour I experienced when I was using version 2 of the library with watchObserver. However, this doesn't seem to be the case now.

I was messing around and came up with the following solution. I don't know why it works, so this could be wrong. I suspect
the QueryObserver constructor must be making side effects?

const myQueryFn = jest.fn();

new QueryObserver(queryClient, {
    queryKey: MY_LIST_QUERY_KEY
});


const unsubscribeQuery = queryClient.getQueryCache().subscribe(query => {
    if (query?.queryKey === MY_LIST_QUERY_KEY) {
        myQueryFn();
    }
});

... call my hook which does the mutation and invalidates the cache...
expect(myQueryFn).toHaveBeenCalledTimes(1);
unsubscribeQuery();

Am I missing something obvious here? Any help would be much appreciated. Thanks.

[TkDodo]

I would like to test that the list query requested a refetch from the server

I would just mock the actual fetchFn and then see if it contains the data i want, or if the mock has been called the amount of times i want it to be called. E.g. with something like https://jestjs.io/docs/en/mock-function-api#mockfnmockresolvedvalueoncevalue

[gidztech]

I would like to test that the list query requested a refetch from the server

I would just mock the actual fetchFn and then see if it contains the data i want, or if the mock has been called the amount of times i want it to be called. E.g. with something like https://jestjs.io/docs/en/mock-function-api#mockfnmockresolvedvalueoncevalue

Thanks for the reply. Yes, I could actually do this. It also creates a blackbox around the details of cache invalidation, which is not really the responsibility of my test to care about. I already mock the delete call in this way, but it makes sense to mock the get list call and assert that the number of calls increases after the successfully delete.

The only downside is a bit more mocking, but it seems like the right way to go about it.

It would be interesting to know what the correct way would have been for using QueryObserver, more out of curiosity now.

[TkDodo]

I’ve never used a QueryObserver - haven’t had the need. A good alternative to mocking is mock service worker: https://mswjs.io

you can use it as a single source of mocking for node, the browser during development and even things like storybook stories.

[gidztech]

Thanks, yeah I've been meaning to check out Service Worker mocking for a couple years now. Looks like things have progressed a lot with libraries for both Node and browser. 👍