Skip to content

Commit ac5d858

Browse files
sukvvonmanudeli
sukvvon
and
manudeli
authored
test(react-query/useSuspenseQueries): use precise time in 'advanceTimersByTimeAsync', and add 'expect' using 'toBeInTheDocument' (#9450)
Co-authored-by: Jonghyeon Ko <manudeli.ko@gmail.com>
1 parent ff13c2e commit ac5d858

File tree

1 file changed

+40
-55
lines changed

1 file changed

+40
-55
lines changed

‎packages/react-query/src/__tests__/useSuspenseQueries.test.tsx‎

Lines changed: 40 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -179,10 +179,10 @@ describe('useSuspenseQueries', () => {
179179
</React.Suspense>,
180180
)
181181

182-
rendered.getByText('loading...')
182+
expect(rendered.getByText('loading...')).toBeInTheDocument()
183183
expect(spy).not.toHaveBeenCalled()
184184
await act(() => vi.advanceTimersByTimeAsync(30))
185-
rendered.getByText('data')
185+
expect(rendered.getByText('data')).toBeInTheDocument()
186186
expect(spy).toHaveBeenCalled()
187187
})
188188
})
@@ -241,9 +241,9 @@ describe('useSuspenseQueries 2', () => {
241241
</React.Suspense>,
242242
)
243243

244-
rendered.getByText('loading')
245-
await act(() => vi.advanceTimersByTimeAsync(21))
246-
rendered.getByText('data: 1,2')
244+
expect(rendered.getByText('loading')).toBeInTheDocument()
245+
await act(() => vi.advanceTimersByTimeAsync(20))
246+
expect(rendered.getByText('data: 1,2')).toBeInTheDocument()
247247
expect(results).toEqual(['1', '2', 'loading'])
248248
})
249249

@@ -296,10 +296,10 @@ describe('useSuspenseQueries 2', () => {
296296
</React.Suspense>,
297297
)
298298

299-
rendered.getByText('loading')
299+
expect(rendered.getByText('loading')).toBeInTheDocument()
300300
expect(refs.length).toBe(2)
301-
await act(() => vi.advanceTimersByTimeAsync(21))
302-
rendered.getByText('data: 1,2')
301+
await act(() => vi.advanceTimersByTimeAsync(20))
302+
expect(rendered.getByText('data: 1,2')).toBeInTheDocument()
303303
expect(refs[0]).toBe(refs[1])
304304
})
305305

@@ -311,7 +311,7 @@ describe('useSuspenseQueries 2', () => {
311311

312312
const { data } = useSuspenseQuery({
313313
queryKey: [id],
314-
queryFn: () => Promise.resolve(`Data ${id}`),
314+
queryFn: () => sleep(10).then(() => `Data ${id}`),
315315
})
316316

317317
// defensive guard here
@@ -335,8 +335,8 @@ describe('useSuspenseQueries 2', () => {
335335
)
336336

337337
expect(rendered.getByText('loading')).toBeInTheDocument()
338-
await act(() => vi.advanceTimersByTimeAsync(0))
339-
rendered.getByText('Data 0')
338+
await act(() => vi.advanceTimersByTimeAsync(10))
339+
expect(rendered.getByText('Data 0')).toBeInTheDocument()
340340

341341
// go offline
342342
document.dispatchEvent(new CustomEvent('offline'))
@@ -348,7 +348,7 @@ describe('useSuspenseQueries 2', () => {
348348
document.dispatchEvent(new CustomEvent('online'))
349349

350350
fireEvent.click(rendered.getByText('fetch'))
351-
await act(() => vi.advanceTimersByTimeAsync(0))
351+
await act(() => vi.advanceTimersByTimeAsync(10))
352352
// query should resume
353353
expect(rendered.getByText('Data 1')).toBeInTheDocument()
354354
})
@@ -363,15 +363,11 @@ describe('useSuspenseQueries 2', () => {
363363
const [fail, setFail] = React.useState(false)
364364
const { data } = useSuspenseQuery({
365365
queryKey: [key, fail],
366-
queryFn: async () => {
367-
await sleep(10)
368-
369-
if (fail) {
370-
throw new Error('Suspense Error Bingo')
371-
} else {
366+
queryFn: () =>
367+
sleep(10).then(() => {
368+
if (fail) throw new Error('Suspense Error Bingo')
372369
return 'data'
373-
}
374-
},
370+
}),
375371
retry: 0,
376372
})
377373

@@ -393,12 +389,12 @@ describe('useSuspenseQueries 2', () => {
393389
</ErrorBoundary>,
394390
)
395391

396-
rendered.getByText('Loading...')
397-
await act(() => vi.advanceTimersByTimeAsync(11))
398-
rendered.getByText('rendered: data')
392+
expect(rendered.getByText('Loading...')).toBeInTheDocument()
393+
await act(() => vi.advanceTimersByTimeAsync(10))
394+
expect(rendered.getByText('rendered: data')).toBeInTheDocument()
399395
fireEvent.click(rendered.getByText('trigger fail'))
400-
await act(() => vi.advanceTimersByTimeAsync(11))
401-
rendered.getByText('error boundary')
396+
await act(() => vi.advanceTimersByTimeAsync(10))
397+
expect(rendered.getByText('error boundary')).toBeInTheDocument()
402398
expect(consoleMock.mock.calls[0]?.[1]).toStrictEqual(
403399
new Error('Suspense Error Bingo'),
404400
)
@@ -413,10 +409,7 @@ describe('useSuspenseQueries 2', () => {
413409
const [isPending, startTransition] = React.useTransition()
414410
const { data } = useSuspenseQuery({
415411
queryKey: [key, count],
416-
queryFn: async () => {
417-
await sleep(10)
418-
return 'data' + count
419-
},
412+
queryFn: async () => sleep(10).then(() => 'data' + count),
420413
})
421414

422415
return (
@@ -438,11 +431,11 @@ describe('useSuspenseQueries 2', () => {
438431
)
439432

440433
expect(rendered.getByText('Loading...')).toBeInTheDocument()
441-
await act(() => vi.advanceTimersByTimeAsync(11))
434+
await act(() => vi.advanceTimersByTimeAsync(10))
442435
expect(rendered.getByText('data0')).toBeInTheDocument()
443436
fireEvent.click(rendered.getByText('inc'))
444437
expect(rendered.getByText('Pending...')).toBeInTheDocument()
445-
await act(() => vi.advanceTimersByTimeAsync(11))
438+
await act(() => vi.advanceTimersByTimeAsync(10))
446439
expect(rendered.getByText('data1')).toBeInTheDocument()
447440
})
448441

@@ -490,12 +483,12 @@ describe('useSuspenseQueries 2', () => {
490483
<App />,
491484
)
492485

493-
rendered.getByText('Loading...')
494-
await act(() => vi.advanceTimersByTimeAsync(11))
495-
rendered.getByText('data0')
486+
expect(rendered.getByText('Loading...')).toBeInTheDocument()
487+
await act(() => vi.advanceTimersByTimeAsync(10))
488+
expect(rendered.getByText('data0')).toBeInTheDocument()
496489
fireEvent.click(rendered.getByText('inc'))
497-
await act(() => vi.advanceTimersByTimeAsync(11))
498-
rendered.getByText('data1')
490+
await act(() => vi.advanceTimersByTimeAsync(10))
491+
expect(rendered.getByText('data1')).toBeInTheDocument()
499492
expect(queryFnCount).toBe(2)
500493
})
501494

@@ -514,10 +507,7 @@ describe('useSuspenseQueries 2', () => {
514507
const [isPending, startTransition] = React.useTransition()
515508
const { data } = useSuspenseQuery({
516509
queryKey: [key, count],
517-
queryFn: async () => {
518-
await sleep(10)
519-
return 'data' + count
520-
},
510+
queryFn: async () => sleep(10).then(() => 'data' + count),
521511
})
522512

523513
return (
@@ -539,11 +529,11 @@ describe('useSuspenseQueries 2', () => {
539529
)
540530

541531
expect(rendered.getByText('Loading...')).toBeInTheDocument()
542-
await act(() => vi.advanceTimersByTimeAsync(11))
532+
await act(() => vi.advanceTimersByTimeAsync(10))
543533
expect(rendered.getByText('data0')).toBeInTheDocument()
544534
fireEvent.click(rendered.getByText('inc'))
545535
expect(rendered.getByText('Pending...')).toBeInTheDocument()
546-
await act(() => vi.advanceTimersByTimeAsync(11))
536+
await act(() => vi.advanceTimersByTimeAsync(10))
547537
expect(rendered.getByText('data1')).toBeInTheDocument()
548538
})
549539

@@ -557,8 +547,9 @@ describe('useSuspenseQueries 2', () => {
557547
function Page() {
558548
useSuspenseQuery({
559549
queryKey: key,
560-
queryFn: () => {
550+
queryFn: async () => {
561551
count++
552+
await sleep(10)
562553
return Promise.reject(new Error('Query failed'))
563554
},
564555
gcTime: 0,
@@ -584,8 +575,8 @@ describe('useSuspenseQueries 2', () => {
584575

585576
const rendered = renderWithClient(queryClient, <App />)
586577

587-
await act(() => vi.advanceTimersByTimeAsync(0))
588-
rendered.getByText('There was an error!')
578+
await act(() => vi.advanceTimersByTimeAsync(10))
579+
expect(rendered.getByText('There was an error!')).toBeInTheDocument()
589580
expect(count).toBe(1)
590581
consoleMock.mockRestore()
591582
})
@@ -613,10 +604,7 @@ describe('useSuspenseQueries 2', () => {
613604
function Component() {
614605
const { data } = useSuspenseQuery({
615606
queryKey: key,
616-
queryFn: async () => {
617-
await sleep(3000)
618-
return 'data'
619-
},
607+
queryFn: async () => sleep(3000).then(() => 'data'),
620608
gcTime: 1000,
621609
})
622610

@@ -639,14 +627,11 @@ describe('useSuspenseQueries 2', () => {
639627

640628
const rendered = renderWithClient(queryClient, <App />)
641629

642-
await act(() => vi.advanceTimersByTimeAsync(200))
643-
rendered.getByText('loading')
644-
// unmount while still fetching
630+
expect(rendered.getByText('loading')).toBeInTheDocument()
645631
fireEvent.click(rendered.getByText('hide'))
646-
await act(() => vi.advanceTimersByTimeAsync(800))
647-
rendered.getByText('page2')
632+
expect(rendered.getByText('page2')).toBeInTheDocument()
648633
// wait for query to be resolved
649-
await act(() => vi.advanceTimersByTimeAsync(2000))
634+
await act(() => vi.advanceTimersByTimeAsync(3000))
650635
expect(queryClient.getQueryData(key)).toBe('data')
651636
// wait for gc
652637
await act(() => vi.advanceTimersByTimeAsync(1000))

0 commit comments

Comments
 (0)