[wbt.react18.updates.2] Update data and core packages to use renderHo…

…okStatic (#2268) ## Summary: This is a pre-cursor change to the React 18 work. Here we migrate any uses of `@testing-library/react-hooks/server` imports to use our own `renderHookStatic` function. It's not quite a drop-in replacement, but good enough. Issue: WB-1730 ## Test plan: `yarn jest` Author: somewhatabstract Reviewers: jandrade Required Reviewers: Approved By: jandrade Checks: ⌛ Test (ubuntu-latest, 20.x, 2/2), ⌛ Check build sizes (ubuntu-latest, 20.x), ⌛ Test (ubuntu-latest, 20.x, 1/2), ⌛ Lint (ubuntu-latest, 20.x), ⌛ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ⌛ Publish npm snapshot (ubuntu-latest, 20.x), ⌛ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ⏭️ dependabot Pull Request URL: #2268
Khan · Jul 12, 2024 · eab37b8 · eab37b8
1 parent 2a6c85d
commit eab37b8
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 42 deletions.
diff --git a/.changeset/metal-cooks-laugh.md b/.changeset/metal-cooks-laugh.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/pretty-mangos-invite.md b/.changeset/pretty-mangos-invite.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/wonder-blocks-core": patch
+"@khanacademy/wonder-blocks-data": patch
+---
+
+Test file changes only. No external changes at all.
diff --git a/packages/wonder-blocks-core/package.json b/packages/wonder-blocks-core/package.json
@@ -23,7 +23,8 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "^1.0.0"
+    "@khanacademy/wb-dev-build-settings": "^1.0.0",
+    "@khanacademy/wonder-blocks-testing-core": "^0.0.1"
   },
   "author": "",
   "license": "MIT"

diff --git a/packages/wonder-blocks-core/src/hooks/__tests__/use-render-state.test.tsx b/packages/wonder-blocks-core/src/hooks/__tests__/use-render-state.test.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import {renderHook as renderHookOnServer} from "@testing-library/react-hooks/server";
+import {renderHookStatic} from "@khanacademy/wonder-blocks-testing-core";
 import {renderHook} from "@testing-library/react-hooks";
 
 import {useRenderState} from "../use-render-state";
@@ -14,7 +14,7 @@ describe("useRenderState", () => {
         );
 
         // Act
-        const {result} = renderHookOnServer(() => useRenderState(), {
+        const {result} = renderHookStatic(() => useRenderState(), {
             wrapper,
         });
 

diff --git a/packages/wonder-blocks-core/src/hooks/__tests__/use-unique-id.test.tsx b/packages/wonder-blocks-core/src/hooks/__tests__/use-unique-id.test.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import {render} from "@testing-library/react";
-import {renderHook} from "@testing-library/react-hooks/server";
+import {renderHookStatic} from "@khanacademy/wonder-blocks-testing-core";
 
 import SsrIDFactory from "../../util/ssr-id-factory";
 import UniqueIDFactory from "../../util/unique-id-factory";
@@ -15,7 +15,7 @@ describe("useUniqueIdWithoutMock", () => {
         );
 
         // Act
-        const {result} = renderHook(() => useUniqueIdWithoutMock(), {
+        const {result} = renderHookStatic(() => useUniqueIdWithoutMock(), {
             wrapper,
         });
 
@@ -93,13 +93,12 @@ describe("useUniqueIdWithoutMock", () => {
         // Arrange
 
         // Act
-        const {result} = renderHook(() => useUniqueIdWithoutMock());
+        const underTest = () =>
+            renderHookStatic(() => useUniqueIdWithoutMock());
 
         // Assert
-        expect(result.error).toEqual(
-            new Error(
-                "Components using useUniqueIdWithoutMock() should be descendants of <RenderStateRoot>",
-            ),
+        expect(underTest).toThrowErrorMatchingInlineSnapshot(
+            `"Components using useUniqueIdWithoutMock() should be descendants of <RenderStateRoot>"`,
         );
     });
 
@@ -140,7 +139,9 @@ describe("useUniqueIdWithMock", () => {
         );
 
         // Act
-        const {result} = renderHook(() => useUniqueIdWithMock(), {wrapper});
+        const {result} = renderHookStatic(() => useUniqueIdWithMock(), {
+            wrapper,
+        });
 
         // Assert
         expect(result.current).toBe(SsrIDFactory);
@@ -216,13 +217,12 @@ describe("useUniqueIdWithMock", () => {
         // Arrange
 
         // Act
-        const {result} = renderHook(() => useUniqueIdWithMock());
+        const underTest = () =>
+            renderHookStatic(() => useUniqueIdWithoutMock());
 
         // Assert
-        expect(result.error).toEqual(
-            new Error(
-                "Components using useUniqueIdWithMock() should be descendants of <RenderStateRoot>",
-            ),
+        expect(underTest).toThrowErrorMatchingInlineSnapshot(
+            `"Components using useUniqueIdWithoutMock() should be descendants of <RenderStateRoot>"`,
         );
     });
 

diff --git a/packages/wonder-blocks-core/tsconfig-build.json b/packages/wonder-blocks-core/tsconfig-build.json
@@ -5,5 +5,7 @@
         "outDir": "./dist",
         "rootDir": "src",
     },
-    "references": []
+    "references": [
+        {"path": "../wonder-blocks-testing-core/tsconfig-build.json"}
+    ]
 }
diff --git a/packages/wonder-blocks-data/package.json b/packages/wonder-blocks-data/package.json
@@ -22,7 +22,8 @@
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "^1.0.0",
-    "@khanacademy/wonder-stuff-testing": "^3.0.1"
+    "@khanacademy/wonder-stuff-testing": "^3.0.1",
+    "@khanacademy/wonder-blocks-testing-core": "^0.0.1"
   },
   "author": "",
   "license": "MIT"

diff --git a/packages/wonder-blocks-data/src/hooks/__tests__/use-cached-effect.test.tsx b/packages/wonder-blocks-data/src/hooks/__tests__/use-cached-effect.test.tsx
@@ -3,7 +3,7 @@ import {
     renderHook as clientRenderHook,
     act,
 } from "@testing-library/react-hooks";
-import {renderHook as serverRenderHook} from "@testing-library/react-hooks/server";
+import {renderHookStatic} from "@khanacademy/wonder-blocks-testing-core";
 import {render, act as reactAct} from "@testing-library/react";
 import {values} from "@khanacademy/wonder-stuff-core";
 
@@ -66,7 +66,7 @@ describe("#useCachedEffect", () => {
             const fakeHandler = jest.fn();
 
             // Act
-            serverRenderHook(() => useCachedEffect("ID", fakeHandler));
+            renderHookStatic(() => useCachedEffect("ID", fakeHandler));
 
             // Assert
             expect(useRequestInterceptSpy).toHaveBeenCalledWith(
@@ -89,7 +89,7 @@ describe("#useCachedEffect", () => {
                 );
 
                 // Act
-                serverRenderHook(() =>
+                renderHookStatic(() =>
                     useCachedEffect("ID", fakeHandler, {scope}),
                 );
 
@@ -108,7 +108,7 @@ describe("#useCachedEffect", () => {
                 const fakeHandler = jest.fn().mockResolvedValue("data");
 
                 // Act
-                serverRenderHook(() =>
+                renderHookStatic(() =>
                     useCachedEffect("ID", fakeHandler, {fetchPolicy}),
                 );
 
@@ -129,7 +129,7 @@ describe("#useCachedEffect", () => {
                         result: {
                             current: [result],
                         },
-                    } = serverRenderHook(() =>
+                    } = renderHookStatic(() =>
                         useCachedEffect("ID", fakeHandler, {fetchPolicy}),
                     );
 
@@ -149,7 +149,7 @@ describe("#useCachedEffect", () => {
                     result: {
                         current: [result],
                     },
-                } = serverRenderHook(() =>
+                } = renderHookStatic(() =>
                     useCachedEffect("ID", fakeHandler, {
                         fetchPolicy: FetchPolicy.CacheOnly,
                     }),
@@ -177,7 +177,7 @@ describe("#useCachedEffect", () => {
                         result: {
                             current: [result],
                         },
-                    } = serverRenderHook(() =>
+                    } = renderHookStatic(() =>
                         useCachedEffect("ID", fakeHandler, {fetchPolicy}),
                     );
 
@@ -201,7 +201,7 @@ describe("#useCachedEffect", () => {
                     result: {
                         current: [result],
                     },
-                } = serverRenderHook(() =>
+                } = renderHookStatic(() =>
                     useCachedEffect("ID", fakeHandler, {
                         fetchPolicy: FetchPolicy.NetworkOnly,
                     }),

diff --git a/packages/wonder-blocks-data/src/hooks/__tests__/use-hydratable-effect.test.ts b/packages/wonder-blocks-data/src/hooks/__tests__/use-hydratable-effect.test.ts
@@ -3,7 +3,7 @@ import {
     renderHook as clientRenderHook,
     act,
 } from "@testing-library/react-hooks";
-import {renderHook as serverRenderHook} from "@testing-library/react-hooks/server";
+import {renderHookStatic} from "@khanacademy/wonder-blocks-testing-core";
 
 import {Server} from "@khanacademy/wonder-blocks-core";
 import {Status} from "../../util/status";
@@ -65,7 +65,7 @@ describe("#useHydratableEffect", () => {
             const fakeHandler = jest.fn();
 
             // Act
-            serverRenderHook(() => useHydratableEffect("ID", fakeHandler));
+            renderHookStatic(() => useHydratableEffect("ID", fakeHandler));
 
             // Assert
             expect(useRequestInterceptSpy).toHaveBeenCalledWith(
@@ -91,7 +91,7 @@ describe("#useHydratableEffect", () => {
                 const fakeHandler = jest.fn();
 
                 // Act
-                serverRenderHook(() =>
+                renderHookStatic(() =>
                     useHydratableEffect("ID", fakeHandler, {
                         clientBehavior,
                     }),
@@ -123,7 +123,7 @@ describe("#useHydratableEffect", () => {
                 );
 
                 // Act
-                serverRenderHook(() =>
+                renderHookStatic(() =>
                     useHydratableEffect("ID", fakeHandler, {scope}),
                 );
 
@@ -141,7 +141,7 @@ describe("#useHydratableEffect", () => {
             const fakeHandler = jest.fn().mockResolvedValue("data");
 
             // Act
-            serverRenderHook(() => useHydratableEffect("ID", fakeHandler));
+            renderHookStatic(() => useHydratableEffect("ID", fakeHandler));
 
             // Assert
             expect(fakeHandler).not.toHaveBeenCalled();
@@ -155,7 +155,7 @@ describe("#useHydratableEffect", () => {
                 // Act
                 const {
                     result: {current: result},
-                } = serverRenderHook(() =>
+                } = renderHookStatic(() =>
                     useHydratableEffect("ID", fakeHandler),
                 );
 
@@ -176,7 +176,7 @@ describe("#useHydratableEffect", () => {
                 // Act
                 const {
                     result: {current: result},
-                } = serverRenderHook(() =>
+                } = renderHookStatic(() =>
                     useHydratableEffect("ID", fakeHandler),
                 );
 

diff --git a/packages/wonder-blocks-data/src/hooks/__tests__/use-server-effect.test.ts b/packages/wonder-blocks-data/src/hooks/__tests__/use-server-effect.test.ts
@@ -1,5 +1,5 @@
 import {renderHook as clientRenderHook} from "@testing-library/react-hooks";
-import {renderHook as serverRenderHook} from "@testing-library/react-hooks/server";
+import {renderHookStatic} from "@khanacademy/wonder-blocks-testing-core";
 
 import {Server} from "@khanacademy/wonder-blocks-core";
 
@@ -43,7 +43,7 @@ describe("#useServerEffect", () => {
         const fakeHandler = jest.fn();
 
         // Act
-        serverRenderHook(() => useServerEffect("ID", fakeHandler));
+        renderHookStatic(() => useServerEffect("ID", fakeHandler));
 
         // Assert
         expect(useRequestInterceptSpy).toHaveBeenCalledWith("ID", fakeHandler);
@@ -61,7 +61,7 @@ describe("#useServerEffect", () => {
             // Act
             const {
                 result: {current: result},
-            } = serverRenderHook(() => useServerEffect("ID", fakeHandler));
+            } = renderHookStatic(() => useServerEffect("ID", fakeHandler));
 
             // Assert
             expect(result).toBeNull();
@@ -76,7 +76,7 @@ describe("#useServerEffect", () => {
             );
 
             // Act
-            serverRenderHook(() => useServerEffect("ID", fakeHandler));
+            renderHookStatic(() => useServerEffect("ID", fakeHandler));
 
             // Assert
             expect(fulfillRequestSpy).not.toHaveBeenCalled();
@@ -96,7 +96,7 @@ describe("#useServerEffect", () => {
             );
 
             // Act
-            serverRenderHook(() => useServerEffect("ID", fakeHandler), {
+            renderHookStatic(() => useServerEffect("ID", fakeHandler), {
                 wrapper: TrackData,
             });
 
@@ -122,7 +122,7 @@ describe("#useServerEffect", () => {
             );
 
             // Act
-            serverRenderHook(
+            renderHookStatic(
                 () => useServerEffect("ID", fakeHandler, {skip: true}),
                 {
                     wrapper: TrackData,
@@ -151,7 +151,7 @@ describe("#useServerEffect", () => {
             );
 
             // Act
-            serverRenderHook(() => useServerEffect("ID", fakeHandler), {
+            renderHookStatic(() => useServerEffect("ID", fakeHandler), {
                 wrapper: TrackData,
             });
 
@@ -170,7 +170,7 @@ describe("#useServerEffect", () => {
             // Act
             const {
                 result: {current: result},
-            } = serverRenderHook(() => useServerEffect("ID", fakeHandler));
+            } = renderHookStatic(() => useServerEffect("ID", fakeHandler));
 
             // Assert
             expect(result).toEqual({status: "success", data: "DATA"});
@@ -186,7 +186,7 @@ describe("#useServerEffect", () => {
             // Act
             const {
                 result: {current: result},
-            } = serverRenderHook(() => useServerEffect("ID", fakeHandler));
+            } = renderHookStatic(() => useServerEffect("ID", fakeHandler));
 
             // Assert
             expect(result).toEqual({

diff --git a/packages/wonder-blocks-data/tsconfig-build.json b/packages/wonder-blocks-data/tsconfig-build.json
@@ -7,5 +7,6 @@
     },
     "references": [
         {"path": "../wonder-blocks-core/tsconfig-build.json"},
+        {"path": "../wonder-blocks-testing-core/tsconfig-build.json"}
     ]
 }