chore(workspace): Bump react-related libraries

package.json

@@ -39,18 +39,11 @@
         "react-native"
       ],
       "allowedVersions": {
-        "react": "17",
-        "react-dom": "17",
-        "react-is": "17",
         "styled-components": "5"
       }
     },
     "overrides": {
-      "@types/react": "^17.0.39",
       "graphql": "^16.6.0",
-      "react": "^17.0.2",
-      "react-dom": "^17.0.2",
-      "react-is": "^17.0.2",
       "styled-components": "^5.2.3",
       "wonka": "^6.3.2"
     }

packages/next-urql/package.json

@@ -49,8 +49,8 @@
   "devDependencies": {
     "@urql/core": "workspace:*",
     "urql": "workspace:*",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
+    "@types/react": "^18.3.8",
+    "@types/react-dom": "^18.3.0",
     "graphql": "^16.0.0",
     "next": "^13.0.0",
     "react": "^18.0.0",

packages/next-urql/src/DataHydrationContext.ts

@@ -44,7 +44,9 @@ export const DataHydrationContextProvider = ({
 
 export function useDataHydrationContext(): DataHydrationValue | undefined {
   const dataHydrationContext = React.useContext(DataHydrationContext);
-  const insertHtml = React.useContext(ServerInsertedHTMLContext);
+  const insertHtml = React.useContext(ServerInsertedHTMLContext as any) as (
+    cb: () => any
+  ) => any;
 
   if (typeof window !== 'undefined') return;
 

packages/react-urql/package.json

@@ -42,19 +42,18 @@
   },
   "devDependencies": {
     "@cypress/react": "^8.0.2",
-    "@cypress/vite-dev-server": "^5.0.4",
-    "@testing-library/react": "^11.1.1",
-    "@testing-library/react-hooks": "^5.1.2",
-    "@types/react": "^17.0.4",
+    "@cypress/vite-dev-server": "^5.2.0",
+    "@testing-library/react": "^16.0.1",
+    "@types/react": "^18.3.8",
     "@types/react-test-renderer": "^17.0.1",
     "@urql/core": "workspace:*",
     "cypress": "^13.14.0",
     "graphql": "^16.6.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-is": "^17.0.1",
-    "react-ssr-prepass": "^1.1.2",
-    "react-test-renderer": "^17.0.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
+    "react-ssr-prepass": "^1.5.0",
+    "react-test-renderer": "^18.3.1"
   },
   "peerDependencies": {
     "@urql/core": "^5.0.0",

packages/react-urql/src/components/Query.test.tsx

@@ -9,7 +9,7 @@ vi.mock('../context', async () => {
   const mock = {
     executeQuery: vi.fn(() =>
       pipe(
-        interval(200),
+        interval(150),
         map((i: number) => ({ data: i, error: i + 1 }))
       )
     ),

packages/react-urql/src/hooks/useMutation.test.tsx

@@ -1,3 +1,5 @@
+// @vitest-environment jsdom
+
 import { vi, expect, it, beforeEach, describe, Mock } from 'vitest';
 
 // Note: Testing for hooks is not yet supported in Enzyme - https://github.com/airbnb/enzyme/issues/2011

packages/react-urql/src/hooks/useQuery.spec.ts

@@ -1,4 +1,6 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+// @vitest-environment jsdom
+
+import { renderHook, act } from '@testing-library/react';
 import { interval, map, pipe } from 'wonka';
 import { RequestPolicy } from '@urql/core';
 import { vi, expect, it, beforeEach, describe, beforeAll, Mock } from 'vitest';
@@ -87,22 +89,18 @@ describe('useQuery', () => {
   });
 
   it('should execute the subscription', async () => {
-    const { waitForNextUpdate } = renderHook(
-      ({ query, variables }) => useQuery({ query, variables }),
-      { initialProps: { query: mockQuery, variables: mockVariables } }
-    );
+    renderHook(({ query, variables }) => useQuery({ query, variables }), {
+      initialProps: { query: mockQuery, variables: mockVariables },
+    });
 
-    await waitForNextUpdate();
     expect(client.executeQuery).toBeCalledTimes(1);
   });
 
   it('should pass query and variables to executeQuery', async () => {
-    const { waitForNextUpdate } = renderHook(
-      ({ query, variables }) => useQuery({ query, variables }),
-      { initialProps: { query: mockQuery, variables: mockVariables } }
-    );
+    renderHook(({ query, variables }) => useQuery({ query, variables }), {
+      initialProps: { query: mockQuery, variables: mockVariables },
+    });
 
-    await waitForNextUpdate();
     expect(client.executeQuery).toBeCalledTimes(1);
     expect(client.executeQuery).toBeCalledWith(
       {
@@ -117,12 +115,12 @@ describe('useQuery', () => {
   });
 
   it('should return data from executeQuery', async () => {
-    const { result, waitForNextUpdate } = renderHook(
+    const { result } = renderHook(
       ({ query, variables }) => useQuery({ query, variables }),
       { initialProps: { query: mockQuery, variables: mockVariables } }
     );
 
-    await waitForNextUpdate();
+    await new Promise(res => setTimeout(res, 30));
     const [state] = result.current;
     expect(state).toEqual({
       fetching: false,
@@ -134,14 +132,13 @@ describe('useQuery', () => {
   });
 
   it('should update if a new query is received', async () => {
-    const { rerender, waitForNextUpdate } = renderHook<
-      { query: string; variables?: object },
-      {}
+    const { rerender } = renderHook<
+      any,
+      { query: string; variables: { id?: number } }
     >(({ query, variables }) => useQuery({ query, variables }), {
       initialProps: { query: mockQuery, variables: mockVariables },
     });
 
-    await waitForNextUpdate();
     expect(client.executeQuery).toBeCalledTimes(1);
 
     const newQuery = `
@@ -151,7 +148,7 @@ describe('useQuery', () => {
       }
     `;
 
-    rerender({ query: newQuery });
+    rerender({ query: newQuery, variables: {} });
     expect(client.executeQuery).toBeCalledTimes(2);
     expect(client.executeQuery).toHaveBeenNthCalledWith(
       2,
@@ -167,14 +164,13 @@ describe('useQuery', () => {
   });
 
   it('should update if new variables are received', async () => {
-    const { rerender, waitForNextUpdate } = renderHook<
-      { query: string; variables: object },
-      {}
-    >(({ query, variables }) => useQuery({ query, variables }), {
-      initialProps: { query: mockQuery, variables: mockVariables },
-    });
+    const { rerender } = renderHook(
+      ({ query, variables }) => useQuery({ query, variables }),
+      {
+        initialProps: { query: mockQuery, variables: mockVariables },
+      }
+    );
 
-    await waitForNextUpdate();
     expect(client.executeQuery).toBeCalledTimes(1);
 
     const newVariables = {
@@ -197,22 +193,21 @@ describe('useQuery', () => {
   });
 
   it('should not update if query and variables are unchanged', async () => {
-    const { rerender, waitForNextUpdate } = renderHook(
+    const { rerender } = renderHook(
       ({ query, variables }) => useQuery({ query, variables }),
       {
         initialProps: { query: mockQuery, variables: mockVariables },
       }
     );
 
-    await waitForNextUpdate();
     expect(client.executeQuery).toBeCalledTimes(1);
 
     rerender({ query: mockQuery, variables: mockVariables });
     expect(client.executeQuery).toBeCalledTimes(1);
   });
 
   it('should update if a new requestPolicy is provided', async () => {
-    const { rerender, waitForNextUpdate } = renderHook(
+    const { rerender } = renderHook(
       ({ query, variables, requestPolicy }) =>
         useQuery({ query, variables, requestPolicy }),
       {
@@ -224,7 +219,6 @@ describe('useQuery', () => {
       }
     );
 
-    await waitForNextUpdate();
     expect(client.executeQuery).toBeCalledTimes(1);
     expect(client.executeQuery).toHaveBeenNthCalledWith(
       1,
@@ -258,17 +252,15 @@ describe('useQuery', () => {
   });
 
   it('should provide an executeQuery function to be imperatively executed', async () => {
-    const { result, waitForNextUpdate } = renderHook(
+    const { result } = renderHook(
       ({ query, variables }) => useQuery({ query, variables }),
       { initialProps: { query: mockQuery, variables: mockVariables } }
     );
 
-    await waitForNextUpdate();
     expect(client.executeQuery).toBeCalledTimes(1);
 
     const [, executeQuery] = result.current;
     act(() => executeQuery());
-    await waitForNextUpdate();
     expect(client.executeQuery).toBeCalledTimes(2);
   });
 
@@ -288,8 +280,11 @@ describe('useQuery', () => {
   });
 
   it('should pause executing the query if pause updates to true', async () => {
-    const { rerender, waitForNextUpdate } = renderHook(
-      ({ query, variables, pause }) => useQuery({ query, variables, pause }),
+    const { rerender } = renderHook(
+      props => {
+        const { query, variables, pause } = props;
+        return useQuery({ query, variables, pause });
+      },
       {
         initialProps: {
           query: mockQuery,
@@ -299,7 +294,6 @@ describe('useQuery', () => {
       }
     );
 
-    await waitForNextUpdate();
     expect(client.executeQuery).toBeCalledTimes(1);
 
     rerender({ query: mockQuery, variables: mockVariables, pause: true });

packages/react-urql/src/hooks/useQuery.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { vi, expect, it, beforeEach, describe, Mock } from 'vitest';
 
 // Note: Testing for hooks is not yet supported in Enzyme - https://github.com/airbnb/enzyme/issues/2011

packages/react-urql/src/hooks/useRequest.test.ts

@@ -1,5 +1,6 @@
+// @vitest-environment jsdom
 import { gql } from '@urql/core';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { it, expect } from 'vitest';
 import { useRequest } from './useRequest';
 

packages/react-urql/src/hooks/useSubscription.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { vi, expect, it, beforeEach, describe, Mock } from 'vitest';
 
 // Note: Testing for hooks is not yet supported in Enzyme - https://github.com/airbnb/enzyme/issues/2011

packages/react-urql/vitest.config.ts

@@ -1,4 +1,8 @@
 import { mergeConfig } from 'vitest/config';
 import baseConfig from '../../vitest.config';
 
-export default mergeConfig(baseConfig, {});
+export default mergeConfig(baseConfig, {
+  test: {
+    environment: 'jsdom',
+  },
+});