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.

[TkDodo]

This is because after the initial fetch sets isFetching to false, it stays false even after calling refetch.

That's not right. What you are describing is isLoading. isFetching will always be true whenever there is a request in-flight.

[Exponent500]

This is because after the initial fetch sets isFetching to false, it stays false even after calling refetch.

That's not right. What you are describing is isLoading. isFetching will always be true whenever there is a request in-flight.

Yup I understand that, which is why I found this as weird behavior. I'll see what snippets I can share that aren't sensitive since this is company code, but know that the Loading component is conditionally rendered based on if isFetching is true. In my unit test I console out the state of isFetching and I never see it transition from false to true after clicking the refresh button