Skip to content

Commit ed8cc23

Browse files
sukvvonmanudeli
sukvvon
and
manudeli
authored
test(react-query/useSuspenseQuery): remove 'vi.waitFor' and add 'advanceTimersByTimeAsync' (#9364)
Co-authored-by: Jonghyeon Ko <[email protected]>
1 parent 0907dab commit ed8cc23

File tree

1 file changed

+87
-116
lines changed

1 file changed

+87
-116
lines changed

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

Lines changed: 87 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
2-
import { fireEvent } from '@testing-library/react'
2+
import { act, 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'
@@ -69,10 +69,12 @@ describe('useSuspenseQuery', () => {
6969
</React.Suspense>,
7070
)
7171

72-
await vi.waitFor(() => rendered.getByText('data: 1'))
73-
fireEvent.click(rendered.getByLabelText('toggle'))
72+
await act(() => vi.advanceTimersByTimeAsync(11))
73+
rendered.getByText('data: 1')
7474

75-
await vi.waitFor(() => rendered.getByText('data: 2'))
75+
fireEvent.click(rendered.getByLabelText('toggle'))
76+
await act(() => vi.advanceTimersByTimeAsync(11))
77+
rendered.getByText('data: 2')
7678

7779
expect(renders).toBe(6)
7880
expect(states.length).toBe(2)
@@ -112,7 +114,8 @@ describe('useSuspenseQuery', () => {
112114
</React.Suspense>,
113115
)
114116

115-
await vi.waitFor(() => rendered.getByText('data: 1'))
117+
await act(() => vi.advanceTimersByTimeAsync(11))
118+
rendered.getByText('data: 1')
116119

117120
expect(states.length).toBe(1)
118121
expect(states[0]).toMatchObject({
@@ -121,7 +124,8 @@ describe('useSuspenseQuery', () => {
121124
})
122125

123126
fireEvent.click(rendered.getByText('next'))
124-
await vi.waitFor(() => rendered.getByText('data: 2'))
127+
await act(() => vi.advanceTimersByTimeAsync(11))
128+
rendered.getByText('data: 2')
125129

126130
expect(states.length).toBe(2)
127131
expect(states[1]).toMatchObject({
@@ -152,7 +156,8 @@ describe('useSuspenseQuery', () => {
152156
</React.Suspense>,
153157
)
154158

155-
await vi.waitFor(() => rendered.getByText('rendered'))
159+
await act(() => vi.advanceTimersByTimeAsync(11))
160+
rendered.getByText('rendered')
156161

157162
expect(queryFn).toHaveBeenCalledTimes(1)
158163
})
@@ -192,12 +197,13 @@ describe('useSuspenseQuery', () => {
192197
expect(queryCache.find({ queryKey: key })).toBeFalsy()
193198

194199
fireEvent.click(rendered.getByLabelText('toggle'))
195-
await vi.waitFor(() => rendered.getByText('rendered'))
200+
await act(() => vi.advanceTimersByTimeAsync(11))
201+
rendered.getByText('rendered')
196202

197203
expect(queryCache.find({ queryKey: key })?.getObserversCount()).toBe(1)
198204

199205
fireEvent.click(rendered.getByLabelText('toggle'))
200-
206+
await act(() => vi.advanceTimersByTimeAsync(11))
201207
expect(rendered.queryByText('rendered')).toBeNull()
202208
expect(queryCache.find({ queryKey: key })?.getObserversCount()).toBe(0)
203209
})
@@ -257,15 +263,13 @@ describe('useSuspenseQuery', () => {
257263
</QueryErrorResetBoundary>,
258264
)
259265

260-
await vi.waitFor(() => rendered.getByText('Loading...'))
261-
262-
await vi.waitFor(() => rendered.getByText('error boundary'))
263-
264-
await vi.waitFor(() => rendered.getByText('retry'))
265-
266+
rendered.getByText('Loading...')
267+
await act(() => vi.advanceTimersByTimeAsync(71))
268+
rendered.getByText('error boundary')
269+
rendered.getByText('retry')
266270
fireEvent.click(rendered.getByText('retry'))
267-
268-
await vi.waitFor(() => rendered.getByText('rendered'))
271+
await act(() => vi.advanceTimersByTimeAsync(11))
272+
rendered.getByText('rendered')
269273

270274
expect(consoleMock.mock.calls[0]?.[1]).toStrictEqual(
271275
new Error('Suspense Error Bingo'),
@@ -325,27 +329,18 @@ describe('useSuspenseQuery', () => {
325329
</QueryErrorResetBoundary>,
326330
)
327331

328-
await vi.waitFor(() =>
329-
expect(rendered.getByText('Loading...')).toBeInTheDocument(),
330-
)
331-
await vi.waitFor(() =>
332-
expect(rendered.getByText('error boundary')).toBeInTheDocument(),
333-
)
334-
await vi.waitFor(() =>
335-
expect(rendered.getByText('retry')).toBeInTheDocument(),
336-
)
332+
expect(rendered.getByText('Loading...')).toBeInTheDocument()
333+
await act(() => vi.advanceTimersByTimeAsync(71))
334+
expect(rendered.getByText('error boundary')).toBeInTheDocument()
335+
expect(rendered.getByText('retry')).toBeInTheDocument()
337336
fireEvent.click(rendered.getByText('retry'))
338-
await vi.waitFor(() =>
339-
expect(rendered.getByText('error boundary')).toBeInTheDocument(),
340-
)
341-
await vi.waitFor(() =>
342-
expect(rendered.getByText('retry')).toBeInTheDocument(),
343-
)
337+
await act(() => vi.advanceTimersByTimeAsync(71))
338+
expect(rendered.getByText('error boundary')).toBeInTheDocument()
339+
expect(rendered.getByText('retry')).toBeInTheDocument()
344340
succeed = true
345341
fireEvent.click(rendered.getByText('retry'))
346-
await vi.waitFor(() =>
347-
expect(rendered.getByText('rendered')).toBeInTheDocument(),
348-
)
342+
await act(() => vi.advanceTimersByTimeAsync(11))
343+
expect(rendered.getByText('rendered')).toBeInTheDocument()
349344
consoleMock.mockRestore()
350345
})
351346

@@ -380,8 +375,9 @@ describe('useSuspenseQuery', () => {
380375

381376
const rendered = renderWithClient(queryClient, <Page />)
382377

383-
await vi.waitFor(() => rendered.getByText('Loading...'))
384-
await vi.waitFor(() => rendered.getByText('data: 1'))
378+
rendered.getByText('Loading...')
379+
await act(() => vi.advanceTimersByTimeAsync(6))
380+
rendered.getByText('data: 1')
385381

386382
expect(
387383
typeof queryClient.getQueryCache().find({ queryKey: key })?.observers[0]
@@ -426,16 +422,12 @@ describe('useSuspenseQuery', () => {
426422

427423
const rendered = renderWithClient(queryClient, <Page />)
428424

429-
await vi.waitFor(() =>
430-
expect(rendered.getByText('Loading...')).toBeInTheDocument(),
431-
)
432-
await vi.waitFor(() =>
433-
expect(rendered.getByText(`data: ${key1}`)).toBeInTheDocument(),
434-
)
425+
expect(rendered.getByText('Loading...')).toBeInTheDocument()
426+
await act(() => vi.advanceTimersByTimeAsync(101))
427+
expect(rendered.getByText(`data: ${key1}`)).toBeInTheDocument()
435428
fireEvent.click(rendered.getByText('switch'))
436-
await vi.waitFor(() =>
437-
expect(rendered.getByText('Loading...')).toBeInTheDocument(),
438-
)
429+
expect(rendered.getByText('Loading...')).toBeInTheDocument()
430+
await act(() => vi.advanceTimersByTimeAsync(101))
439431
await vi.waitFor(() =>
440432
expect(rendered.getByText(`data: ${key2}`)).toBeInTheDocument(),
441433
)
@@ -492,27 +484,18 @@ describe('useSuspenseQuery', () => {
492484

493485
const rendered = renderWithClient(queryClient, <App />)
494486

495-
await vi.waitFor(() =>
496-
expect(rendered.getByText('Loading...')).toBeInTheDocument(),
497-
)
498-
await vi.waitFor(() =>
499-
expect(rendered.getByText('error boundary')).toBeInTheDocument(),
500-
)
501-
await vi.waitFor(() =>
502-
expect(rendered.getByText('retry')).toBeInTheDocument(),
503-
)
487+
expect(rendered.getByText('Loading...')).toBeInTheDocument()
488+
await act(() => vi.advanceTimersByTimeAsync(71))
489+
expect(rendered.getByText('error boundary')).toBeInTheDocument()
490+
expect(rendered.getByText('retry')).toBeInTheDocument()
504491
fireEvent.click(rendered.getByText('retry'))
505-
await vi.waitFor(() =>
506-
expect(rendered.getByText('error boundary')).toBeInTheDocument(),
507-
)
508-
await vi.waitFor(() =>
509-
expect(rendered.getByText('retry')).toBeInTheDocument(),
510-
)
492+
await act(() => vi.advanceTimersByTimeAsync(71))
493+
expect(rendered.getByText('error boundary')).toBeInTheDocument()
494+
expect(rendered.getByText('retry')).toBeInTheDocument()
511495
succeed = true
512496
fireEvent.click(rendered.getByText('retry'))
513-
await vi.waitFor(() =>
514-
expect(rendered.getByText('rendered')).toBeInTheDocument(),
515-
)
497+
await act(() => vi.advanceTimersByTimeAsync(11))
498+
expect(rendered.getByText('rendered')).toBeInTheDocument()
516499
consoleMock.mockRestore()
517500
})
518501

@@ -552,12 +535,9 @@ describe('useSuspenseQuery', () => {
552535

553536
const rendered = renderWithClient(queryClient, <App />)
554537

555-
await vi.waitFor(() =>
556-
expect(rendered.getByText('Loading...')).toBeInTheDocument(),
557-
)
558-
await vi.waitFor(() =>
559-
expect(rendered.getByText('error boundary')).toBeInTheDocument(),
560-
)
538+
expect(rendered.getByText('Loading...')).toBeInTheDocument()
539+
await act(() => vi.advanceTimersByTimeAsync(71))
540+
expect(rendered.getByText('error boundary')).toBeInTheDocument()
561541
consoleMock.mockRestore()
562542
})
563543

@@ -599,12 +579,9 @@ describe('useSuspenseQuery', () => {
599579

600580
const rendered = renderWithClient(queryClient, <App />)
601581

602-
await vi.waitFor(() =>
603-
expect(rendered.getByText('Loading...')).toBeInTheDocument(),
604-
)
605-
await vi.waitFor(() =>
606-
expect(rendered.getByText('error boundary')).toBeInTheDocument(),
607-
)
582+
expect(rendered.getByText('Loading...')).toBeInTheDocument()
583+
await act(() => vi.advanceTimersByTimeAsync(0))
584+
expect(rendered.getByText('error boundary')).toBeInTheDocument()
608585
consoleMock.mockRestore()
609586
})
610587

@@ -663,16 +640,18 @@ describe('useSuspenseQuery', () => {
663640
const rendered = renderWithClient(queryClient, <App />)
664641

665642
// render suspense fallback (Loading...)
666-
await vi.waitFor(() => rendered.getByText('Loading...'))
643+
rendered.getByText('Loading...')
667644
// resolve promise -> render Page (rendered)
668-
await vi.waitFor(() => rendered.getByText('rendered'))
645+
await act(() => vi.advanceTimersByTimeAsync(11))
646+
rendered.getByText('rendered')
669647

670648
// change query key
671649
succeed = false
672650
// reset query -> and throw error
673651
fireEvent.click(rendered.getByLabelText('fail'))
674652
// render error boundary fallback (error boundary)
675-
await vi.waitFor(() => rendered.getByText('error boundary'))
653+
await act(() => vi.advanceTimersByTimeAsync(11))
654+
rendered.getByText('error boundary')
676655
expect(consoleMock.mock.calls[0]?.[1]).toStrictEqual(
677656
new Error('Suspense Error Bingo'),
678657
)
@@ -734,16 +713,18 @@ describe('useSuspenseQuery', () => {
734713
const rendered = renderWithClient(queryClient, <App />)
735714

736715
// render suspense fallback (Loading...)
737-
await vi.waitFor(() => rendered.getByText('Loading...'))
716+
rendered.getByText('Loading...')
738717
// resolve promise -> render Page (rendered)
739-
await vi.waitFor(() => rendered.getByText('rendered'))
718+
await act(() => vi.advanceTimersByTimeAsync(11))
719+
rendered.getByText('rendered')
740720

741721
// change promise result to error
742722
succeed = false
743723
// change query key
744724
fireEvent.click(rendered.getByLabelText('fail'))
745725
// render error boundary fallback (error boundary)
746-
await vi.waitFor(() => rendered.getByText('error boundary'))
726+
await act(() => vi.advanceTimersByTimeAsync(11))
727+
rendered.getByText('error boundary')
747728
expect(consoleMock.mock.calls[0]?.[1]).toStrictEqual(
748729
new Error('Suspense Error Bingo'),
749730
)
@@ -785,17 +766,13 @@ describe('useSuspenseQuery', () => {
785766
</React.Suspense>,
786767
)
787768

788-
await vi.waitFor(() =>
789-
expect(state).toMatchObject({
790-
data: 1,
791-
status: 'success',
792-
}),
793-
)
794-
769+
await act(() => vi.advanceTimersByTimeAsync(11))
770+
expect(state).toMatchObject({
771+
data: 1,
772+
status: 'success',
773+
})
795774
expect(renders).toBe(3)
796-
await vi.waitFor(() =>
797-
expect(rendered.queryByText('rendered')).not.toBeNull(),
798-
)
775+
expect(rendered.queryByText('rendered')).not.toBeNull()
799776
})
800777

801778
it('should not throw background errors to the error boundary', async () => {
@@ -846,22 +823,18 @@ describe('useSuspenseQuery', () => {
846823
const rendered = renderWithClient(queryClient, <App />)
847824

848825
// render suspense fallback (Loading...)
849-
await vi.waitFor(() =>
850-
expect(rendered.getByText('Loading...')).toBeInTheDocument(),
851-
)
826+
expect(rendered.getByText('Loading...')).toBeInTheDocument()
852827
// resolve promise -> render Page (rendered)
853-
await vi.waitFor(() =>
854-
expect(rendered.getByText('rendered data success')).toBeInTheDocument(),
855-
)
828+
await act(() => vi.advanceTimersByTimeAsync(11))
829+
expect(rendered.getByText('rendered data success')).toBeInTheDocument()
856830

857831
// change promise result to error
858832
succeed = false
859833
// refetch
860834
fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
861835
// we are now in error state but still have data to show
862-
await vi.waitFor(() =>
863-
expect(rendered.getByText('rendered data error')).toBeInTheDocument(),
864-
)
836+
await act(() => vi.advanceTimersByTimeAsync(11))
837+
expect(rendered.getByText('rendered data error')).toBeInTheDocument()
865838

866839
consoleMock.mockRestore()
867840
})
@@ -907,20 +880,15 @@ describe('useSuspenseQuery', () => {
907880
<Page />
908881
</React.Suspense>,
909882
)
910-
await vi.waitFor(() =>
911-
expect(rendered.getByText('loading')).toBeInTheDocument(),
912-
)
913-
await vi.waitFor(() =>
914-
expect(rendered.getByText('data: 1')).toBeInTheDocument(),
915-
)
883+
884+
expect(rendered.getByText('loading')).toBeInTheDocument()
885+
await act(() => vi.advanceTimersByTimeAsync(101))
886+
expect(rendered.getByText('data: 1')).toBeInTheDocument()
916887
fireEvent.click(rendered.getByLabelText('toggle'))
917888

918-
await vi.waitFor(() =>
919-
expect(rendered.getByText('loading')).toBeInTheDocument(),
920-
)
921-
await vi.waitFor(() =>
922-
expect(rendered.getByText('data: 2')).toBeInTheDocument(),
923-
)
889+
expect(rendered.getByText('loading')).toBeInTheDocument()
890+
await act(() => vi.advanceTimersByTimeAsync(101))
891+
expect(rendered.getByText('data: 2')).toBeInTheDocument()
924892
})
925893

926894
it('should log an error when skipToken is passed as queryFn', () => {
@@ -979,9 +947,12 @@ describe('useSuspenseQuery', () => {
979947
</React.Suspense>,
980948
)
981949

982-
await vi.waitFor(() => rendered.getByText('count: 1'))
983-
await vi.waitFor(() => rendered.getByText('count: 2'))
984-
await vi.waitFor(() => rendered.getByText('count: 3'))
950+
await act(() => vi.advanceTimersByTimeAsync(2))
951+
rendered.getByText('count: 1')
952+
await act(() => vi.advanceTimersByTimeAsync(12))
953+
rendered.getByText('count: 2')
954+
await act(() => vi.advanceTimersByTimeAsync(12))
955+
rendered.getByText('count: 3')
985956

986957
expect(count).toBeGreaterThanOrEqual(3)
987958
})

0 commit comments

Comments
 (0)