Testing React Query + Container Pattern

[ghost]

Hello!

I have been trying to figure out how to test React Query for a bit now and am not having much luck. Having come over from redux, you'd mock the store and then wrapper the container in the provider and pass in the mock store.

Given that each container in my application is fetching using react query, how do I go about mocking the useQuery / usePrefetchQuery so that the page will actually render for the test and not sit in an infinite loading state?

Thanks in advance for any help!

[ghost]

I did just see: https://github.com/tannerlinsley/react-query#reactquerycacheprovider

Could I add data the creation of the cache and then just wrap the container in that cache? Given the cache is valid for the keys that React Query is looking for, it shouldn't reach out to the API to actually fetch, right?

Just trying to make sure I am thinking this through properly and to see if anyone has any other suggestions. Thanks!

[ghost]

Figured it out! Hope this helps someone else out:

const someFunction = (devices: DeviceInterface[], premiumEnabled: boolean): ReactElement => {
    const queryCache = makeQueryCache();

    queryCache.setQueryData(['sites'], [{ id: mySite, name: 'MySite' }, { id: otherSite, name: 'OtherSite' }, { id: noSiteId, name: 'NoSite' }]);
    queryCache.setQueryData(['devices'], devices);

    return (
        <ReactQueryCacheProvider queryCache={queryCache}>
            <DeviceList premiumEnabled={premiumEnabled} />
        </ReactQueryCacheProvider>
    );
};

So, what you want to do is create a cache that the container/component can use in lieu of reaching out to the API. So, if you useQuery finds that same key and the cache is valid, there is no API request. Also, you need to wrap the container/component in the Provider so that the cache can actually be made available to the container/component.

Be really great if some testing scenarios could be added to the react-query documentation to give some guidance as to where to at least start.