Want to test loading state of useQuery.

[EvanHammond]

What is the preferred way to test the loading state of a useQuery call? I've so far attempted a hand full of different methodologies for this, and they all seem to produce different errors. An example would be most welcome, and if that isn't possible, a point in the right direction would be great.

Thanks!

[CreativeTechGuy]

Do you mean like in a unit test? Assuming you've mocked your actual API call method, you can define the mock implementation to have a delay before it resolves and use this to check the loading state. If you are using jest (or something with a similar API) the useFakeTimers method will be useful here to manually advance your time so you don't run into race conditions.

[TkDodo]

have a look at how react-query tests the useQuery hook internally, I think it's brilliant:

https://github.com/tannerlinsley/react-query/blob/69236d3e0bce712376767a86eac9246b304f6be6/src/react/tests/useQuery.test.tsx#L103-L172

Yes, you will need to mock your actual api call somehow (jest, mock-service-worker, ...)