Testing Retry Function Logic

[kylebake]

I've seen the documentation around disabling retries for testing purposes, but is there a way to test specific retry logic when retry is given a function?

Consider the following example (not the actual code I'm running):

useQuery(
  ['some-cool-key'],
  () => getSomeStuff(),
  {
    retry: (failureCount, error) => {
      if (error.code === 403 || failureCount >= 3) return false

      return true
    },
    onError: error => {
      AnalyticsLogError(error)
    },
  },
)

I'd like to have some unit tests asserting my retry logic triggers retries when expected. I can get the assertions to work when checking for the error code just fine, but I can't seem to actually get the test to retry (so testing the failureCount + return true bit).

Is there a known way to handle this? Or is the answer always to disable retries in tests?

[TkDodo]

but I can't seem to actually get the test to retry

not sure what you mean by that exactly. you can certainly keep the retries on, you just have to make sure that your tests run long enough to account for the exponential backoff (or you override the retryDelay).

if I wanted to test that logic, I would extract the function and test it separately. There is no point in testing if react-query calls the retry function with correct params, because we test that internally :)

[nop33]

For reference, this is how I manage do accomplish testing the retry mechanism:

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'
import { renderHook, waitFor } from '@testing-library/react'
import { http } from 'msw'
import { ReactNode } from 'react'

import { addressAlphBalancesQuery } from '@/api/queries/addressQueries'
import { queryClientConfig } from '@/api/queryClient'
import { server } from '@/tests/api/setup'

const TEST_TIMEOUT = 60 * 1000

describe('retry', () => {
  it(
    'Should retry max 3 times when receiving a 429 response',
    async () => {
      // Mock explorer backend response with 429 response
      server.use(http.get('*/addresses/*/balance', () => new Response(null, { status: 429 })))

      const result = renderBalancesHookWithQueryClient()

      // First try
      await waitFor(() => expect(result.current.failureCount).toBe(1))
      expect(result.current.isLoading).toBe(true)
      expect(result.current.isError).toBe(false)

      // Second try
      await waitFor(() => expect(result.current.failureCount).toBe(2))
      expect(result.current.isLoading).toBe(true)
      expect(result.current.isError).toBe(false)

      // Third try
      await waitFor(() => expect(result.current.failureCount).toBe(3), { timeout: TEST_TIMEOUT })
      expect(result.current.isLoading).toBe(true)
      expect(result.current.isError).toBe(false)

      // After the third try the query should be in error state and stop loading
      await waitFor(() => expect(result.current.isError).toBe(true), { timeout: TEST_TIMEOUT })
      expect(result.current.isLoading).toBe(false)
    },
    TEST_TIMEOUT
  )
})

const renderBalancesHookWithQueryClient = () => {
  const queryClient = new QueryClient(queryClientConfig)

  const wrapper = ({ children }: { children: ReactNode }) => (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  )

  const { result } = renderHook(
    () =>
      useQuery(
        addressAlphBalancesQuery({ addressHash: '1DrDyTr9RpRsQnDnXo2YRiPzPW4ooHX5LLoqXrqfMrpQH', networkId: 0 })
      ),
    { wrapper }
  )

  return result
}