react-query suspense mode 테스트 삽집 후기

import { useQuery } from 'react-query'
import { isNil } from '@madup-inc/utils'
import { BusinessApi } from 'api/index'

export default function useBusiness({ bizId }) {
    return useQuery(
        ['business', bizId],
        () => BusinessApi.getBusiness({ bizId }),
        {
            suspense: true,
            enabled: !isNil(bizId),
        },
    )
}

import useBusiness from 'queries/useBusiness'
import { BusinessApi } from 'api/index'
import { QueryClient, QueryClientProvider } from 'react-query'
import { renderHook } from '@testing-library/react-hooks'
import ErrorScreen from '../ui-component/ErrorScreen'
import ErrorBoundary from '../ErrorBoundary'

jest.mock('api/index')

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            retryDelay: attemptIndex =>
                Math.min(1000 * 2 ** attemptIndex, 30000),
            retry: 0,
            staleTime: 1000 * 10, // cached for 10 seconds
        },
    },
})

const wrapper = ({ children }) => (
    <ErrorBoundary fallback={ErrorScreen}>
        <QueryClientProvider client={queryClient}>
            {children}
        </QueryClientProvider>
    </ErrorBoundary>
)

describe('useBusiness', () => {
    test('bizId 가 다를 경우에만 api 호출이 발생해야 한다.', async () => {
        BusinessApi.getBusiness.mockResolvedValue('hello world')
        const { waitFor, result, waitForNextUpdate } = renderHook(
            () => useBusiness({ bizId: 1 }),
            { wrapper },
        )
        //
        // await waitForNextUpdate({ timeout: 5000 })

        await waitFor(() => result?.current?.data !== undefined, { timeout: 5000 })
        expect(BusinessApi.getBusiness).toHaveBeenCalledTimes(1)
    })
})

Watch Usage: Press w to show more.
 FAIL  src/queries/useBusiness.test.js (10.812 s)
  useBusiness
    ✕ bizId 가 다를 경우에만 api 호출이 발생해야 한다. (5004 ms)

  ● useBusiness › bizId 가 다를 경우에만 api 호출이 발생해야 한다.

    thrown: "Exceeded timeout of 5000 ms for a test.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

      28 |
      29 | describe('useBusiness', () => {
    > 30 |     test('bizId 가 다를 경우에만 api 호출이 발생해야 한다.', async () => {
         |     ^
      31 |         BusinessApi.getBusiness.mockResolvedValue('hello world')
      32 |         const { waitFor, result, waitForNextUpdate } = renderHook(
      33 |             () => useBusiness({ bizId: 1 }),

      at src/queries/useBusiness.test.js:30:5
      at Object.<anonymous> (src/queries/useBusiness.test.js:29:1)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        12.639 s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.