TanStack•10mo 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

useQuery

completes, the component doesn't re-render so the

data

data

variable is

undefined

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)

  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}

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}

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)

  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}

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

useQuery

I am using :
-

"react": "^19.1.0"

"react": "^19.1.0"

"@tanstack/react-query": "^5.76.1"

"@tanstack/react-query": "^5.76.1"

"cypress": "^14.3.2"

"cypress": "^14.3.2"

TanStack•10mo ago•

8 replies

faint-white

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

useQuery

useQuery

completes, the component doesn't re-render so the

data

data

variable is

undefined

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)

  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}

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}

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)

  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}

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

useQuery

I am using :
-

"react": "^19.1.0"

"react": "^19.1.0"

"@tanstack/react-query": "^5.76.1"

"@tanstack/react-query": "^5.76.1"

"cypress": "^14.3.2"

"cypress": "^14.3.2"

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads