flat-fuchsia

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)

  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 I am using : - "react": "^19.1.0" - "@tanstack/react-query": "^5.76.1" - "cypress": "^14.3.2"

5 Replies

like-gold•7mo ago

do you have a stable queryClient ?

flat-fuchsiaOP•7mo ago

It was not stable, I've changed things so that it is now created outside the component it was previously inside. But my tests are still failing for some reason. I've found the culprit. In my Cypress test I had the following:

    const now = new Date(2021, 10, 14).getTime()
    cy.clock(now)

    const now = new Date(2021, 10, 14).getTime()
    cy.clock(now)

For some reason removing that made things start working again. Not sure why setting the Cypress clock broke things to begin with though? Is useQuery sensitive to the date with regards to it's cache invalidation calculations?

like-gold•7mo ago

because we use setTimeout somewhere and cypress clock overwrites that

flat-fuchsiaOP•7mo ago

I'm assuming that the use of setTimeout was added after v3 then? If I want to mock dates for my Cypress tests is there any alternative available to me? Or is this best to ask in the Cypress Discord?

like-gold•7mo ago

Try this: notifyManager.setScheduler(cb => cb()) In tests only!

Gaming

Programming

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

Did you find this page helpful?