TanStackT
TanStack•8mo ago•
8 replies
faint-white

Cypress tests failing after upgrading from react-query v3 to v5

I'm trying to upgrade to v5 of react-query, but I'm experiencing a weird issue where some of my e2e Cypress tests are no longer working. In these tests I am mocking data returned from an API. Running the tests with breakpoints, I can see in the network tab that the mocked data is correctly appearing in the response. However once the useQuery completes, the component doesn't re-render so the 
data
 variable is 
undefined


Here's vaguely what my code looks like:

  const { data } = useQuery({
    queryKey: ['agencies', arg1, arg2,...],
    queryFn: async () => {
      const response = await getData()
      console.log('in query: ', response)
      return response
    },
  })

  console.log('in render: ': data)


When I run the Cypress test the console looks like this:
in render:  undefined
in query:  {data: {…}, success: true}


If I run my app outside of Cypress using Vite, everything works fine. The console looks like this:
in render:  undefined
in query:  {data: {…}, success: true}
in render:  {data: {…}, success: true}
in render:  {data: {…}, success: true}


When I was on v3 on react-query my code looked like:
  const { data } = useQuery(
      ['agencies', arg1, arg2,...],
      async () => {
        const response = await getData()
        console.log('in query: ', response)
        return response
      }
  )
console.log('in render: ': data)


And running when Cypress the console looked like:
in render:  undefined
in query:  {data: {…}, success: true}
in render:  {data: {…}, success: true}


So to me it looks like my component isn't re-rendering when it should once it has received the data from the 
useQuery


I am using :
- "react": "^19.1.0"
- "@tanstack/react-query": "^5.76.1"
- "cypress": "^14.3.2"
Was this page helpful?