Skip to content

Commit 6bc45b8

Browse files
sukvvonmanudeli
sukvvon
and
manudeli
authored
test(react-query/useSuspenseQueries): simplify 'queryFn' and add 'expect' for 'loading' text (#9477)
Co-authored-by: Jonghyeon Ko <manudeli.ko@gmail.com>
1 parent 039d214 commit 6bc45b8

1 file changed

Lines changed: 80 additions & 66 deletions

File tree

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

Lines changed: 80 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,7 @@ const QUERY_DURATION = 1000
2727

2828
const createQuery: (id: number) => NumberQueryOptions = (id) => ({
2929
queryKey: [id],
30-
queryFn: async () => {
31-
await sleep(QUERY_DURATION)
32-
return id
33-
},
30+
queryFn: () => sleep(QUERY_DURATION).then(() => id),
3431
})
3532
const resolveQueries = () => vi.advanceTimersByTimeAsync(QUERY_DURATION)
3633

@@ -59,7 +56,7 @@ describe('useSuspenseQueries', () => {
5956
onSuspend()
6057
}, [])
6158

62-
return null
59+
return <div>loading</div>
6360
}
6461

6562
const withSuspenseWrapper = <T extends object>(Component: React.FC<T>) => {
@@ -158,10 +155,7 @@ describe('useSuspenseQueries', () => {
158155
const data = useSuspenseQueries({
159156
queries: [1, 2, 3].map((value) => ({
160157
queryKey: [...key, { value }],
161-
queryFn: async () => {
162-
await sleep(value * 10)
163-
return { value: value * 10 }
164-
},
158+
queryFn: () => sleep(value * 10).then(() => ({ value: value * 10 })),
165159
})),
166160
combine: (result) => {
167161
spy(result)
@@ -174,15 +168,18 @@ describe('useSuspenseQueries', () => {
174168

175169
const rendered = renderWithClient(
176170
queryClient,
177-
<React.Suspense fallback="loading...">
171+
<React.Suspense fallback="loading">
178172
<Page />
179173
</React.Suspense>,
180174
)
181175

182-
expect(rendered.getByText('loading...')).toBeInTheDocument()
176+
expect(rendered.getByText('loading')).toBeInTheDocument()
177+
183178
expect(spy).not.toHaveBeenCalled()
179+
184180
await act(() => vi.advanceTimersByTimeAsync(30))
185181
expect(rendered.getByText('data')).toBeInTheDocument()
182+
186183
expect(spy).toHaveBeenCalled()
187184
})
188185
})
@@ -211,22 +208,23 @@ describe('useSuspenseQueries 2', () => {
211208
queries: [
212209
{
213210
queryKey: key1,
214-
queryFn: async () => {
215-
results.push('1')
216-
await sleep(10)
217-
return '1'
218-
},
211+
queryFn: () =>
212+
sleep(10).then(() => {
213+
results.push('1')
214+
return '1'
215+
}),
219216
},
220217
{
221218
queryKey: key2,
222-
queryFn: async () => {
223-
results.push('2')
224-
await sleep(20)
225-
return '2'
226-
},
219+
queryFn: () =>
220+
sleep(20).then(() => {
221+
results.push('2')
222+
return '2'
223+
}),
227224
},
228225
],
229226
})
227+
230228
return (
231229
<div>
232230
<h1>data: {result.map((item) => item.data ?? 'null').join(',')}</h1>
@@ -244,7 +242,8 @@ describe('useSuspenseQueries 2', () => {
244242
expect(rendered.getByText('loading')).toBeInTheDocument()
245243
await act(() => vi.advanceTimersByTimeAsync(20))
246244
expect(rendered.getByText('data: 1,2')).toBeInTheDocument()
247-
expect(results).toEqual(['1', '2', 'loading'])
245+
246+
expect(results).toEqual(['loading', '1', '2'])
248247
})
249248

250249
it("shouldn't unmount before all promises fetched", async () => {
@@ -264,24 +263,25 @@ describe('useSuspenseQueries 2', () => {
264263
queries: [
265264
{
266265
queryKey: key1,
267-
queryFn: async () => {
268-
refs.push(ref.current)
269-
results.push('1')
270-
await sleep(10)
271-
return '1'
272-
},
266+
queryFn: () =>
267+
sleep(10).then(() => {
268+
refs.push(ref.current)
269+
results.push('1')
270+
return '1'
271+
}),
273272
},
274273
{
275274
queryKey: key2,
276-
queryFn: async () => {
277-
refs.push(ref.current)
278-
results.push('2')
279-
await sleep(20)
280-
return '2'
281-
},
275+
queryFn: () =>
276+
sleep(20).then(() => {
277+
refs.push(ref.current)
278+
results.push('2')
279+
return '2'
280+
}),
282281
},
283282
],
284283
})
284+
285285
return (
286286
<div>
287287
<h1>data: {result.map((item) => item.data ?? 'null').join(',')}</h1>
@@ -297,9 +297,11 @@ describe('useSuspenseQueries 2', () => {
297297
)
298298

299299
expect(rendered.getByText('loading')).toBeInTheDocument()
300-
expect(refs.length).toBe(2)
300+
301301
await act(() => vi.advanceTimersByTimeAsync(20))
302302
expect(rendered.getByText('data: 1,2')).toBeInTheDocument()
303+
304+
expect(refs.length).toBe(2)
303305
expect(refs[0]).toBe(refs[1])
304306
})
305307

@@ -348,6 +350,7 @@ describe('useSuspenseQueries 2', () => {
348350
document.dispatchEvent(new CustomEvent('online'))
349351

350352
fireEvent.click(rendered.getByText('fetch'))
353+
expect(rendered.getByText('loading')).toBeInTheDocument()
351354
await act(() => vi.advanceTimersByTimeAsync(10))
352355
// query should resume
353356
expect(rendered.getByText('Data 1')).toBeInTheDocument()
@@ -374,30 +377,33 @@ describe('useSuspenseQueries 2', () => {
374377
return (
375378
<div>
376379
<button onClick={() => setFail(true)}>trigger fail</button>
377-
378-
<div>rendered: {String(data)}</div>
380+
<div>rendered: {data}</div>
379381
</div>
380382
)
381383
}
382384

383385
const rendered = renderWithClient(
384386
queryClient,
385387
<ErrorBoundary fallbackRender={() => <div>error boundary</div>}>
386-
<React.Suspense fallback={'Loading...'}>
388+
<React.Suspense fallback="loading">
387389
<Page />
388390
</React.Suspense>
389391
</ErrorBoundary>,
390392
)
391393

392-
expect(rendered.getByText('Loading...')).toBeInTheDocument()
394+
expect(rendered.getByText('loading')).toBeInTheDocument()
393395
await act(() => vi.advanceTimersByTimeAsync(10))
394396
expect(rendered.getByText('rendered: data')).toBeInTheDocument()
397+
395398
fireEvent.click(rendered.getByText('trigger fail'))
399+
expect(rendered.getByText('loading')).toBeInTheDocument()
396400
await act(() => vi.advanceTimersByTimeAsync(10))
397401
expect(rendered.getByText('error boundary')).toBeInTheDocument()
402+
398403
expect(consoleMock.mock.calls[0]?.[1]).toStrictEqual(
399404
new Error('Suspense Error Bingo'),
400405
)
406+
401407
consoleMock.mockRestore()
402408
})
403409

@@ -409,7 +415,7 @@ describe('useSuspenseQueries 2', () => {
409415
const [isPending, startTransition] = React.useTransition()
410416
const { data } = useSuspenseQuery({
411417
queryKey: [key, count],
412-
queryFn: async () => sleep(10).then(() => 'data' + count),
418+
queryFn: () => sleep(10).then(() => 'data' + count),
413419
})
414420

415421
return (
@@ -418,23 +424,24 @@ describe('useSuspenseQueries 2', () => {
418424
inc
419425
</button>
420426

421-
<div>{isPending ? 'Pending...' : String(data)}</div>
427+
<div>{isPending ? 'pending' : data}</div>
422428
</div>
423429
)
424430
}
425431

426432
const rendered = renderWithClient(
427433
queryClient,
428-
<React.Suspense fallback={'Loading...'}>
434+
<React.Suspense fallback="loading">
429435
<Page />
430436
</React.Suspense>,
431437
)
432438

433-
expect(rendered.getByText('Loading...')).toBeInTheDocument()
439+
expect(rendered.getByText('loading')).toBeInTheDocument()
434440
await act(() => vi.advanceTimersByTimeAsync(10))
435441
expect(rendered.getByText('data0')).toBeInTheDocument()
442+
436443
fireEvent.click(rendered.getByText('inc'))
437-
expect(rendered.getByText('Pending...')).toBeInTheDocument()
444+
expect(rendered.getByText('pending')).toBeInTheDocument()
438445
await act(() => vi.advanceTimersByTimeAsync(10))
439446
expect(rendered.getByText('data1')).toBeInTheDocument()
440447
})
@@ -453,7 +460,7 @@ describe('useSuspenseQueries 2', () => {
453460
>
454461
inc
455462
</button>
456-
<React.Suspense fallback={'Loading...'}>
463+
<React.Suspense fallback="loading">
457464
<Page count={count} />
458465
</React.Suspense>
459466
</div>
@@ -463,11 +470,11 @@ describe('useSuspenseQueries 2', () => {
463470
function Page({ count }: { count: number }) {
464471
const { data } = useSuspenseQuery({
465472
queryKey: [key, count],
466-
queryFn: async () => {
467-
queryFnCount++
468-
await sleep(10)
469-
return 'data' + count
470-
},
473+
queryFn: () =>
474+
sleep(10).then(() => {
475+
queryFnCount++
476+
return 'data' + count
477+
}),
471478
})
472479

473480
return (
@@ -483,12 +490,14 @@ describe('useSuspenseQueries 2', () => {
483490
<App />,
484491
)
485492

486-
expect(rendered.getByText('Loading...')).toBeInTheDocument()
493+
expect(rendered.getByText('loading')).toBeInTheDocument()
487494
await act(() => vi.advanceTimersByTimeAsync(10))
488495
expect(rendered.getByText('data0')).toBeInTheDocument()
496+
489497
fireEvent.click(rendered.getByText('inc'))
490498
await act(() => vi.advanceTimersByTimeAsync(10))
491499
expect(rendered.getByText('data1')).toBeInTheDocument()
500+
492501
expect(queryFnCount).toBe(2)
493502
})
494503

@@ -507,32 +516,32 @@ describe('useSuspenseQueries 2', () => {
507516
const [isPending, startTransition] = React.useTransition()
508517
const { data } = useSuspenseQuery({
509518
queryKey: [key, count],
510-
queryFn: async () => sleep(10).then(() => 'data' + count),
519+
queryFn: () => sleep(10).then(() => 'data' + count),
511520
})
512521

513522
return (
514523
<div>
515524
<button onClick={() => startTransition(() => setCount(count + 1))}>
516525
inc
517526
</button>
518-
519-
<div>{isPending ? 'Pending...' : String(data)}</div>
527+
<div>{isPending ? 'pending' : data}</div>
520528
</div>
521529
)
522530
}
523531

524532
const rendered = renderWithClient(
525533
queryClientWithPlaceholder,
526-
<React.Suspense fallback={'Loading...'}>
534+
<React.Suspense fallback="loading">
527535
<Page />
528536
</React.Suspense>,
529537
)
530538

531-
expect(rendered.getByText('Loading...')).toBeInTheDocument()
539+
expect(rendered.getByText('loading')).toBeInTheDocument()
532540
await act(() => vi.advanceTimersByTimeAsync(10))
533541
expect(rendered.getByText('data0')).toBeInTheDocument()
542+
534543
fireEvent.click(rendered.getByText('inc'))
535-
expect(rendered.getByText('Pending...')).toBeInTheDocument()
544+
expect(rendered.getByText('pending')).toBeInTheDocument()
536545
await act(() => vi.advanceTimersByTimeAsync(10))
537546
expect(rendered.getByText('data1')).toBeInTheDocument()
538547
})
@@ -547,11 +556,11 @@ describe('useSuspenseQueries 2', () => {
547556
function Page() {
548557
useSuspenseQuery({
549558
queryKey: key,
550-
queryFn: async () => {
551-
count++
552-
await sleep(10)
553-
return Promise.reject(new Error('Query failed'))
554-
},
559+
queryFn: () =>
560+
sleep(10).then(() => {
561+
count++
562+
throw new Error('Query failed')
563+
}),
555564
gcTime: 0,
556565
retry: false,
557566
})
@@ -575,9 +584,12 @@ describe('useSuspenseQueries 2', () => {
575584

576585
const rendered = renderWithClient(queryClient, <App />)
577586

587+
expect(rendered.getByText('loading')).toBeInTheDocument()
578588
await act(() => vi.advanceTimersByTimeAsync(10))
579589
expect(rendered.getByText('There was an error!')).toBeInTheDocument()
590+
580591
expect(count).toBe(1)
592+
581593
consoleMock.mockRestore()
582594
})
583595

@@ -604,7 +616,7 @@ describe('useSuspenseQueries 2', () => {
604616
function Component() {
605617
const { data } = useSuspenseQuery({
606618
queryKey: key,
607-
queryFn: async () => sleep(3000).then(() => 'data'),
619+
queryFn: () => sleep(3000).then(() => 'data'),
608620
gcTime: 1000,
609621
})
610622

@@ -617,6 +629,7 @@ describe('useSuspenseQueries 2', () => {
617629

618630
function App() {
619631
const [show, setShow] = React.useState(true)
632+
620633
return (
621634
<div>
622635
{show ? <Page /> : <Page2 />}
@@ -628,6 +641,7 @@ describe('useSuspenseQueries 2', () => {
628641
const rendered = renderWithClient(queryClient, <App />)
629642

630643
expect(rendered.getByText('loading')).toBeInTheDocument()
644+
631645
fireEvent.click(rendered.getByText('hide'))
632646
expect(rendered.getByText('page2')).toBeInTheDocument()
633647
// wait for query to be resolved
@@ -661,7 +675,7 @@ describe('useSuspenseQueries 2', () => {
661675

662676
function App() {
663677
return (
664-
<React.Suspense fallback="Loading...">
678+
<React.Suspense fallback="loading">
665679
<Page />
666680
</React.Suspense>
667681
)
@@ -699,7 +713,7 @@ describe('useSuspenseQueries 2', () => {
699713

700714
renderWithClient(
701715
queryClient,
702-
<React.Suspense fallback="Loading...">
716+
<React.Suspense fallback="loading">
703717
<Page />
704718
</React.Suspense>,
705719
)
@@ -735,7 +749,7 @@ describe('useSuspenseQueries 2', () => {
735749

736750
renderWithClient(
737751
queryClient,
738-
<React.Suspense fallback="Loading...">
752+
<React.Suspense fallback="loading">
739753
<Page />
740754
</React.Suspense>,
741755
)

0 commit comments

Comments
 (0)