Skip to content

Commit 78cf64a

Browse files
theVedantatheVedanta
committed
testing grunt work (preact library + other small issues + ErrorBoundary custom implementation)
1 parent 722e05b commit 78cf64a

25 files changed

Lines changed: 593 additions & 847 deletions

‎packages/preact-query/eslint.config.js‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
// @ts-check
22

3-
import reactHooks from 'eslint-plugin-react-hooks'
43
import rootConfig from './root.eslint.config.js'
54
// @ts-ignore: no types for eslint-config-preact
65
import preact from 'eslint-config-preact'
76
import tseslint from 'typescript-eslint'
87

98
export default [
109
...rootConfig,
11-
// @ts-expect-error wtf
12-
...reactHooks.configs['recommended-latest'],
1310
...preact,
1411
{
1512
files: ['**/*.{ts,tsx}'],
@@ -23,16 +20,12 @@ export default [
2320
'typescript-eslint': tseslint.plugin,
2421
},
2522
rules: {
26-
'@eslint-react/no-context-provider': 'off', // We need to be React 18 compatible
27-
'react-hooks/exhaustive-deps': 'error',
28-
'react-hooks/rules-of-hooks': 'error',
29-
'react-hooks/unsupported-syntax': 'error',
30-
'react-hooks/incompatible-library': 'error',
31-
3223
// Disable base rule to prevent overload false positives
3324
'no-redeclare': 'off',
25+
'no-duplicate-imports': 'off',
3426
// TS-aware version handles overloads correctly
3527
'@typescript-eslint/no-redeclare': 'error',
28+
'@typescript-eslint/no-duplicate-imports': 'error',
3629
},
3730
},
3831
{

‎packages/preact-query/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,8 @@
7777
"eslint-config-preact": "^2.0.0",
7878
"npm-run-all2": "^5.0.0",
7979
"preact": "^10.28.0",
80-
"react-error-boundary": "^4.1.2",
80+
"preact-iso": "^2.11.0",
81+
"preact-render-to-string": "^6.6.4",
8182
"typescript-eslint": "^8.50.0"
8283
},
8384
"peerDependencies": {

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
2-
import * as React from 'react'
3-
import { render } from '@testing-library/react'
2+
import { render } from '@testing-library/preact'
43
import * as coreModule from '@tanstack/query-core'
54
import { sleep } from '@tanstack/query-test-utils'
65
import {
@@ -11,6 +10,7 @@ import {
1110
useQuery,
1211
} from '..'
1312
import type { hydrate } from '@tanstack/query-core'
13+
import { startTransition, Suspense } from 'preact/compat'
1414

1515
describe('React hydration', () => {
1616
let stringifiedState: string
@@ -217,23 +217,23 @@ describe('React hydration', () => {
217217
})
218218
}
219219

220-
React.startTransition(() => {
220+
startTransition(() => {
221221
rendered.rerender(
222-
<React.Suspense fallback="loading">
222+
<Suspense fallback="loading">
223223
<QueryClientProvider client={queryClient}>
224224
<HydrationBoundary state={newDehydratedState}>
225225
<Page queryKey={['string']} />
226226
<Page queryKey={['added']} />
227227
<Thrower />
228228
</HydrationBoundary>
229229
</QueryClientProvider>
230-
</React.Suspense>,
230+
</Suspense>,
231231
)
232232

233233
expect(rendered.getByText('loading')).toBeInTheDocument()
234234
})
235235

236-
React.startTransition(() => {
236+
startTransition(() => {
237237
rendered.rerender(
238238
<QueryClientProvider client={queryClient}>
239239
<HydrationBoundary state={initialDehydratedState}>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
2-
import { render } from '@testing-library/react'
2+
import { render } from '@testing-library/preact'
33
import { queryKey, sleep } from '@tanstack/query-test-utils'
44
import {
55
QueryCache,

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

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
2-
import { act, fireEvent } from '@testing-library/react'
3-
import { ErrorBoundary } from 'react-error-boundary'
4-
import * as React from 'react'
2+
import { act, fireEvent } from '@testing-library/preact'
53
import { queryKey, sleep } from '@tanstack/query-test-utils'
64
import {
75
QueryCache,
@@ -13,6 +11,9 @@ import {
1311
useSuspenseQuery,
1412
} from '..'
1513
import { renderWithClient } from './utils'
14+
import { useEffect, useState } from 'preact/hooks'
15+
import { Suspense } from 'preact/compat'
16+
import { ErrorBoundary } from './utils'
1617

1718
describe('QueryErrorResetBoundary', () => {
1819
beforeEach(() => {
@@ -165,7 +166,7 @@ describe('QueryErrorResetBoundary', () => {
165166
let succeed = false
166167

167168
function Page() {
168-
const [enabled, setEnabled] = React.useState(false)
169+
const [enabled, setEnabled] = useState(false)
169170
const { data } = useQuery({
170171
queryKey: key,
171172
queryFn: () =>
@@ -178,7 +179,7 @@ describe('QueryErrorResetBoundary', () => {
178179
throwOnError: true,
179180
})
180181

181-
React.useEffect(() => {
182+
useEffect(() => {
182183
setEnabled(true)
183184
}, [])
184185

@@ -609,28 +610,28 @@ describe('QueryErrorResetBoundary', () => {
609610
</div>
610611
)}
611612
>
612-
<React.Suspense fallback={<div>loading</div>}>
613+
<Suspense fallback={<div>loading</div>}>
613614
<Page />
614-
</React.Suspense>
615+
</Suspense>
615616
</ErrorBoundary>
616617
)}
617618
</QueryErrorResetBoundary>,
618619
)
619620

620621
expect(rendered.getByText('loading')).toBeInTheDocument()
621-
await act(() => vi.advanceTimersByTimeAsync(10))
622+
await vi.advanceTimersByTimeAsync(10)
622623
expect(rendered.getByText('error boundary')).toBeInTheDocument()
623624
expect(rendered.getByText('retry')).toBeInTheDocument()
624625

625626
fireEvent.click(rendered.getByText('retry'))
626627
expect(rendered.getByText('loading')).toBeInTheDocument()
627-
await act(() => vi.advanceTimersByTimeAsync(10))
628+
await vi.advanceTimersByTimeAsync(10)
628629
expect(rendered.getByText('error boundary')).toBeInTheDocument()
629630
expect(rendered.getByText('retry')).toBeInTheDocument()
630631

631632
fireEvent.click(rendered.getByText('retry'))
632633
expect(rendered.getByText('loading')).toBeInTheDocument()
633-
await act(() => vi.advanceTimersByTimeAsync(10))
634+
await vi.advanceTimersByTimeAsync(10)
634635
expect(rendered.getByText('data')).toBeInTheDocument()
635636

636637
expect(fetchCount).toBe(3)
@@ -840,24 +841,24 @@ describe('QueryErrorResetBoundary', () => {
840841
</div>
841842
)}
842843
>
843-
<React.Suspense fallback="loading">
844+
<Suspense fallback="loading">
844845
<Page />
845-
</React.Suspense>
846+
</Suspense>
846847
</ErrorBoundary>
847848
)}
848849
</QueryErrorResetBoundary>,
849850
)
850851

851852
expect(rendered.getByText('loading')).toBeInTheDocument()
852-
await act(() => vi.advanceTimersByTimeAsync(10))
853+
await vi.advanceTimersByTimeAsync(10)
853854
expect(rendered.getByText('error boundary')).toBeInTheDocument()
854855
expect(rendered.getByText('retry')).toBeInTheDocument()
855856

856857
succeed = true
857858

858859
fireEvent.click(rendered.getByText('retry'))
859860
expect(rendered.getByText('loading')).toBeInTheDocument()
860-
await act(() => vi.advanceTimersByTimeAsync(10))
861+
await vi.advanceTimersByTimeAsync(10)
861862
expect(rendered.getByText('data')).toBeInTheDocument()
862863

863864
consoleMock.mockRestore()

‎packages/preact-query/src/__tests__/fine-grained-persister.test.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
2-
import * as React from 'react'
32
import {
43
PERSISTER_KEY_PREFIX,
54
experimental_createQueryPersister,
65
} from '@tanstack/query-persist-client-core'
76
import { queryKey, sleep } from '@tanstack/query-test-utils'
87
import { QueryCache, QueryClient, hashKey, useQuery } from '..'
98
import { renderWithClient } from './utils'
9+
import { useState } from 'preact/hooks'
1010

1111
describe('fine grained persister', () => {
1212
beforeEach(() => {
@@ -52,7 +52,7 @@ describe('fine grained persister', () => {
5252
)
5353

5454
function Test() {
55-
const [_, setRef] = React.useState<HTMLDivElement | null>()
55+
const [_, setRef] = useState<HTMLDivElement | null>()
5656

5757
const { data } = useQuery({
5858
queryKey: key,
@@ -109,7 +109,7 @@ describe('fine grained persister', () => {
109109
)
110110

111111
function Test() {
112-
const [_, setRef] = React.useState<HTMLDivElement | null>()
112+
const [_, setRef] = useState<HTMLDivElement | null>()
113113

114114
const { data } = useQuery({
115115
queryKey: key,
@@ -150,7 +150,7 @@ describe('fine grained persister', () => {
150150
}
151151

152152
function Test() {
153-
const [_, setRef] = React.useState<HTMLDivElement | null>()
153+
const [_, setRef] = useState<HTMLDivElement | null>()
154154

155155
const { data } = useQuery({
156156
queryKey: key,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
22
import { QueryClient } from '@tanstack/query-core'
33
import { sleep } from '@tanstack/query-test-utils'
4-
import { fireEvent } from '@testing-library/react'
4+
import { fireEvent } from '@testing-library/preact'
55
import { mutationOptions } from '../mutationOptions'
66
import { useIsMutating, useMutation, useMutationState } from '..'
77
import { renderWithClient } from './utils'

‎packages/preact-query/src/__tests__/ssr-hydration.test.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
2-
import { hydrateRoot } from 'react-dom/client'
2+
import { renderToString } from 'preact-render-to-string'
3+
import { hydrate as preactHydrate, VNode } from 'preact'
34
import { act } from 'react'
4-
import * as ReactDOMServer from 'react-dom/server'
55
import {
66
QueryCache,
77
QueryClient,
@@ -12,10 +12,10 @@ import {
1212
} from '..'
1313
import { setIsServer } from './utils'
1414

15-
const ReactHydrate = (element: React.ReactElement, container: Element) => {
15+
const ReactHydrate = (element: VNode, container: Element) => {
1616
let root: any
1717
act(() => {
18-
root = hydrateRoot(container, element)
18+
root = preactHydrate(element, container)
1919
})
2020
return () => {
2121
root.unmount()
@@ -79,7 +79,7 @@ describe('Server side rendering with de/rehydration', () => {
7979
queryCache: renderCache,
8080
})
8181
hydrate(renderClient, dehydratedStateServer)
82-
const markup = ReactDOMServer.renderToString(
82+
const markup = renderToString(
8383
<QueryClientProvider client={renderClient}>
8484
<SuccessComponent />
8585
</QueryClientProvider>,
@@ -156,7 +156,7 @@ describe('Server side rendering with de/rehydration', () => {
156156
queryCache: renderCache,
157157
})
158158
hydrate(renderClient, dehydratedStateServer)
159-
const markup = ReactDOMServer.renderToString(
159+
const markup = renderToString(
160160
<QueryClientProvider client={renderClient}>
161161
<ErrorComponent />
162162
</QueryClientProvider>,
@@ -223,7 +223,7 @@ describe('Server side rendering with de/rehydration', () => {
223223
const dehydratedStateServer = dehydrate(prefetchClient)
224224
const renderClient = new QueryClient()
225225
hydrate(renderClient, dehydratedStateServer)
226-
const markup = ReactDOMServer.renderToString(
226+
const markup = renderToString(
227227
<QueryClientProvider client={renderClient}>
228228
<SuccessComponent />
229229
</QueryClientProvider>,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from 'react'
2-
import { renderToString } from 'react-dom/server'
31
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
42
import { queryKey, sleep } from '@tanstack/query-test-utils'
53
import {
@@ -10,6 +8,8 @@ import {
108
useQuery,
119
} from '..'
1210
import { setIsServer } from './utils'
11+
import { renderToString } from 'preact-render-to-string'
12+
import { useState } from 'preact/hooks'
1313

1414
describe('Server Side Rendering', () => {
1515
setIsServer(true)
@@ -107,7 +107,7 @@ describe('Server Side Rendering', () => {
107107
const key = queryKey()
108108

109109
function Page() {
110-
const [page, setPage] = React.useState(1)
110+
const [page, setPage] = useState(1)
111111
const { data } = useQuery({
112112
queryKey: [key, page],
113113
queryFn: () => sleep(10).then(() => page),

0 commit comments

Comments
 (0)