Issue with React Query Not Re-rendering on Successful MSW Response (testing)

[tam-eoh]

Hello everyone,

I'm currently facing an issue with React Query and MSW in my project and would appreciate any insights or suggestions from the community.

Issue Description:

I'm using React Query's useQuery hook for data fetching and MSW to mock the API responses in my tests. However, I've encountered a problem where, even though MSW successfully returns a response, the data fetched by useQuery does not trigger a re-render with the new data.

Code Example:

My component

Testing

Log info

Expected Behavior:

When MSW returns a successful response, useQuery should re-render the component with the new data.

Environment Details:

React Query Version: 5.8.7
MSW (Mock Service Worker) Version: 2.0.9
React Test Renderer Version: 18.2.0
Operating System: Ubuntu
React Version: 18.2.0
Testing Approach: Using react-test-renderer for component rendering tests.

[TkDodo]

I have a testing setup here where this works just fine:

https://github.com/TkDodo/testing-react-query

[tam-eoh]

I have checked your repo, and it works well with MSW. However, in my project, react-query does not trigger a re-render. Could this be due to a version difference in MSW?

Here is my repository:
https://github.com/tam-eoh/MSW-React-Query.
Could you please check it again?

[TkDodo]

I suggest you try to upgrade my reproduction to the latest msw, and if that fails, I'll take a look. If it works, you can compare yours to mine to see where yours went wrong.

[tam-eoh]

I found that the reason it does not get data from useQuery is due to using a different testing library. When using react-test-renderer, it is necessary to update the component in order to trigger a re-render and thus receive the data.