T
TanStack•2y ago
ambitious-aqua

Mocking react query data for react-testing-library

Hello all! Huge fan of ReactQuery and starting to introduce testing into our app. My use case is that I have a banner, which has a custom ReactQuery hook that fetches data to show in the banner (an object of string values). I'd like to mock a test response and verify that the data is rendered in the component. I'm using react-testing-library and jest to run the test. I've properly wrapped my render method with a QueryProvider 
 <QueryClientProvider client={queryClient}>
     <Banner />
   </QueryClientProvider>,
 <QueryClientProvider client={queryClient}>
     <Banner />
   </QueryClientProvider>,
In my test case, I have a static mock data object, which I'd like to test against. However, I'm having trouble figuring out how to provide that as test data for the react-query query that runs inside the component. Any help would be appreciated. Thank you! Happy to provide any additional code samples if helpful
2 Replies
exotic-emerald
exotic-emerald•2y ago
Do you know mock service worker? It’s quite nice
ambitious-aqua
ambitious-aquaOP•2y ago
I do not! I'll take a look at it though, thank you.

Did you find this page helpful?