Skip to content

Commit 22509e6

Browse files
sukvvonsukvvon
committed
test(solid-query-persist-client/PersistQueryClientProvider): switch to fake timers, replace 'waitFor' with 'advanceTimersByTimeAsync', and use 'sleep().then()' pattern
1 parent ae47807 commit 22509e6

File tree

1 file changed

+85
-71
lines changed

1 file changed

+85
-71
lines changed

‎packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx‎

Lines changed: 85 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { describe, expect, test, vi } from 'vitest'
2-
import { render, screen, waitFor } from '@solidjs/testing-library'
1+
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
2+
import { render, screen } from '@solidjs/testing-library'
33
import { QueryClient, useQueries, useQuery } from '@tanstack/solid-query'
44
import { persistQueryClientSave } from '@tanstack/query-persist-client-core'
55
import { createEffect, createSignal, onMount } from 'solid-js'
@@ -18,8 +18,7 @@ const createMockPersister = (): Persister => {
1818
storedState = persistClient
1919
},
2020
async restoreClient() {
21-
await sleep(10)
22-
return storedState
21+
return sleep(10).then(() => storedState)
2322
},
2423
removeClient() {
2524
storedState = undefined
@@ -47,6 +46,14 @@ const createMockErrorPersister = (
4746
}
4847

4948
describe('PersistQueryClientProvider', () => {
49+
beforeEach(() => {
50+
vi.useFakeTimers()
51+
})
52+
53+
afterEach(() => {
54+
vi.useRealTimers()
55+
})
56+
5057
test('restores cache from persister', async () => {
5158
const key = queryKey()
5259
const states: Array<{
@@ -56,24 +63,23 @@ describe('PersistQueryClientProvider', () => {
5663
}> = []
5764

5865
const queryClient = new QueryClient()
59-
await queryClient.prefetchQuery({
66+
queryClient.prefetchQuery({
6067
queryKey: key,
61-
queryFn: () => Promise.resolve('hydrated'),
68+
queryFn: () => sleep(10).then(() => 'hydrated'),
6269
})
70+
await vi.advanceTimersByTimeAsync(10)
6371

6472
const persister = createMockPersister()
6573

66-
await persistQueryClientSave({ queryClient, persister })
74+
persistQueryClientSave({ queryClient, persister })
75+
await vi.advanceTimersByTimeAsync(0)
6776

6877
queryClient.clear()
6978

7079
function Page() {
7180
const state = useQuery(() => ({
7281
queryKey: key,
73-
queryFn: async () => {
74-
await sleep(10)
75-
return 'fetched'
76-
},
82+
queryFn: () => sleep(10).then(() => 'fetched'),
7783
}))
7884
createEffect(() =>
7985
states.push({
@@ -100,9 +106,11 @@ describe('PersistQueryClientProvider', () => {
100106
</PersistQueryClientProvider>
101107
))
102108

103-
await waitFor(() => screen.getByText('fetchStatus: idle'))
104-
await waitFor(() => screen.getByText('hydrated'))
105-
await waitFor(() => screen.getByText('fetched'))
109+
expect(screen.getByText('fetchStatus: idle')).toBeInTheDocument()
110+
await vi.advanceTimersByTimeAsync(10)
111+
expect(screen.getByText('hydrated')).toBeInTheDocument()
112+
await vi.advanceTimersByTimeAsync(10)
113+
expect(screen.getByText('fetched')).toBeInTheDocument()
106114

107115
expect(states).toHaveLength(3)
108116

@@ -134,14 +142,16 @@ describe('PersistQueryClientProvider', () => {
134142
}> = []
135143

136144
const queryClient = new QueryClient()
137-
await queryClient.prefetchQuery({
145+
queryClient.prefetchQuery({
138146
queryKey: key,
139-
queryFn: () => Promise.resolve('hydrated'),
147+
queryFn: () => sleep(10).then(() => 'hydrated'),
140148
})
149+
await vi.advanceTimersByTimeAsync(10)
141150

142151
const persister = createMockPersister()
143152

144-
await persistQueryClientSave({ queryClient, persister })
153+
persistQueryClientSave({ queryClient, persister })
154+
await vi.advanceTimersByTimeAsync(0)
145155

146156
queryClient.clear()
147157

@@ -150,12 +160,9 @@ describe('PersistQueryClientProvider', () => {
150160
queries: [
151161
{
152162
queryKey: key,
153-
queryFn: async (): Promise<string> => {
154-
await sleep(10)
155-
return 'fetched'
156-
},
163+
queryFn: () => sleep(10).then(() => 'fetched'),
157164
},
158-
] as const,
165+
],
159166
}))
160167

161168
createEffect(() =>
@@ -183,9 +190,11 @@ describe('PersistQueryClientProvider', () => {
183190
</PersistQueryClientProvider>
184191
))
185192

186-
await waitFor(() => screen.getByText('fetchStatus: idle'))
187-
await waitFor(() => screen.getByText('hydrated'))
188-
await waitFor(() => screen.getByText('fetched'))
193+
expect(screen.getByText('fetchStatus: idle')).toBeInTheDocument()
194+
await vi.advanceTimersByTimeAsync(10)
195+
expect(screen.getByText('hydrated')).toBeInTheDocument()
196+
await vi.advanceTimersByTimeAsync(10)
197+
expect(screen.getByText('fetched')).toBeInTheDocument()
189198

190199
expect(states).toHaveLength(3)
191200

@@ -217,24 +226,23 @@ describe('PersistQueryClientProvider', () => {
217226
}> = []
218227

219228
const queryClient = new QueryClient()
220-
await queryClient.prefetchQuery({
229+
queryClient.prefetchQuery({
221230
queryKey: key,
222-
queryFn: () => Promise.resolve('hydrated'),
231+
queryFn: () => sleep(10).then(() => 'hydrated'),
223232
})
233+
await vi.advanceTimersByTimeAsync(10)
224234

225235
const persister = createMockPersister()
226236

227-
await persistQueryClientSave({ queryClient, persister })
237+
persistQueryClientSave({ queryClient, persister })
238+
await vi.advanceTimersByTimeAsync(0)
228239

229240
queryClient.clear()
230241

231242
function Page() {
232243
const state = useQuery(() => ({
233244
queryKey: key,
234-
queryFn: async () => {
235-
await sleep(10)
236-
return 'fetched'
237-
},
245+
queryFn: () => sleep(10).then(() => 'fetched'),
238246
initialData: 'initial',
239247
// make sure that initial data is older than the hydration data
240248
// otherwise initialData would be newer and takes precedence
@@ -266,9 +274,11 @@ describe('PersistQueryClientProvider', () => {
266274
</PersistQueryClientProvider>
267275
))
268276

269-
await waitFor(() => screen.getByText('initial'))
270-
await waitFor(() => screen.getByText('hydrated'))
271-
await waitFor(() => screen.getByText('fetched'))
277+
expect(screen.getByText('initial')).toBeInTheDocument()
278+
await vi.advanceTimersByTimeAsync(10)
279+
expect(screen.getByText('hydrated')).toBeInTheDocument()
280+
await vi.advanceTimersByTimeAsync(10)
281+
expect(screen.getByText('fetched')).toBeInTheDocument()
272282

273283
expect(states).toHaveLength(3)
274284

@@ -300,14 +310,16 @@ describe('PersistQueryClientProvider', () => {
300310
}> = []
301311

302312
const queryClient = new QueryClient()
303-
await queryClient.prefetchQuery({
313+
queryClient.prefetchQuery({
304314
queryKey: key,
305-
queryFn: () => Promise.resolve('hydrated'),
315+
queryFn: () => sleep(10).then(() => 'hydrated'),
306316
})
317+
await vi.advanceTimersByTimeAsync(10)
307318

308319
const persister = createMockPersister()
309320

310-
await persistQueryClientSave({ queryClient, persister })
321+
persistQueryClientSave({ queryClient, persister })
322+
await vi.advanceTimersByTimeAsync(0)
311323

312324
queryClient.clear()
313325

@@ -317,8 +329,8 @@ describe('PersistQueryClientProvider', () => {
317329
const state = useQuery(() => ({
318330
queryKey: key,
319331
queryFn: async () => {
320-
fetched = true
321332
await sleep(10)
333+
fetched = true
322334
return 'fetched'
323335
},
324336
staleTime: Infinity,
@@ -349,13 +361,15 @@ describe('PersistQueryClientProvider', () => {
349361
</PersistQueryClientProvider>
350362
))
351363

352-
await waitFor(() => screen.getByText('data: null'))
353-
await waitFor(() => screen.getByText('data: hydrated'))
364+
expect(screen.getByText('data: null')).toBeInTheDocument()
365+
await vi.advanceTimersByTimeAsync(10)
366+
expect(screen.getByText('data: hydrated')).toBeInTheDocument()
367+
await vi.advanceTimersByTimeAsync(10)
368+
expect(screen.getByText('data: hydrated')).toBeInTheDocument()
369+
expect(fetched).toBe(false)
354370

355371
expect(states).toHaveLength(2)
356372

357-
expect(fetched).toBe(false)
358-
359373
expect(states[0]).toMatchObject({
360374
status: 'pending',
361375
fetchStatus: 'idle',
@@ -373,24 +387,23 @@ describe('PersistQueryClientProvider', () => {
373387
const key = queryKey()
374388

375389
const queryClient = new QueryClient()
376-
await queryClient.prefetchQuery({
390+
queryClient.prefetchQuery({
377391
queryKey: key,
378-
queryFn: () => Promise.resolve('hydrated'),
392+
queryFn: () => sleep(10).then(() => 'hydrated'),
379393
})
394+
await vi.advanceTimersByTimeAsync(10)
380395

381396
const persister = createMockPersister()
382397

383-
await persistQueryClientSave({ queryClient, persister })
398+
persistQueryClientSave({ queryClient, persister })
399+
await vi.advanceTimersByTimeAsync(0)
384400

385401
queryClient.clear()
386402

387403
function Page() {
388404
const state = useQuery(() => ({
389405
queryKey: key,
390-
queryFn: async () => {
391-
await sleep(10)
392-
return 'fetched'
393-
},
406+
queryFn: () => sleep(10).then(() => 'fetched'),
394407
}))
395408

396409
return (
@@ -412,11 +425,13 @@ describe('PersistQueryClientProvider', () => {
412425
<Page />
413426
</PersistQueryClientProvider>
414427
))
415-
expect(onSuccess).toHaveBeenCalledTimes(0)
416428

417-
await waitFor(() => screen.getByText('hydrated'))
429+
expect(onSuccess).toHaveBeenCalledTimes(0)
430+
await vi.advanceTimersByTimeAsync(10)
431+
expect(screen.getByText('hydrated')).toBeInTheDocument()
418432
expect(onSuccess).toHaveBeenCalledTimes(1)
419-
await waitFor(() => screen.getByText('fetched'))
433+
await vi.advanceTimersByTimeAsync(10)
434+
expect(screen.getByText('fetched')).toBeInTheDocument()
420435
})
421436

422437
test('should remove cache after non-successful restoring', async () => {
@@ -435,10 +450,7 @@ describe('PersistQueryClientProvider', () => {
435450
function Page() {
436451
const state = useQuery(() => ({
437452
queryKey: key,
438-
queryFn: async () => {
439-
await sleep(10)
440-
return 'fetched'
441-
},
453+
queryFn: () => sleep(10).then(() => 'fetched'),
442454
}))
443455

444456
return (
@@ -460,10 +472,12 @@ describe('PersistQueryClientProvider', () => {
460472
</PersistQueryClientProvider>
461473
))
462474

463-
await waitFor(() => screen.getByText('fetched'))
475+
await vi.advanceTimersByTimeAsync(10)
464476
expect(removeClient).toHaveBeenCalledTimes(1)
465477
expect(onSuccess).toHaveBeenCalledTimes(0)
466478
expect(onError).toHaveBeenCalledTimes(1)
479+
await vi.advanceTimersByTimeAsync(10)
480+
expect(screen.getByText('fetched')).toBeInTheDocument()
467481

468482
expect(onErrorMock).toHaveBeenCalledTimes(1)
469483
expect(onErrorMock).toHaveBeenNthCalledWith(1, error)
@@ -479,27 +493,27 @@ describe('PersistQueryClientProvider', () => {
479493
}> = []
480494

481495
const queryClient = new QueryClient()
482-
await queryClient.prefetchQuery({
496+
queryClient.prefetchQuery({
483497
queryKey: key,
484-
queryFn: () => Promise.resolve('hydrated'),
498+
queryFn: () => sleep(10).then(() => 'hydrated'),
485499
})
500+
await vi.advanceTimersByTimeAsync(10)
486501

487502
const persister = createMockPersister()
488503

489-
await persistQueryClientSave({ queryClient, persister })
504+
persistQueryClientSave({ queryClient, persister })
505+
await vi.advanceTimersByTimeAsync(0)
490506

491507
queryClient.clear()
492508

493509
const onSuccess = vi.fn()
494510

495-
const queryFn1 = vi.fn().mockImplementation(async () => {
496-
await sleep(10)
497-
return 'queryFn1'
498-
})
499-
const queryFn2 = vi.fn().mockImplementation(async () => {
500-
await sleep(10)
501-
return 'queryFn2'
502-
})
511+
const queryFn1 = vi
512+
.fn()
513+
.mockImplementation(() => sleep(10).then(() => 'queryFn1'))
514+
const queryFn2 = vi
515+
.fn()
516+
.mockImplementation(() => sleep(10).then(() => 'queryFn2'))
503517

504518
function App() {
505519
const [client, setClient] = createSignal(
@@ -556,8 +570,8 @@ describe('PersistQueryClientProvider', () => {
556570

557571
render(() => <App />)
558572

559-
await waitFor(() => screen.getByText('hydrated'))
560-
await waitFor(() => screen.getByText('queryFn2'))
573+
await vi.advanceTimersByTimeAsync(10)
574+
expect(screen.getByText('queryFn2')).toBeInTheDocument()
561575

562576
expect(queryFn1).toHaveBeenCalledTimes(0)
563577
expect(queryFn2).toHaveBeenCalledTimes(1)

0 commit comments

Comments
 (0)