Skip to content

Commit 06b6fb9

Browse files
gwansikkmanudeli
gwansikk
and
manudeli
authored
feat(react-query): add react@19 as peerDeps (#9310)
* chore(react-query): update peer-deps for react19 in v4 * chore: update dependencies * chore(react-query): add moduleNameMapper for React 18 compatibility in Jest config * chore(react-query-devtools, react-query-persist-client): add moduleNameMapper * chore: update jest config * chore: update jest config * chore: update jest * test: update * test: update * test: update * test: update * test: update * ci(test): update * chore: update * test(useQueries): enhance state assertions for React 18 and 19 compatibility * test: useMutation test for any react version --------- Co-authored-by: Jonghyeon Ko <[email protected]>
1 parent 1b5c256 commit 06b6fb9

File tree

22 files changed

+1444
-997
lines changed

22 files changed

+1444
-997
lines changed

‎.github/workflows/pr.yml‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
name: pr
22

3-
on:
4-
pull_request:
3+
on: [pull_request]
54

65
concurrency:
76
group: ${{ github.workflow }}-${{ github.event.number || github.ref }}
@@ -53,9 +52,12 @@ jobs:
5352
run: pnpm --filter "./packages/**" --filter query --prefer-offline install
5453
- name: Run prettier
5554
run: pnpm run test:format
56-
test-react-17:
57-
name: 'Test React 17'
55+
test-react-version:
56+
name: 'Test React Version'
5857
runs-on: ubuntu-latest
58+
strategy:
59+
matrix:
60+
react-version: [17, 18]
5961
steps:
6062
- name: Checkout
6163
uses: actions/[email protected]
@@ -74,12 +76,12 @@ jobs:
7476
run: pnpm --filter "./packages/**" --filter query --prefer-offline install
7577
- name: Derive appropriate SHAs for base and head for `nx affected` commands
7678
uses: nrwl/nx-set-shas@v2
77-
- name: Run Tests
79+
- name: Run Tests for React ${{ matrix.react-version }}
7880
uses: nick-fields/[email protected]
7981
with:
8082
timeout_minutes: 5
8183
max_attempts: 3
8284
command: npx nx affected --targets=test:lib --base=${{ github.event.pull_request.base.sha }}
8385
env:
8486
NX_CLOUD_DISTRIBUTED_EXECUTION: false
85-
REACTJS_VERSION: 17
87+
REACTJS_VERSION: ${{ matrix.react-version }}

‎package.json‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,15 @@
4646
"@rollup/plugin-replace": "^4.0.0",
4747
"@tanstack/publish-config": "^0.1.1",
4848
"@testing-library/jest-dom": "^5.16.4",
49-
"@testing-library/react": "^13.0.0",
49+
"@testing-library/react": "^16.3.0",
5050
"@testing-library/react-17": "npm:@testing-library/[email protected]",
51+
"@testing-library/react-18": "npm:@testing-library/[email protected]",
5152
"@testing-library/react-hooks": "^7.0.2",
5253
"@testing-library/user-event": "14.4.3",
5354
"@types/jest": "^26.0.4",
5455
"@types/node": "^22.15.3",
55-
"@types/react": "^18.0.14",
56-
"@types/react-dom": "^18.0.5",
56+
"@types/react": "^19.1.9",
57+
"@types/react-dom": "^19.1.7",
5758
"@types/testing-library__jest-dom": "^5.14.5",
5859
"@typescript-eslint/eslint-plugin": "^5.41.0",
5960
"@typescript-eslint/parser": "^5.41.0",
@@ -77,10 +78,12 @@
7778
"nx-cloud": "16.3.0",
7879
"prettier": "^2.6.2",
7980
"prettier-plugin-svelte": "^2.9.0",
80-
"react": "^18.2.0",
81+
"react": "^19.1.1",
82+
"react-18": "npm:react@^18.2.0",
8183
"react-17": "npm:react@^17.0.2",
82-
"react-dom": "^18.2.0",
84+
"react-dom": "^19.1.1",
8385
"react-dom-17": "npm:react-dom@^17.0.2",
86+
"react-dom-18": "npm:react-dom@^18.2.0",
8487
"rimraf": "^3.0.2",
8588
"rollup": "^2.70.2",
8689
"rollup-plugin-preserve-directives": "0.1.0",

‎packages/react-query-devtools/jest.config.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,26 @@
1+
const reactVersion = (process.env.REACTJS_VERSION || '19') as '17' | '18' | '19'
2+
const reactModulesByVersion = {
3+
'17': {
4+
'^react((\\/.*)?)$': 'react-17$1',
5+
'^react-dom/client((\\/.*)?)$': 'react-dom-17$1',
6+
'^react-dom((\\/.*)?)$': 'react-dom-17$1',
7+
'^@testing-library/react': '@testing-library/react-17',
8+
},
9+
'18': {
10+
'^react((\\/.*)?)$': 'react-18$1',
11+
'^react-dom((\\/.*)?)$': 'react-dom-18$1',
12+
'^@testing-library/react': '@testing-library/react-18',
13+
},
14+
'19': {
15+
'^react((\\/.*)?)$': 'react$1',
16+
'^react-dom((\\/.*)?)$': 'react-dom$1',
17+
'^@testing-library/react': '@testing-library/react',
18+
},
19+
}[reactVersion]
20+
121
export default {
222
displayName: 'react-query-devtools',
323
preset: '../../jest-preset.js',
24+
moduleNameMapper: reactModulesByVersion,
425
setupFilesAfterEnv: ['./jest.setup.ts'],
526
}

‎packages/react-query-devtools/jest.setup.ts‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,3 @@ import { notifyManager } from '@tanstack/query-core'
55
notifyManager.setNotifyFunction((fn) => {
66
act(fn)
77
})
8-
9-
type ReactVersion = '18' | '17'
10-
11-
jest.mock('react', () => {
12-
const packages = {
13-
'18': 'react',
14-
'17': 'react-17',
15-
}
16-
const version = (process.env.REACTJS_VERSION || '18') as ReactVersion
17-
18-
return jest.requireActual(packages[version]!)
19-
})
20-
21-
jest.mock('react-dom', () => {
22-
const packages = {
23-
'18': 'react-dom',
24-
'17': 'react-dom-17',
25-
}
26-
const version = (process.env.REACTJS_VERSION || '18') as ReactVersion
27-
28-
return jest.requireActual(packages[version])
29-
})
30-
31-
jest.mock('@testing-library/react', () => {
32-
const packages = {
33-
'18': '@testing-library/react',
34-
'17': '@testing-library/react-17',
35-
}
36-
const version = (process.env.REACTJS_VERSION || '18') as ReactVersion
37-
38-
return jest.requireActual(packages[version])
39-
})

‎packages/react-query-devtools/package.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,15 @@
5050
"build:types": "tsc --build && cp build/lib/index.d.ts build/lib/index.prod.d.ts"
5151
},
5252
"devDependencies": {
53-
"@types/react": "^18.0.14",
54-
"@types/react-dom": "^18.0.5",
53+
"@types/react": "^19.1.9",
54+
"@types/react-dom": "^19.1.7",
5555
"@types/use-sync-external-store": "^0.0.3",
56-
"react": "^18.2.0",
56+
"react": "^19.1.1",
5757
"react-17": "npm:react@^17.0.2",
58-
"react-dom": "^18.2.0",
58+
"react-18": "npm:react@^18.2.0",
59+
"react-dom": "^19.1.1",
5960
"react-dom-17": "npm:react-dom@^17.0.2",
61+
"react-dom-18": "npm:react-dom@^18.2.0",
6062
"react-error-boundary": "^3.1.4",
6163
"@tanstack/react-query": "workspace:*"
6264
},
@@ -66,8 +68,8 @@
6668
"use-sync-external-store": "^1.2.0"
6769
},
6870
"peerDependencies": {
69-
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
70-
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
71+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
72+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
7173
"@tanstack/react-query": "workspace:^"
7274
}
7375
}

‎packages/react-query-devtools/src/Explorer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ type Entry = {
188188
}
189189

190190
type RendererProps = {
191-
handleEntry: (entry: Entry) => JSX.Element
191+
handleEntry: (entry: Entry) => React.JSX.Element
192192
label?: string
193193
value: unknown
194194
subEntries: Entry[]
@@ -220,7 +220,7 @@ export function chunkArray<T>(array: T[], size: number): T[][] {
220220
return result
221221
}
222222

223-
type Renderer = (props: RendererProps) => JSX.Element
223+
type Renderer = (props: RendererProps) => React.JSX.Element
224224

225225
export const DefaultRenderer: Renderer = ({
226226
handleEntry,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -931,7 +931,7 @@ describe('ReactQueryDevtools', () => {
931931
paddingRight: '20%',
932932
}
933933

934-
function Parent({ children }: { children: React.ReactElement }) {
934+
function Parent({ children }: { children: React.ReactNode }) {
935935
return (
936936
<div data-testid={parentElementTestid} style={parentPaddings}>
937937
{children}

‎packages/react-query-persist-client/jest.config.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,26 @@
1+
const reactVersion = (process.env.REACTJS_VERSION || '19') as '17' | '18' | '19'
2+
const reactModulesByVersion = {
3+
'17': {
4+
'^react((\\/.*)?)$': 'react-17$1',
5+
'^react-dom/client((\\/.*)?)$': 'react-dom-17$1',
6+
'^react-dom((\\/.*)?)$': 'react-dom-17$1',
7+
'^@testing-library/react': '@testing-library/react-17',
8+
},
9+
'18': {
10+
'^react((\\/.*)?)$': 'react-18$1',
11+
'^react-dom((\\/.*)?)$': 'react-dom-18$1',
12+
'^@testing-library/react': '@testing-library/react-18',
13+
},
14+
'19': {
15+
'^react((\\/.*)?)$': 'react$1',
16+
'^react-dom((\\/.*)?)$': 'react-dom$1',
17+
'^@testing-library/react': '@testing-library/react',
18+
},
19+
}[reactVersion]
20+
121
export default {
222
displayName: 'react-query-persist-client',
323
preset: '../../jest-preset.js',
24+
moduleNameMapper: reactModulesByVersion,
425
setupFilesAfterEnv: ['./jest.setup.ts'],
526
}

‎packages/react-query-persist-client/jest.setup.ts‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,3 @@ import { notifyManager } from '@tanstack/react-query'
55
notifyManager.setNotifyFunction((fn) => {
66
act(fn)
77
})
8-
9-
type ReactVersion = '18' | '17'
10-
11-
jest.mock('react', () => {
12-
const packages = {
13-
'18': 'react',
14-
'17': 'react-17',
15-
}
16-
const version = (process.env.REACTJS_VERSION || '18') as ReactVersion
17-
18-
return jest.requireActual(packages[version]!)
19-
})
20-
21-
jest.mock('react-dom', () => {
22-
const packages = {
23-
'18': 'react-dom',
24-
'17': 'react-dom-17',
25-
}
26-
const version = (process.env.REACTJS_VERSION || '18') as ReactVersion
27-
28-
return jest.requireActual(packages[version])
29-
})
30-
31-
jest.mock('@testing-library/react', () => {
32-
const packages = {
33-
'18': '@testing-library/react',
34-
'17': '@testing-library/react-17',
35-
}
36-
const version = (process.env.REACTJS_VERSION || '18') as ReactVersion
37-
38-
return jest.requireActual(packages[version])
39-
})

‎packages/react-query-persist-client/package.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,13 @@
4040
"build:types": "tsc --build"
4141
},
4242
"devDependencies": {
43-
"@types/react": "^18.0.14",
44-
"@types/react-dom": "^18.0.5",
45-
"react": "^18.2.0",
43+
"@types/react": "^19.1.9",
44+
"@types/react-dom": "^19.1.7",
45+
"react": "^19.1.1",
4646
"react-17": "npm:react@^17.0.2",
47-
"react-dom": "^18.2.0",
47+
"react-18": "npm:react@^18.2.0",
48+
"react-dom": "^19.1.1",
49+
"react-dom-18": "npm:react-dom@^18.2.0",
4850
"react-dom-17": "npm:react-dom@^17.0.2",
4951
"@tanstack/react-query": "workspace:*"
5052
},

0 commit comments

Comments
 (0)