feat(react-query): add react@19 as peerDeps

.github/workflows/pr.yml

@@ -1,7 +1,6 @@
 name: pr
 
-on:
-  pull_request:
+on: [pull_request]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.number || github.ref }}
@@ -53,9 +52,12 @@ jobs:
         run: pnpm --filter "./packages/**" --filter query --prefer-offline install
       - name: Run prettier
         run: pnpm run test:format
-  test-react-17:
-    name: 'Test React 17'
+  test-react-version:
+    name: 'Test React Version'
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        react-version: [17, 18]
     steps:
       - name: Checkout
         uses: actions/[email protected]
@@ -74,12 +76,12 @@ jobs:
         run: pnpm --filter "./packages/**" --filter query --prefer-offline install
       - name: Derive appropriate SHAs for base and head for `nx affected` commands
         uses: nrwl/nx-set-shas@v2
-      - name: Run Tests
+      - name: Run Tests for React ${{ matrix.react-version }}
         uses: nick-fields/[email protected]
         with:
           timeout_minutes: 5
           max_attempts: 3
           command: npx nx affected --targets=test:lib --base=${{ github.event.pull_request.base.sha }}
         env:
           NX_CLOUD_DISTRIBUTED_EXECUTION: false
-          REACTJS_VERSION: 17
+          REACTJS_VERSION: ${{ matrix.react-version }}

package.json

@@ -46,14 +46,15 @@
     "@rollup/plugin-replace": "^4.0.0",
     "@tanstack/publish-config": "^0.1.1",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.0.0",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/react-17": "npm:@testing-library/[email protected]",
+    "@testing-library/react-18": "npm:@testing-library/[email protected]",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "14.4.3",
     "@types/jest": "^26.0.4",
     "@types/node": "^22.15.3",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.41.0",
     "@typescript-eslint/parser": "^5.41.0",
@@ -77,10 +78,12 @@
     "nx-cloud": "16.3.0",
     "prettier": "^2.6.2",
     "prettier-plugin-svelte": "^2.9.0",
-    "react": "^18.2.0",
+    "react": "^19.1.1",
+    "react-18": "npm:react@^18.2.0",
     "react-17": "npm:react@^17.0.2",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.1.1",
     "react-dom-17": "npm:react-dom@^17.0.2",
+    "react-dom-18": "npm:react-dom@^18.2.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.70.2",
     "rollup-plugin-preserve-directives": "0.1.0",

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

@@ -1,5 +1,26 @@
+const reactVersion = (process.env.REACTJS_VERSION || '19') as '17' | '18' | '19'
+const reactModulesByVersion = {
+  '17': {
+    '^react((\\/.*)?)$': 'react-17$1',
+    '^react-dom/client((\\/.*)?)$': 'react-dom-17$1',
+    '^react-dom((\\/.*)?)$': 'react-dom-17$1',
+    '^@testing-library/react': '@testing-library/react-17',
+  },
+  '18': {
+    '^react((\\/.*)?)$': 'react-18$1',
+    '^react-dom((\\/.*)?)$': 'react-dom-18$1',
+    '^@testing-library/react': '@testing-library/react-18',
+  },
+  '19': {
+    '^react((\\/.*)?)$': 'react$1',
+    '^react-dom((\\/.*)?)$': 'react-dom$1',
+    '^@testing-library/react': '@testing-library/react',
+  },
+}[reactVersion]
+
 export default {
   displayName: 'react-query-devtools',
   preset: '../../jest-preset.js',
+  moduleNameMapper: reactModulesByVersion,
   setupFilesAfterEnv: ['./jest.setup.ts'],
 }

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

@@ -5,35 +5,3 @@ import { notifyManager } from '@tanstack/query-core'
 notifyManager.setNotifyFunction((fn) => {
   act(fn)
 })
-
-type ReactVersion = '18' | '17'
-
-jest.mock('react', () => {
-  const packages = {
-    '18': 'react',
-    '17': 'react-17',
-  }
-  const version = (process.env.REACTJS_VERSION || '18') as ReactVersion
-
-  return jest.requireActual(packages[version]!)
-})
-
-jest.mock('react-dom', () => {
-  const packages = {
-    '18': 'react-dom',
-    '17': 'react-dom-17',
-  }
-  const version = (process.env.REACTJS_VERSION || '18') as ReactVersion
-
-  return jest.requireActual(packages[version])
-})
-
-jest.mock('@testing-library/react', () => {
-  const packages = {
-    '18': '@testing-library/react',
-    '17': '@testing-library/react-17',
-  }
-  const version = (process.env.REACTJS_VERSION || '18') as ReactVersion
-
-  return jest.requireActual(packages[version])
-})

packages/react-query-devtools/package.json

@@ -50,13 +50,15 @@
     "build:types": "tsc --build && cp build/lib/index.d.ts build/lib/index.prod.d.ts"
   },
   "devDependencies": {
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "@types/use-sync-external-store": "^0.0.3",
-    "react": "^18.2.0",
+    "react": "^19.1.1",
     "react-17": "npm:react@^17.0.2",
-    "react-dom": "^18.2.0",
+    "react-18": "npm:react@^18.2.0",
+    "react-dom": "^19.1.1",
     "react-dom-17": "npm:react-dom@^17.0.2",
+    "react-dom-18": "npm:react-dom@^18.2.0",
     "react-error-boundary": "^3.1.4",
     "@tanstack/react-query": "workspace:*"
   },
@@ -66,8 +68,8 @@
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "@tanstack/react-query": "workspace:^"
   }
 }

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

@@ -188,7 +188,7 @@ type Entry = {
 }
 
 type RendererProps = {
-  handleEntry: (entry: Entry) => JSX.Element
+  handleEntry: (entry: Entry) => React.JSX.Element
   label?: string
   value: unknown
   subEntries: Entry[]
@@ -220,7 +220,7 @@ export function chunkArray<T>(array: T[], size: number): T[][] {
   return result
 }
 
-type Renderer = (props: RendererProps) => JSX.Element
+type Renderer = (props: RendererProps) => React.JSX.Element
 
 export const DefaultRenderer: Renderer = ({
   handleEntry,

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

@@ -931,7 +931,7 @@ describe('ReactQueryDevtools', () => {
       paddingRight: '20%',
     }
 
-    function Parent({ children }: { children: React.ReactElement }) {
+    function Parent({ children }: { children: React.ReactNode }) {
       return (
         <div data-testid={parentElementTestid} style={parentPaddings}>
           {children}

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

@@ -1,5 +1,26 @@
+const reactVersion = (process.env.REACTJS_VERSION || '19') as '17' | '18' | '19'
+const reactModulesByVersion = {
+  '17': {
+    '^react((\\/.*)?)$': 'react-17$1',
+    '^react-dom/client((\\/.*)?)$': 'react-dom-17$1',
+    '^react-dom((\\/.*)?)$': 'react-dom-17$1',
+    '^@testing-library/react': '@testing-library/react-17',
+  },
+  '18': {
+    '^react((\\/.*)?)$': 'react-18$1',
+    '^react-dom((\\/.*)?)$': 'react-dom-18$1',
+    '^@testing-library/react': '@testing-library/react-18',
+  },
+  '19': {
+    '^react((\\/.*)?)$': 'react$1',
+    '^react-dom((\\/.*)?)$': 'react-dom$1',
+    '^@testing-library/react': '@testing-library/react',
+  },
+}[reactVersion]
+
 export default {
   displayName: 'react-query-persist-client',
   preset: '../../jest-preset.js',
+  moduleNameMapper: reactModulesByVersion,
   setupFilesAfterEnv: ['./jest.setup.ts'],
 }

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

@@ -5,35 +5,3 @@ import { notifyManager } from '@tanstack/react-query'
 notifyManager.setNotifyFunction((fn) => {
   act(fn)
 })
-
-type ReactVersion = '18' | '17'
-
-jest.mock('react', () => {
-  const packages = {
-    '18': 'react',
-    '17': 'react-17',
-  }
-  const version = (process.env.REACTJS_VERSION || '18') as ReactVersion
-
-  return jest.requireActual(packages[version]!)
-})
-
-jest.mock('react-dom', () => {
-  const packages = {
-    '18': 'react-dom',
-    '17': 'react-dom-17',
-  }
-  const version = (process.env.REACTJS_VERSION || '18') as ReactVersion
-
-  return jest.requireActual(packages[version])
-})
-
-jest.mock('@testing-library/react', () => {
-  const packages = {
-    '18': '@testing-library/react',
-    '17': '@testing-library/react-17',
-  }
-  const version = (process.env.REACTJS_VERSION || '18') as ReactVersion
-
-  return jest.requireActual(packages[version])
-})

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

@@ -40,11 +40,13 @@
     "build:types": "tsc --build"
   },
   "devDependencies": {
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
-    "react": "^18.2.0",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "react": "^19.1.1",
     "react-17": "npm:react@^17.0.2",
-    "react-dom": "^18.2.0",
+    "react-18": "npm:react@^18.2.0",
+    "react-dom": "^19.1.1",
+    "react-dom-18": "npm:react-dom@^18.2.0",
     "react-dom-17": "npm:react-dom@^17.0.2",
     "@tanstack/react-query": "workspace:*"
   },

packages/react-query-persist-client/src/PersistQueryClientProvider.tsx

@@ -20,7 +20,7 @@ export const PersistQueryClientProvider = ({
   persistOptions,
   onSuccess,
   ...props
-}: PersistQueryClientProviderProps): JSX.Element => {
+}: PersistQueryClientProviderProps): React.JSX.Element => {
   const [isRestoring, setIsRestoring] = React.useState(true)
   const refs = React.useRef({ persistOptions, onSuccess })
   const didRestore = React.useRef(false)

packages/react-query/jest.config.ts

@@ -1,6 +1,27 @@
+const reactVersion = (process.env.REACTJS_VERSION || '19') as '17' | '18' | '19'
+const reactModulesByVersion = {
+  '17': {
+    '^react((\\/.*)?)$': 'react-17$1',
+    '^react-dom/client((\\/.*)?)$': 'react-dom-17$1',
+    '^react-dom((\\/.*)?)$': 'react-dom-17$1',
+    '^@testing-library/react': '@testing-library/react-17',
+  },
+  '18': {
+    '^react((\\/.*)?)$': 'react-18$1',
+    '^react-dom((\\/.*)?)$': 'react-dom-18$1',
+    '^@testing-library/react': '@testing-library/react-18',
+  },
+  '19': {
+    '^react((\\/.*)?)$': 'react$1',
+    '^react-dom((\\/.*)?)$': 'react-dom$1',
+    '^@testing-library/react': '@testing-library/react',
+  },
+}[reactVersion]
+
 export default {
   displayName: 'react-query',
   preset: '../../jest-preset.js',
+  moduleNameMapper: reactModulesByVersion,
   setupFilesAfterEnv: ['./jest.setup.ts'],
   testMatch: ['<rootDir>/src/**/*.test.tsx', '<rootDir>/codemods/**/*.test.js'],
 }

packages/react-query/jest.setup.ts

@@ -5,35 +5,3 @@ import { notifyManager } from '@tanstack/query-core'
 notifyManager.setNotifyFunction((fn) => {
   act(fn)
 })
-
-type ReactVersion = '18' | '17'
-
-jest.mock('react', () => {
-  const packages = {
-    '18': 'react',
-    '17': 'react-17',
-  }
-  const version = (process.env.REACTJS_VERSION || '18') as ReactVersion
-
-  return jest.requireActual(packages[version]!)
-})
-
-jest.mock('react-dom', () => {
-  const packages = {
-    '18': 'react-dom',
-    '17': 'react-dom-17',
-  }
-  const version = (process.env.REACTJS_VERSION || '18') as ReactVersion
-
-  return jest.requireActual(packages[version])
-})
-
-jest.mock('@testing-library/react', () => {
-  const packages = {
-    '18': '@testing-library/react',
-    '17': '@testing-library/react-17',
-  }
-  const version = (process.env.REACTJS_VERSION || '18') as ReactVersion
-
-  return jest.requireActual(packages[version])
-})

packages/react-query/package.json

@@ -47,13 +47,15 @@
   ],
   "devDependencies": {
     "@types/jscodeshift": "^0.11.3",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "@types/use-sync-external-store": "^0.0.3",
-    "react": "^18.2.0",
+    "react": "^19.1.1",
     "react-17": "npm:react@^17.0.2",
-    "react-dom": "^18.2.0",
+    "react-18": "npm:react@^18.2.0",
+    "react-dom": "^19.1.1",
     "react-dom-17": "npm:react-dom@^17.0.2",
+    "react-dom-18": "npm:react-dom@^18.2.0",
     "jscodeshift": "^0.13.1",
     "react-error-boundary": "^3.1.4"
   },
@@ -62,8 +64,8 @@
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-native": "*"
   },
   "peerDependenciesMeta": {

packages/react-query/src/QueryClientProvider.tsx

@@ -73,7 +73,7 @@ export const QueryClientProvider = ({
   children,
   context,
   contextSharing = false,
-}: QueryClientProviderProps): JSX.Element => {
+}: QueryClientProviderProps): React.JSX.Element => {
   React.useEffect(() => {
     client.mount()
     return () => {