Skip to content

Commit fd7c655

Browse files
sukvvonmanudeli
sukvvon
and
manudeli
authored
test(react-query/useQueries): remove 'waitFor' and add 'advanceTimersByTimeAsync' (#9367)
Co-authored-by: Jonghyeon Ko <manudeli.ko@gmail.com>
1 parent f6085d0 commit fd7c655

File tree

1 file changed

+92
-89
lines changed

1 file changed

+92
-89
lines changed

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

Lines changed: 92 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
1-
import { describe, expect, expectTypeOf, it, vi } from 'vitest'
2-
import { fireEvent, render, waitFor } from '@testing-library/react'
1+
import {
2+
afterEach,
3+
beforeEach,
4+
describe,
5+
expect,
6+
expectTypeOf,
7+
it,
8+
vi,
9+
} from 'vitest'
10+
import { fireEvent, render } from '@testing-library/react'
311
import * as React from 'react'
412
import { ErrorBoundary } from 'react-error-boundary'
513
import { queryKey, sleep } from '@tanstack/query-test-utils'
@@ -21,6 +29,14 @@ import type {
2129
import type { QueryFunctionContext } from '@tanstack/query-core'
2230

2331
describe('useQueries', () => {
32+
beforeEach(() => {
33+
vi.useFakeTimers()
34+
})
35+
36+
afterEach(() => {
37+
vi.useRealTimers()
38+
})
39+
2440
const queryCache = new QueryCache()
2541
const queryClient = new QueryClient({ queryCache })
2642

@@ -62,7 +78,8 @@ describe('useQueries', () => {
6278

6379
const rendered = renderWithClient(queryClient, <Page />)
6480

65-
await waitFor(() => rendered.getByText('data1: 1, data2: 2'))
81+
await vi.advanceTimersByTimeAsync(201)
82+
rendered.getByText('data1: 1, data2: 2')
6683

6784
expect(results.length).toBe(3)
6885
expect(results[0]).toMatchObject([{ data: undefined }, { data: undefined }])
@@ -100,15 +117,17 @@ describe('useQueries', () => {
100117

101118
const rendered = renderWithClient(queryClient, <Page />)
102119

103-
await waitFor(() => rendered.getByText('data: 1'))
120+
await vi.advanceTimersByTimeAsync(11)
121+
rendered.getByText('data: 1')
104122

105123
expect(results.length).toBe(2)
106124
expect(results[0]).toMatchObject([{ data: undefined }])
107125
expect(results[1]).toMatchObject([{ data: 1 }])
108126

109127
fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
110128

111-
await waitFor(() => rendered.getByText('data: 2'))
129+
await vi.advanceTimersByTimeAsync(11)
130+
rendered.getByText('data: 2')
112131

113132
// only one render for data update, no render for isFetching transition
114133
expect(results.length).toBe(3)
@@ -842,12 +861,9 @@ describe('useQueries', () => {
842861
</ErrorBoundary>,
843862
)
844863

845-
await waitFor(() =>
846-
expect(rendered.getByText('error boundary')).toBeInTheDocument(),
847-
)
848-
await waitFor(() =>
849-
expect(rendered.getByText('single query error')).toBeInTheDocument(),
850-
)
864+
await vi.advanceTimersByTimeAsync(0)
865+
expect(rendered.getByText('error boundary')).toBeInTheDocument()
866+
expect(rendered.getByText('single query error')).toBeInTheDocument()
851867
consoleMock.mockRestore()
852868
})
853869

@@ -913,12 +929,9 @@ describe('useQueries', () => {
913929
</ErrorBoundary>,
914930
)
915931

916-
await waitFor(() =>
917-
expect(rendered.getByText('error boundary')).toBeInTheDocument(),
918-
)
919-
await waitFor(() =>
920-
expect(rendered.getByText('single query error')).toBeInTheDocument(),
921-
)
932+
await vi.advanceTimersByTimeAsync(0)
933+
expect(rendered.getByText('error boundary')).toBeInTheDocument()
934+
expect(rendered.getByText('single query error')).toBeInTheDocument()
922935
consoleMock.mockRestore()
923936
})
924937

@@ -946,9 +959,8 @@ describe('useQueries', () => {
946959

947960
const rendered = render(<Page></Page>)
948961

949-
await waitFor(() =>
950-
expect(rendered.getByText('data: custom client')).toBeInTheDocument(),
951-
)
962+
await vi.advanceTimersByTimeAsync(0)
963+
expect(rendered.getByText('data: custom client')).toBeInTheDocument()
952964
})
953965

954966
it('should combine queries', async () => {
@@ -989,11 +1001,10 @@ describe('useQueries', () => {
9891001

9901002
const rendered = render(<Page />)
9911003

992-
await waitFor(() =>
993-
expect(
994-
rendered.getByText('data: true first result,second result'),
995-
).toBeInTheDocument(),
996-
)
1004+
await vi.advanceTimersByTimeAsync(0)
1005+
expect(
1006+
rendered.getByText('data: true first result,second result'),
1007+
).toBeInTheDocument()
9971008
})
9981009

9991010
it('should not return new instances when called without queries', async () => {
@@ -1035,14 +1046,16 @@ describe('useQueries', () => {
10351046

10361047
const rendered = renderWithClient(queryClient, <Page />)
10371048

1038-
await waitFor(() => rendered.getByText('data: {"empty":"object"}'))
1039-
await waitFor(() => rendered.getByText('count: 0'))
1049+
await vi.advanceTimersByTimeAsync(0)
1050+
rendered.getByText('data: {"empty":"object"}')
1051+
rendered.getByText('count: 0')
10401052

10411053
expect(resultChanged).toBe(1)
10421054

10431055
fireEvent.click(rendered.getByRole('button', { name: /inc/i }))
10441056

1045-
await waitFor(() => rendered.getByText('count: 1'))
1057+
await vi.advanceTimersByTimeAsync(0)
1058+
rendered.getByText('count: 1')
10461059
// there should be no further effect calls because the returned object is structurally shared
10471060
expect(resultChanged).toBe(1)
10481061
})
@@ -1064,7 +1077,7 @@ describe('useQueries', () => {
10641077

10651078
renderWithClient(queryClient, <Page />)
10661079

1067-
await sleep(10)
1080+
await vi.advanceTimersByTimeAsync(10)
10681081

10691082
expect(renderCount).toBe(1)
10701083
})
@@ -1102,13 +1115,13 @@ describe('useQueries', () => {
11021115
}
11031116

11041117
const rendered = renderWithClient(queryClient, <Page />)
1105-
await waitFor(() =>
1106-
expect(
1107-
rendered.getByText(
1108-
'data: {"data":{"query1":"query1","query2":"query2"}}',
1109-
),
1110-
).toBeInTheDocument(),
1111-
)
1118+
1119+
await vi.advanceTimersByTimeAsync(21)
1120+
expect(
1121+
rendered.getByText(
1122+
'data: {"data":{"query1":"query1","query2":"query2"}}',
1123+
),
1124+
).toBeInTheDocument()
11121125
})
11131126

11141127
it('should track property access through combine function', async () => {
@@ -1163,11 +1176,10 @@ describe('useQueries', () => {
11631176

11641177
const rendered = render(<Page />)
11651178

1166-
await waitFor(() =>
1167-
expect(
1168-
rendered.getByText('data: true first result 0,second result 0'),
1169-
).toBeInTheDocument(),
1170-
)
1179+
await vi.advanceTimersByTimeAsync(51)
1180+
expect(
1181+
rendered.getByText('data: true first result 0,second result 0'),
1182+
).toBeInTheDocument()
11711183

11721184
expect(results.length).toBe(3)
11731185

@@ -1193,9 +1205,8 @@ describe('useQueries', () => {
11931205

11941206
fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
11951207

1196-
await waitFor(() =>
1197-
rendered.getByText('data: true first result 1,second result 1'),
1198-
)
1208+
await vi.advanceTimersByTimeAsync(51)
1209+
rendered.getByText('data: true first result 1,second result 1')
11991210

12001211
const length = results.length
12011212

@@ -1209,7 +1220,7 @@ describe('useQueries', () => {
12091220

12101221
fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
12111222

1212-
await sleep(100)
1223+
await vi.advanceTimersByTimeAsync(100)
12131224
// no further re-render because data didn't change
12141225
expect(results.length).toBe(length)
12151226
})
@@ -1259,15 +1270,10 @@ describe('useQueries', () => {
12591270

12601271
const rendered = renderWithClient(queryClient, <Page />)
12611272

1262-
await waitFor(() =>
1263-
expect(
1264-
rendered.getByText('Loading Status: Loading...'),
1265-
).toBeInTheDocument(),
1266-
)
1273+
expect(rendered.getByText('Loading Status: Loading...')).toBeInTheDocument()
12671274

1268-
await waitFor(() =>
1269-
expect(rendered.getByText('Loading Status: Loaded')).toBeInTheDocument(),
1270-
)
1275+
await vi.advanceTimersByTimeAsync(11)
1276+
expect(rendered.getByText('Loading Status: Loaded')).toBeInTheDocument()
12711277
})
12721278

12731279
it('should not have stale closures with combine (#6648)', async () => {
@@ -1305,13 +1311,13 @@ describe('useQueries', () => {
13051311

13061312
const rendered = render(<Page />)
13071313

1308-
await waitFor(() => rendered.getByText('data: 0 result'))
1314+
await vi.advanceTimersByTimeAsync(0)
1315+
rendered.getByText('data: 0 result')
13091316

13101317
fireEvent.click(rendered.getByRole('button', { name: /inc/i }))
13111318

1312-
await waitFor(() =>
1313-
expect(rendered.getByText('data: 1 result')).toBeInTheDocument(),
1314-
)
1319+
await vi.advanceTimersByTimeAsync(0)
1320+
expect(rendered.getByText('data: 1 result')).toBeInTheDocument()
13151321
})
13161322

13171323
it('should optimize combine if it is a stable reference', async () => {
@@ -1367,14 +1373,15 @@ describe('useQueries', () => {
13671373

13681374
const rendered = render(<Page />)
13691375

1370-
await waitFor(() =>
1371-
rendered.getByText('data: true first result:0,second result:0'),
1372-
)
1376+
await vi.advanceTimersByTimeAsync(21)
1377+
rendered.getByText('data: true first result:0,second result:0')
13731378

13741379
// both pending, one pending, both resolved
13751380
expect(spy).toHaveBeenCalledTimes(3)
13761381

1377-
await client.refetchQueries()
1382+
client.refetchQueries()
1383+
1384+
await vi.advanceTimersByTimeAsync(21)
13781385
// no increase because result hasn't changed
13791386
expect(spy).toHaveBeenCalledTimes(3)
13801387

@@ -1385,11 +1392,10 @@ describe('useQueries', () => {
13851392

13861393
value = 1
13871394

1388-
await client.refetchQueries()
1395+
client.refetchQueries()
13891396

1390-
await waitFor(() =>
1391-
rendered.getByText('data: true first result:1,second result:1'),
1392-
)
1397+
await vi.advanceTimersByTimeAsync(21)
1398+
rendered.getByText('data: true first result:1,second result:1')
13931399

13941400
// two value changes = two re-renders
13951401
expect(spy).toHaveBeenCalledTimes(5)
@@ -1451,9 +1457,8 @@ describe('useQueries', () => {
14511457

14521458
const rendered = render(<Page />)
14531459

1454-
await waitFor(() =>
1455-
rendered.getByText('data: 0 first result,second result'),
1456-
)
1460+
await vi.advanceTimersByTimeAsync(21)
1461+
rendered.getByText('data: 0 first result,second result')
14571462

14581463
// both pending, one pending, both resolved
14591464
expect(spy).toHaveBeenCalledTimes(3)
@@ -1510,11 +1515,10 @@ describe('useQueries', () => {
15101515

15111516
const rendered = render(<Page />)
15121517

1513-
await waitFor(() => rendered.getByText('data: foo'))
1518+
await vi.advanceTimersByTimeAsync(21)
1519+
rendered.getByText('data: foo')
15141520

1515-
await waitFor(() =>
1516-
expect(queryFns).toEqual(['first result', 'second result']),
1517-
)
1521+
expect(queryFns).toEqual(['first result', 'second result'])
15181522

15191523
expect(renders).toBe(1)
15201524
})
@@ -1574,8 +1578,10 @@ describe('useQueries', () => {
15741578

15751579
const rendered = render(<Page />)
15761580

1577-
await waitFor(() => rendered.getByText('data: pending'))
1578-
await waitFor(() => rendered.getByText('data: foo'))
1581+
await vi.advanceTimersByTimeAsync(0)
1582+
rendered.getByText('data: pending')
1583+
await vi.advanceTimersByTimeAsync(21)
1584+
rendered.getByText('data: foo')
15791585

15801586
// one with pending, one with foo
15811587
expect(renders).toBe(2)
@@ -1640,23 +1646,20 @@ describe('useQueries', () => {
16401646

16411647
const rendered = render(<Page />)
16421648

1643-
await waitFor(() =>
1644-
expect(rendered.getByText('data: pending')).toBeInTheDocument(),
1645-
)
1646-
await waitFor(() =>
1647-
expect(
1648-
rendered.getByText('data: first result, second result, third result'),
1649-
).toBeInTheDocument(),
1650-
)
1649+
await vi.advanceTimersByTimeAsync(0)
1650+
expect(rendered.getByText('data: pending')).toBeInTheDocument()
1651+
await vi.advanceTimersByTimeAsync(21)
1652+
expect(
1653+
rendered.getByText('data: first result, second result, third result'),
1654+
).toBeInTheDocument()
16511655

16521656
fireEvent.click(rendered.getByRole('button', { name: /update/i }))
16531657

1654-
await waitFor(() =>
1655-
expect(
1656-
rendered.getByText(
1657-
'data: first result updated, second result, third result',
1658-
),
1659-
).toBeInTheDocument(),
1660-
)
1658+
await vi.advanceTimersByTimeAsync(21)
1659+
expect(
1660+
rendered.getByText(
1661+
'data: first result updated, second result, third result',
1662+
),
1663+
).toBeInTheDocument()
16611664
})
16621665
})

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy