how to test a react component that invokes refetch

[Exponent500]

Hey there,

I am using this library in a project at work and we have a component that uses useQuery, which will invoke the refetch() function when a refresh button is clicked.

In my unit tests I'd like to verify that a re-fetch occurs by checking that our loading screen is shown, however since our loading screen is only shown if isFetching is true this fails. This is because after the initial fetch sets isFetching to false, it stays false even after calling refetch.

I've only seen examples of how to test this scenario when testing the custom hook that wraps useQuery, but I don't want to test the hook, I want to test the component that is ingesting it.

[louis-young]

Hi 👋

Try to think about what is important to the user. It sounds like you could test this by using something like Mock Service Worker and mocking two different responses. You can then make assertions about what the component displays before and after the refetch.

[Exponent500]

Hey Louis,

I forgot to mention that I am using Mock Service Worker to mock responses, and I am mocking one response on component load, and another before clicking refresh button. The issue is that the isFetching flag returned by useQuery is not transitioning from true to false when making the second request, so my test is still seeing the Loading component I render when isFetching is true.

[louis-young]

Awesome, that sounds great. So the issue is that the second assertion is failing because the component remains in a pending state? If so, this is likely to do with how you're waiting for the refetch to happen. Please could you provide a reproduction?

[Exponent500]

Yup I'll see what code snippets I can share that aren't sensitive since this is company code.