Skip to content

Commit 389bbca

Browse files
sukvvonsukvvon
authored
test(preact-query): replace hardcoded query keys with 'queryKey()' utility (#10419)
1 parent 4335fce commit 389bbca

19 files changed

+258
-220
lines changed

‎packages/preact-query/src/__tests__/HydrationBoundary.test.tsx‎

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as coreModule from '@tanstack/query-core'
22
import type { hydrate } from '@tanstack/query-core'
3-
import { sleep } from '@tanstack/query-test-utils'
3+
import { queryKey, sleep } from '@tanstack/query-test-utils'
44
import { render } from '@testing-library/preact'
55
import { Suspense, startTransition } from 'preact/compat'
66
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
@@ -14,13 +14,16 @@ import {
1414
} from '..'
1515

1616
describe('Preact hydration', () => {
17+
const stringKey = queryKey()
18+
const addedKey = queryKey()
19+
const promiseKey = queryKey()
1720
let stringifiedState: string
1821

1922
beforeEach(async () => {
2023
vi.useFakeTimers()
2124
const queryClient = new QueryClient()
2225
queryClient.prefetchQuery({
23-
queryKey: ['string'],
26+
queryKey: stringKey,
2427
queryFn: () => sleep(10).then(() => ['stringCached']),
2528
})
2629
await vi.advanceTimersByTimeAsync(10)
@@ -38,7 +41,7 @@ describe('Preact hydration', () => {
3841

3942
function Page() {
4043
const { data } = useQuery({
41-
queryKey: ['string'],
44+
queryKey: stringKey,
4245
queryFn: () => sleep(20).then(() => ['string']),
4346
})
4447
return (
@@ -70,7 +73,7 @@ describe('Preact hydration', () => {
7073

7174
function Page() {
7275
const { data } = useQuery({
73-
queryKey: ['string'],
76+
queryKey: stringKey,
7477
queryFn: () => sleep(20).then(() => ['string']),
7578
})
7679
return (
@@ -103,10 +106,10 @@ describe('Preact hydration', () => {
103106
const dehydratedState = JSON.parse(stringifiedState)
104107
const queryClient = new QueryClient()
105108

106-
function Page({ queryKey }: { queryKey: [string] }) {
109+
function Page({ queryKey: pageKey }: { queryKey: Array<string> }) {
107110
const { data } = useQuery({
108-
queryKey,
109-
queryFn: () => sleep(20).then(() => queryKey),
111+
queryKey: pageKey,
112+
queryFn: () => sleep(20).then(() => pageKey),
110113
})
111114
return (
112115
<div>
@@ -118,24 +121,24 @@ describe('Preact hydration', () => {
118121
const rendered = render(
119122
<QueryClientProvider client={queryClient}>
120123
<HydrationBoundary state={dehydratedState}>
121-
<Page queryKey={['string']} />
124+
<Page queryKey={stringKey} />
122125
</HydrationBoundary>
123126
</QueryClientProvider>,
124127
)
125128

126129
expect(rendered.getByText('stringCached')).toBeInTheDocument()
127130
await vi.advanceTimersByTimeAsync(21)
128-
expect(rendered.getByText('string')).toBeInTheDocument()
131+
expect(rendered.getByText(stringKey[0]!)).toBeInTheDocument()
129132

130133
const intermediateClient = new QueryClient()
131134

132135
intermediateClient.prefetchQuery({
133-
queryKey: ['string'],
136+
queryKey: stringKey,
134137
queryFn: () => sleep(20).then(() => ['should change']),
135138
})
136139
intermediateClient.prefetchQuery({
137-
queryKey: ['added'],
138-
queryFn: () => sleep(20).then(() => ['added']),
140+
queryKey: addedKey,
141+
queryFn: () => sleep(20).then(() => [addedKey[0]]),
139142
})
140143
await vi.advanceTimersByTimeAsync(20)
141144
const dehydrated = dehydrate(intermediateClient)
@@ -144,21 +147,21 @@ describe('Preact hydration', () => {
144147
rendered.rerender(
145148
<QueryClientProvider client={queryClient}>
146149
<HydrationBoundary state={dehydrated}>
147-
<Page queryKey={['string']} />
148-
<Page queryKey={['added']} />
150+
<Page queryKey={stringKey} />
151+
<Page queryKey={addedKey} />
149152
</HydrationBoundary>
150153
</QueryClientProvider>,
151154
)
152155

153156
// Existing observer should not have updated at this point,
154157
// as that would indicate a side effect in the render phase
155-
expect(rendered.getByText('string')).toBeInTheDocument()
158+
expect(rendered.getByText(stringKey[0]!)).toBeInTheDocument()
156159
// New query data should be available immediately
157-
expect(rendered.getByText('added')).toBeInTheDocument()
160+
expect(rendered.getByText(addedKey[0]!)).toBeInTheDocument()
158161

159162
await vi.advanceTimersByTimeAsync(0)
160163
// After effects phase has had time to run, the observer should have updated
161-
expect(rendered.queryByText('string')).not.toBeInTheDocument()
164+
expect(rendered.queryByText(stringKey[0]!)).not.toBeInTheDocument()
162165
expect(rendered.getByText('should change')).toBeInTheDocument()
163166

164167
queryClient.clear()
@@ -174,10 +177,10 @@ describe('Preact hydration', () => {
174177
const initialDehydratedState = JSON.parse(stringifiedState)
175178
const queryClient = new QueryClient()
176179

177-
function Page({ queryKey }: { queryKey: [string] }) {
180+
function Page({ queryKey: pageKey }: { queryKey: Array<string> }) {
178181
const { data } = useQuery({
179-
queryKey,
180-
queryFn: () => sleep(20).then(() => queryKey),
182+
queryKey: pageKey,
183+
queryFn: () => sleep(20).then(() => pageKey),
181184
})
182185
return (
183186
<div>
@@ -189,23 +192,23 @@ describe('Preact hydration', () => {
189192
const rendered = render(
190193
<QueryClientProvider client={queryClient}>
191194
<HydrationBoundary state={initialDehydratedState}>
192-
<Page queryKey={['string']} />
195+
<Page queryKey={stringKey} />
193196
</HydrationBoundary>
194197
</QueryClientProvider>,
195198
)
196199

197200
expect(rendered.getByText('stringCached')).toBeInTheDocument()
198201
await vi.advanceTimersByTimeAsync(21)
199-
expect(rendered.getByText('string')).toBeInTheDocument()
202+
expect(rendered.getByText(stringKey[0]!)).toBeInTheDocument()
200203

201204
const intermediateClient = new QueryClient()
202205
intermediateClient.prefetchQuery({
203-
queryKey: ['string'],
206+
queryKey: stringKey,
204207
queryFn: () => sleep(20).then(() => ['should not change']),
205208
})
206209
intermediateClient.prefetchQuery({
207-
queryKey: ['added'],
208-
queryFn: () => sleep(20).then(() => ['added']),
210+
queryKey: addedKey,
211+
queryFn: () => sleep(20).then(() => [addedKey[0]]),
209212
})
210213
await vi.advanceTimersByTimeAsync(20)
211214

@@ -223,8 +226,8 @@ describe('Preact hydration', () => {
223226
<Suspense fallback="loading">
224227
<QueryClientProvider client={queryClient}>
225228
<HydrationBoundary state={newDehydratedState}>
226-
<Page queryKey={['string']} />
227-
<Page queryKey={['added']} />
229+
<Page queryKey={stringKey} />
230+
<Page queryKey={addedKey} />
228231
<Thrower />
229232
</HydrationBoundary>
230233
</QueryClientProvider>
@@ -238,26 +241,26 @@ describe('Preact hydration', () => {
238241
rendered.rerender(
239242
<QueryClientProvider client={queryClient}>
240243
<HydrationBoundary state={initialDehydratedState}>
241-
<Page queryKey={['string']} />
242-
<Page queryKey={['added']} />
244+
<Page queryKey={stringKey} />
245+
<Page queryKey={addedKey} />
243246
</HydrationBoundary>
244247
</QueryClientProvider>,
245248
)
246249

247250
// This query existed before the transition so it should stay the same
248-
expect(rendered.getByText('string')).toBeInTheDocument()
251+
expect(rendered.getByText(stringKey[0]!)).toBeInTheDocument()
249252
expect(
250253
rendered.queryByText('should not change'),
251254
).not.toBeInTheDocument()
252255
// New query data should be available immediately because it was
253256
// hydrated in the previous transition, even though the new dehydrated
254257
// state did not contain it
255-
expect(rendered.getByText('added')).toBeInTheDocument()
258+
expect(rendered.getByText(addedKey[0]!)).toBeInTheDocument()
256259
})
257260

258261
await vi.advanceTimersByTimeAsync(20)
259262
// It should stay the same even after effects have had a chance to run
260-
expect(rendered.getByText('string')).toBeInTheDocument()
263+
expect(rendered.getByText(stringKey[0]!)).toBeInTheDocument()
261264
expect(rendered.queryByText('should not change')).not.toBeInTheDocument()
262265

263266
queryClient.clear()
@@ -269,7 +272,7 @@ describe('Preact hydration', () => {
269272

270273
function Page() {
271274
const { data } = useQuery({
272-
queryKey: ['string'],
275+
queryKey: stringKey,
273276
queryFn: () => sleep(20).then(() => ['string']),
274277
})
275278
return (
@@ -429,7 +432,7 @@ describe('Preact hydration', () => {
429432
// with a dataUpdatedAt earlier than the dehydratedAt of the next query
430433
const clientQueryClient = new QueryClient()
431434
clientQueryClient.prefetchQuery({
432-
queryKey: ['promise'],
435+
queryKey: promiseKey,
433436
queryFn: () => sleep(20).then(() => 'existing'),
434437
})
435438
await vi.advanceTimersByTimeAsync(20)
@@ -442,7 +445,7 @@ describe('Preact hydration', () => {
442445
},
443446
})
444447
prefetchQueryClient.prefetchQuery({
445-
queryKey: ['promise'],
448+
queryKey: promiseKey,
446449
queryFn: () =>
447450
sleep(10).then(() => Promise.reject(new Error('Query failed'))),
448451
})
@@ -455,7 +458,7 @@ describe('Preact hydration', () => {
455458

456459
function Page() {
457460
const { data } = useQuery({
458-
queryKey: ['promise'],
461+
queryKey: promiseKey,
459462
queryFn: () => sleep(20).then(() => ['new']),
460463
})
461464
return (

0 commit comments

Comments
 (0)