Skip to content

Commit c9e6076

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 c9e6076

File tree

1 file changed

+90
-75
lines changed

1 file changed

+90
-75
lines changed

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

Lines changed: 90 additions & 75 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

@@ -316,11 +328,11 @@ describe('PersistQueryClientProvider', () => {
316328
function Page() {
317329
const state = useQuery(() => ({
318330
queryKey: key,
319-
queryFn: async () => {
320-
fetched = true
321-
await sleep(10)
322-
return 'fetched'
323-
},
331+
queryFn: () =>
332+
sleep(10).then(() => {
333+
fetched = true
334+
return 'fetched'
335+
}),
324336
staleTime: Infinity,
325337
}))
326338

@@ -349,13 +361,16 @@ describe('PersistQueryClientProvider', () => {
349361
</PersistQueryClientProvider>
350362
))
351363

352-
await waitFor(() => screen.getByText('data: null'))
353-
await waitFor(() => screen.getByText('data: hydrated'))
354-
355-
expect(states).toHaveLength(2)
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()
356369

357370
expect(fetched).toBe(false)
358371

372+
expect(states).toHaveLength(2)
373+
359374
expect(states[0]).toMatchObject({
360375
status: 'pending',
361376
fetchStatus: 'idle',
@@ -373,24 +388,23 @@ describe('PersistQueryClientProvider', () => {
373388
const key = queryKey()
374389

375390
const queryClient = new QueryClient()
376-
await queryClient.prefetchQuery({
391+
queryClient.prefetchQuery({
377392
queryKey: key,
378-
queryFn: () => Promise.resolve('hydrated'),
393+
queryFn: () => sleep(10).then(() => 'hydrated'),
379394
})
395+
await vi.advanceTimersByTimeAsync(10)
380396

381397
const persister = createMockPersister()
382398

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

385402
queryClient.clear()
386403

387404
function Page() {
388405
const state = useQuery(() => ({
389406
queryKey: key,
390-
queryFn: async () => {
391-
await sleep(10)
392-
return 'fetched'
393-
},
407+
queryFn: () => sleep(10).then(() => 'fetched'),
394408
}))
395409

396410
return (
@@ -412,11 +426,13 @@ describe('PersistQueryClientProvider', () => {
412426
<Page />
413427
</PersistQueryClientProvider>
414428
))
415-
expect(onSuccess).toHaveBeenCalledTimes(0)
416429

417-
await waitFor(() => screen.getByText('hydrated'))
430+
expect(onSuccess).toHaveBeenCalledTimes(0)
431+
await vi.advanceTimersByTimeAsync(10)
432+
expect(screen.getByText('hydrated')).toBeInTheDocument()
418433
expect(onSuccess).toHaveBeenCalledTimes(1)
419-
await waitFor(() => screen.getByText('fetched'))
434+
await vi.advanceTimersByTimeAsync(10)
435+
expect(screen.getByText('fetched')).toBeInTheDocument()
420436
})
421437

422438
test('should remove cache after non-successful restoring', async () => {
@@ -435,10 +451,7 @@ describe('PersistQueryClientProvider', () => {
435451
function Page() {
436452
const state = useQuery(() => ({
437453
queryKey: key,
438-
queryFn: async () => {
439-
await sleep(10)
440-
return 'fetched'
441-
},
454+
queryFn: () => sleep(10).then(() => 'fetched'),
442455
}))
443456

444457
return (
@@ -460,10 +473,12 @@ describe('PersistQueryClientProvider', () => {
460473
</PersistQueryClientProvider>
461474
))
462475

463-
await waitFor(() => screen.getByText('fetched'))
476+
await vi.advanceTimersByTimeAsync(10)
464477
expect(removeClient).toHaveBeenCalledTimes(1)
465478
expect(onSuccess).toHaveBeenCalledTimes(0)
466479
expect(onError).toHaveBeenCalledTimes(1)
480+
await vi.advanceTimersByTimeAsync(10)
481+
expect(screen.getByText('fetched')).toBeInTheDocument()
467482

468483
expect(onErrorMock).toHaveBeenCalledTimes(1)
469484
expect(onErrorMock).toHaveBeenNthCalledWith(1, error)
@@ -479,27 +494,27 @@ describe('PersistQueryClientProvider', () => {
479494
}> = []
480495

481496
const queryClient = new QueryClient()
482-
await queryClient.prefetchQuery({
497+
queryClient.prefetchQuery({
483498
queryKey: key,
484-
queryFn: () => Promise.resolve('hydrated'),
499+
queryFn: () => sleep(10).then(() => 'hydrated'),
485500
})
501+
await vi.advanceTimersByTimeAsync(10)
486502

487503
const persister = createMockPersister()
488504

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

491508
queryClient.clear()
492509

493510
const onSuccess = vi.fn()
494511

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-
})
512+
const queryFn1 = vi
513+
.fn()
514+
.mockImplementation(() => sleep(10).then(() => 'queryFn1'))
515+
const queryFn2 = vi
516+
.fn()
517+
.mockImplementation(() => sleep(10).then(() => 'queryFn2'))
503518

504519
function App() {
505520
const [client, setClient] = createSignal(
@@ -556,8 +571,8 @@ describe('PersistQueryClientProvider', () => {
556571

557572
render(() => <App />)
558573

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

562577
expect(queryFn1).toHaveBeenCalledTimes(0)
563578
expect(queryFn2).toHaveBeenCalledTimes(1)

0 commit comments

Comments
 (0)