Skip to content

Commit ed66939

Browse files
sukvvonmanudeli
sukvvon
and
manudeli
authored
test(react-query/useSuspenseQuery): switch to fake timers and replace 'waitFor' with 'vi.waitFor' (#9357)
Co-authored-by: Jonghyeon Ko <[email protected]>
1 parent 026c050 commit ed66939

File tree

1 file changed

+70
-52
lines changed

1 file changed

+70
-52
lines changed

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

Lines changed: 70 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { describe, expect, it, vi } from 'vitest'
2-
import { fireEvent, waitFor } from '@testing-library/react'
1+
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
2+
import { fireEvent } from '@testing-library/react'
33
import * as React from 'react'
44
import { ErrorBoundary } from 'react-error-boundary'
55
import { queryKey, sleep } from '@tanstack/query-test-utils'
@@ -20,6 +20,14 @@ import type {
2020
} from '..'
2121

2222
describe('useSuspenseQuery', () => {
23+
beforeEach(() => {
24+
vi.useFakeTimers()
25+
})
26+
27+
afterEach(() => {
28+
vi.useRealTimers()
29+
})
30+
2331
const queryCache = new QueryCache()
2432
const queryClient = new QueryClient({ queryCache })
2533

@@ -61,10 +69,10 @@ describe('useSuspenseQuery', () => {
6169
</React.Suspense>,
6270
)
6371

64-
await waitFor(() => rendered.getByText('data: 1'))
72+
await vi.waitFor(() => rendered.getByText('data: 1'))
6573
fireEvent.click(rendered.getByLabelText('toggle'))
6674

67-
await waitFor(() => rendered.getByText('data: 2'))
75+
await vi.waitFor(() => rendered.getByText('data: 2'))
6876

6977
expect(renders).toBe(6)
7078
expect(states.length).toBe(2)
@@ -104,7 +112,7 @@ describe('useSuspenseQuery', () => {
104112
</React.Suspense>,
105113
)
106114

107-
await waitFor(() => rendered.getByText('data: 1'))
115+
await vi.waitFor(() => rendered.getByText('data: 1'))
108116

109117
expect(states.length).toBe(1)
110118
expect(states[0]).toMatchObject({
@@ -113,7 +121,7 @@ describe('useSuspenseQuery', () => {
113121
})
114122

115123
fireEvent.click(rendered.getByText('next'))
116-
await waitFor(() => rendered.getByText('data: 2'))
124+
await vi.waitFor(() => rendered.getByText('data: 2'))
117125

118126
expect(states.length).toBe(2)
119127
expect(states[1]).toMatchObject({
@@ -144,7 +152,7 @@ describe('useSuspenseQuery', () => {
144152
</React.Suspense>,
145153
)
146154

147-
await waitFor(() => rendered.getByText('rendered'))
155+
await vi.waitFor(() => rendered.getByText('rendered'))
148156

149157
expect(queryFn).toHaveBeenCalledTimes(1)
150158
})
@@ -184,7 +192,7 @@ describe('useSuspenseQuery', () => {
184192
expect(queryCache.find({ queryKey: key })).toBeFalsy()
185193

186194
fireEvent.click(rendered.getByLabelText('toggle'))
187-
await waitFor(() => rendered.getByText('rendered'))
195+
await vi.waitFor(() => rendered.getByText('rendered'))
188196

189197
expect(queryCache.find({ queryKey: key })?.getObserversCount()).toBe(1)
190198

@@ -249,15 +257,15 @@ describe('useSuspenseQuery', () => {
249257
</QueryErrorResetBoundary>,
250258
)
251259

252-
await waitFor(() => rendered.getByText('Loading...'))
260+
await vi.waitFor(() => rendered.getByText('Loading...'))
253261

254-
await waitFor(() => rendered.getByText('error boundary'))
262+
await vi.waitFor(() => rendered.getByText('error boundary'))
255263

256-
await waitFor(() => rendered.getByText('retry'))
264+
await vi.waitFor(() => rendered.getByText('retry'))
257265

258266
fireEvent.click(rendered.getByText('retry'))
259267

260-
await waitFor(() => rendered.getByText('rendered'))
268+
await vi.waitFor(() => rendered.getByText('rendered'))
261269

262270
expect(consoleMock.mock.calls[0]?.[1]).toStrictEqual(
263271
new Error('Suspense Error Bingo'),
@@ -317,21 +325,25 @@ describe('useSuspenseQuery', () => {
317325
</QueryErrorResetBoundary>,
318326
)
319327

320-
await waitFor(() =>
328+
await vi.waitFor(() =>
321329
expect(rendered.getByText('Loading...')).toBeInTheDocument(),
322330
)
323-
await waitFor(() =>
331+
await vi.waitFor(() =>
324332
expect(rendered.getByText('error boundary')).toBeInTheDocument(),
325333
)
326-
await waitFor(() => expect(rendered.getByText('retry')).toBeInTheDocument())
334+
await vi.waitFor(() =>
335+
expect(rendered.getByText('retry')).toBeInTheDocument(),
336+
)
327337
fireEvent.click(rendered.getByText('retry'))
328-
await waitFor(() =>
338+
await vi.waitFor(() =>
329339
expect(rendered.getByText('error boundary')).toBeInTheDocument(),
330340
)
331-
await waitFor(() => expect(rendered.getByText('retry')).toBeInTheDocument())
341+
await vi.waitFor(() =>
342+
expect(rendered.getByText('retry')).toBeInTheDocument(),
343+
)
332344
succeed = true
333345
fireEvent.click(rendered.getByText('retry'))
334-
await waitFor(() =>
346+
await vi.waitFor(() =>
335347
expect(rendered.getByText('rendered')).toBeInTheDocument(),
336348
)
337349
consoleMock.mockRestore()
@@ -368,8 +380,8 @@ describe('useSuspenseQuery', () => {
368380

369381
const rendered = renderWithClient(queryClient, <Page />)
370382

371-
await waitFor(() => rendered.getByText('Loading...'))
372-
await waitFor(() => rendered.getByText('data: 1'))
383+
await vi.waitFor(() => rendered.getByText('Loading...'))
384+
await vi.waitFor(() => rendered.getByText('data: 1'))
373385

374386
expect(
375387
typeof queryClient.getQueryCache().find({ queryKey: key })?.observers[0]
@@ -414,17 +426,17 @@ describe('useSuspenseQuery', () => {
414426

415427
const rendered = renderWithClient(queryClient, <Page />)
416428

417-
await waitFor(() =>
429+
await vi.waitFor(() =>
418430
expect(rendered.getByText('Loading...')).toBeInTheDocument(),
419431
)
420-
await waitFor(() =>
432+
await vi.waitFor(() =>
421433
expect(rendered.getByText(`data: ${key1}`)).toBeInTheDocument(),
422434
)
423435
fireEvent.click(rendered.getByText('switch'))
424-
await waitFor(() =>
436+
await vi.waitFor(() =>
425437
expect(rendered.getByText('Loading...')).toBeInTheDocument(),
426438
)
427-
await waitFor(() =>
439+
await vi.waitFor(() =>
428440
expect(rendered.getByText(`data: ${key2}`)).toBeInTheDocument(),
429441
)
430442
})
@@ -480,21 +492,25 @@ describe('useSuspenseQuery', () => {
480492

481493
const rendered = renderWithClient(queryClient, <App />)
482494

483-
await waitFor(() =>
495+
await vi.waitFor(() =>
484496
expect(rendered.getByText('Loading...')).toBeInTheDocument(),
485497
)
486-
await waitFor(() =>
498+
await vi.waitFor(() =>
487499
expect(rendered.getByText('error boundary')).toBeInTheDocument(),
488500
)
489-
await waitFor(() => expect(rendered.getByText('retry')).toBeInTheDocument())
501+
await vi.waitFor(() =>
502+
expect(rendered.getByText('retry')).toBeInTheDocument(),
503+
)
490504
fireEvent.click(rendered.getByText('retry'))
491-
await waitFor(() =>
505+
await vi.waitFor(() =>
492506
expect(rendered.getByText('error boundary')).toBeInTheDocument(),
493507
)
494-
await waitFor(() => expect(rendered.getByText('retry')).toBeInTheDocument())
508+
await vi.waitFor(() =>
509+
expect(rendered.getByText('retry')).toBeInTheDocument(),
510+
)
495511
succeed = true
496512
fireEvent.click(rendered.getByText('retry'))
497-
await waitFor(() =>
513+
await vi.waitFor(() =>
498514
expect(rendered.getByText('rendered')).toBeInTheDocument(),
499515
)
500516
consoleMock.mockRestore()
@@ -536,10 +552,10 @@ describe('useSuspenseQuery', () => {
536552

537553
const rendered = renderWithClient(queryClient, <App />)
538554

539-
await waitFor(() =>
555+
await vi.waitFor(() =>
540556
expect(rendered.getByText('Loading...')).toBeInTheDocument(),
541557
)
542-
await waitFor(() =>
558+
await vi.waitFor(() =>
543559
expect(rendered.getByText('error boundary')).toBeInTheDocument(),
544560
)
545561
consoleMock.mockRestore()
@@ -583,10 +599,10 @@ describe('useSuspenseQuery', () => {
583599

584600
const rendered = renderWithClient(queryClient, <App />)
585601

586-
await waitFor(() =>
602+
await vi.waitFor(() =>
587603
expect(rendered.getByText('Loading...')).toBeInTheDocument(),
588604
)
589-
await waitFor(() =>
605+
await vi.waitFor(() =>
590606
expect(rendered.getByText('error boundary')).toBeInTheDocument(),
591607
)
592608
consoleMock.mockRestore()
@@ -647,16 +663,16 @@ describe('useSuspenseQuery', () => {
647663
const rendered = renderWithClient(queryClient, <App />)
648664

649665
// render suspense fallback (Loading...)
650-
await waitFor(() => rendered.getByText('Loading...'))
666+
await vi.waitFor(() => rendered.getByText('Loading...'))
651667
// resolve promise -> render Page (rendered)
652-
await waitFor(() => rendered.getByText('rendered'))
668+
await vi.waitFor(() => rendered.getByText('rendered'))
653669

654670
// change query key
655671
succeed = false
656672
// reset query -> and throw error
657673
fireEvent.click(rendered.getByLabelText('fail'))
658674
// render error boundary fallback (error boundary)
659-
await waitFor(() => rendered.getByText('error boundary'))
675+
await vi.waitFor(() => rendered.getByText('error boundary'))
660676
expect(consoleMock.mock.calls[0]?.[1]).toStrictEqual(
661677
new Error('Suspense Error Bingo'),
662678
)
@@ -718,16 +734,16 @@ describe('useSuspenseQuery', () => {
718734
const rendered = renderWithClient(queryClient, <App />)
719735

720736
// render suspense fallback (Loading...)
721-
await waitFor(() => rendered.getByText('Loading...'))
737+
await vi.waitFor(() => rendered.getByText('Loading...'))
722738
// resolve promise -> render Page (rendered)
723-
await waitFor(() => rendered.getByText('rendered'))
739+
await vi.waitFor(() => rendered.getByText('rendered'))
724740

725741
// change promise result to error
726742
succeed = false
727743
// change query key
728744
fireEvent.click(rendered.getByLabelText('fail'))
729745
// render error boundary fallback (error boundary)
730-
await waitFor(() => rendered.getByText('error boundary'))
746+
await vi.waitFor(() => rendered.getByText('error boundary'))
731747
expect(consoleMock.mock.calls[0]?.[1]).toStrictEqual(
732748
new Error('Suspense Error Bingo'),
733749
)
@@ -769,15 +785,17 @@ describe('useSuspenseQuery', () => {
769785
</React.Suspense>,
770786
)
771787

772-
await waitFor(() =>
788+
await vi.waitFor(() =>
773789
expect(state).toMatchObject({
774790
data: 1,
775791
status: 'success',
776792
}),
777793
)
778794

779795
expect(renders).toBe(3)
780-
await waitFor(() => expect(rendered.queryByText('rendered')).not.toBeNull())
796+
await vi.waitFor(() =>
797+
expect(rendered.queryByText('rendered')).not.toBeNull(),
798+
)
781799
})
782800

783801
it('should not throw background errors to the error boundary', async () => {
@@ -828,11 +846,11 @@ describe('useSuspenseQuery', () => {
828846
const rendered = renderWithClient(queryClient, <App />)
829847

830848
// render suspense fallback (Loading...)
831-
await waitFor(() =>
849+
await vi.waitFor(() =>
832850
expect(rendered.getByText('Loading...')).toBeInTheDocument(),
833851
)
834852
// resolve promise -> render Page (rendered)
835-
await waitFor(() =>
853+
await vi.waitFor(() =>
836854
expect(rendered.getByText('rendered data success')).toBeInTheDocument(),
837855
)
838856

@@ -841,7 +859,7 @@ describe('useSuspenseQuery', () => {
841859
// refetch
842860
fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
843861
// we are now in error state but still have data to show
844-
await waitFor(() =>
862+
await vi.waitFor(() =>
845863
expect(rendered.getByText('rendered data error')).toBeInTheDocument(),
846864
)
847865

@@ -889,18 +907,18 @@ describe('useSuspenseQuery', () => {
889907
<Page />
890908
</React.Suspense>,
891909
)
892-
await waitFor(() =>
910+
await vi.waitFor(() =>
893911
expect(rendered.getByText('loading')).toBeInTheDocument(),
894912
)
895-
await waitFor(() =>
913+
await vi.waitFor(() =>
896914
expect(rendered.getByText('data: 1')).toBeInTheDocument(),
897915
)
898916
fireEvent.click(rendered.getByLabelText('toggle'))
899917

900-
await waitFor(() =>
918+
await vi.waitFor(() =>
901919
expect(rendered.getByText('loading')).toBeInTheDocument(),
902920
)
903-
await waitFor(() =>
921+
await vi.waitFor(() =>
904922
expect(rendered.getByText('data: 2')).toBeInTheDocument(),
905923
)
906924
})
@@ -961,9 +979,9 @@ describe('useSuspenseQuery', () => {
961979
</React.Suspense>,
962980
)
963981

964-
await waitFor(() => rendered.getByText('count: 1'))
965-
await waitFor(() => rendered.getByText('count: 2'))
966-
await waitFor(() => rendered.getByText('count: 3'))
982+
await vi.waitFor(() => rendered.getByText('count: 1'))
983+
await vi.waitFor(() => rendered.getByText('count: 2'))
984+
await vi.waitFor(() => rendered.getByText('count: 3'))
967985

968986
expect(count).toBeGreaterThanOrEqual(3)
969987
})

0 commit comments

Comments
 (0)