WB-1670: Update Web Wonder Blocks to use React v18

package.json

@@ -64,19 +64,18 @@
     "@storybook/test": "^8.2.1",
     "@swc-node/register": "^1.6.5",
     "@swc/core": "^1.3.36",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^15.0.6",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
     "@types/jscodeshift": "^0.11.11",
     "@types/node": "^18.14.1",
     "@types/node-fetch": "^2.6.11",
-    "@types/react": "16",
-    "@types/react-dom": "16",
+    "@types/react": "~18.2.64",
+    "@types/react-dom": "~18.2.19",
     "@types/react-router": "5",
-    "@types/react-router-dom": "5",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-window": "^1.8.5",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
@@ -98,7 +97,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-testing-library": "^5.0.0",
+    "eslint-plugin-testing-library": "^6.3.0",
     "eslint-watch": "^8.0.0",
     "fast-glob": "^3.2.12",
     "ignore": "^5.3.2",
@@ -116,7 +115,7 @@
     "rollup-plugin-node-externals": "^7.1.2",
     "storybook": "^8.2.1",
     "storybook-addon-pseudo-states": "^3.1.1",
-    "typescript": "^4.9.5",
+    "typescript": "5.1.6",
     "typescript-coverage-report": "^0.7.0",
     "vite": "^4.4.8",
     "vite-plugin-turbosnap": "^1.0.2"
@@ -129,11 +128,11 @@
     "aphrodite": "^1.2.5",
     "moment": "2.29.4",
     "node-fetch": "^2.6.7",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-popper": "^2.3.0",
-    "react-router": "5.2.1",
-    "react-router-dom": "5.3.0",
+    "react-router": "5.3.4",
+    "react-router-dom": "5.3.4",
     "react-window": "^1.8.7"
   },
   "workspaces": [
@@ -144,10 +143,9 @@
   "resolutions": {
     "@figspec/components": "^2.0.4",
     "@testing-library/dom": "^8.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.5.1",
-    "@types/react": "16",
-    "@types/react-dom": "16",
+    "@types/react": "18.2.79",
+    "@types/react-dom": "18.2.25",
     "strip-ansi": "6.0.1",
     "strip-ansi-explanation": "There's an issue with strip-ansi v7 which causes conflicts with the Khan/changeset-per-package action"
   }

packages/wonder-blocks-accordion/package.json

@@ -25,7 +25,7 @@
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
     "aphrodite": "^1.2.5",
-    "react": "16.14.0"
+    "react": "^18.2.0"
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "^1.0.1"

packages/wonder-blocks-banner/package.json

@@ -27,7 +27,7 @@
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
     "aphrodite": "^1.2.5",
-    "react": "16.14.0"
+    "react": "^18.2.0"
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "^1.0.1"

packages/wonder-blocks-birthday-picker/package.json

@@ -25,7 +25,7 @@
     "@phosphor-icons/core": "^2.0.2",
     "aphrodite": "^1.2.5",
     "moment": "^2.24.0",
-    "react": "16.14.0"
+    "react": "^18.2.0"
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "^1.0.1"

packages/wonder-blocks-breadcrumbs/package.json

@@ -21,7 +21,7 @@
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "react": "16.14.0"
+    "react": "^18.2.0"
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "^1.0.1"

packages/wonder-blocks-button/package.json

@@ -26,9 +26,9 @@
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "react": "16.14.0",
-    "react-router": "5.2.1",
-    "react-router-dom": "5.3.0"
+    "react": "^18.2.0",
+    "react-router": "5.3.4",
+    "react-router-dom": "5.3.4"
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "^1.0.1"

packages/wonder-blocks-cell/package.json

@@ -22,7 +22,7 @@
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "react": "16.14.0"
+    "react": "^18.2.0"
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "^1.0.1"

packages/wonder-blocks-clickable/package.json

@@ -21,10 +21,10 @@
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-router": "5.2.1",
-    "react-router-dom": "5.3.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "5.3.4",
+    "react-router-dom": "5.3.4"
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "^1.0.1"

packages/wonder-blocks-core/package.json

@@ -17,10 +17,10 @@
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-router": "5.2.1",
-    "react-router-dom": "5.3.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "5.3.4",
+    "react-router-dom": "5.3.4"
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "^1.0.1",

packages/wonder-blocks-core/src/hooks/__tests__/use-force-update.test.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
-import {render, act} from "@testing-library/react";
-import {renderHook} from "@testing-library/react-hooks";
+import {render, act, renderHook, waitFor} from "@testing-library/react";
 
 import {useForceUpdate} from "../use-force-update";
 
@@ -22,7 +21,7 @@ describe("#useForceUpdate", () => {
             jest.useFakeTimers();
         });
 
-        it("should cause component to render when invoked multiple times before a render", () => {
+        it("should cause component to render when invoked multiple times before a render", async () => {
             // Arrange
             const Component = (): React.ReactElement => {
                 const countRef = React.useRef(0);
@@ -49,20 +48,21 @@ describe("#useForceUpdate", () => {
 
             // Act
             const wrapper = render(<Component />);
-            act(() => {
+            await act(() => {
                 // Advance enough for the timeout to run 4 times.
                 // Which means the component should have rendered 4 times,
                 // with one more pending for the timeout that was setup in
                 // the last render.
                 jest.advanceTimersByTime(204);
             });
-            const result = wrapper.container.textContent;
 
             // Assert
-            expect(result).toBe("4");
+            await waitFor(() => {
+                expect(wrapper.container.textContent).toBe("4");
+            });
         });
 
-        it("should cause component to render each time it is invoked after a render", () => {
+        it("should cause component to render each time it is invoked after a render", async () => {
             // Arrange
             const Component = (): React.ReactElement => {
                 const countRef = React.useRef(0);
@@ -85,10 +85,11 @@ describe("#useForceUpdate", () => {
                 // the last render.
                 jest.advanceTimersByTime(204);
             });
-            const result = wrapper.container.textContent;
 
             // Assert
-            expect(result).toBe("4");
+            await waitFor(() => {
+                expect(wrapper.container.textContent).toBe("4");
+            });
         });
 
         it("should cause a consuming hook to update without a render", async () => {
@@ -107,15 +108,15 @@ describe("#useForceUpdate", () => {
             };
 
             // Act
-            const {result, waitForNextUpdate} = renderHook(() => useTestHook());
+            const {result} = renderHook(() => useTestHook());
             const [, updateMe] = result.current;
             act(() => updateMe());
-            await waitForNextUpdate();
             act(() => updateMe());
-            await waitForNextUpdate();
 
             // Assert
-            expect(result.current[0]).toBe(2);
+            await waitFor(() => {
+                expect(result.current[0]).toBe(2);
+            });
         });
     });
 });

packages/wonder-blocks-core/src/hooks/__tests__/use-is-mounted.test.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
-import {render, screen} from "@testing-library/react";
-import {renderHook} from "@testing-library/react-hooks";
+import {render, screen, renderHook} from "@testing-library/react";
 import {renderToString} from "react-dom/server";
 
 import Server from "../../util/server";

packages/wonder-blocks-core/src/hooks/__tests__/use-latest-ref.test.ts

@@ -1,4 +1,4 @@
-import {renderHook} from "@testing-library/react-hooks";
+import {renderHook} from "@testing-library/react";
 import {useLatestRef} from "../use-latest-ref";
 
 describe("useLatestRef", () => {

packages/wonder-blocks-core/src/hooks/__tests__/use-on-mount-effect.test.ts

@@ -1,4 +1,4 @@
-import {renderHook} from "@testing-library/react-hooks";
+import {renderHook} from "@testing-library/react";
 
 import {useOnMountEffect} from "../use-on-mount-effect";
 

packages/wonder-blocks-core/src/hooks/__tests__/use-online.test.tsx

@@ -1,8 +1,7 @@
 // eslint-disable-next-line import/no-unassigned-import
 import "jest-extended";
 import * as React from "react";
-import {render, act as reactAct} from "@testing-library/react";
-import {renderHook} from "@testing-library/react-hooks";
+import {render, act as reactAct, renderHook} from "@testing-library/react";
 
 import {useOnline} from "../use-online";
 

packages/wonder-blocks-core/src/hooks/__tests__/use-pre-hydration-effect.test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {renderHook} from "@testing-library/react-hooks";
+import {renderHook} from "@testing-library/react";
 import {renderToString} from "react-dom/server";
 
 import Server from "../../util/server";

packages/wonder-blocks-core/src/hooks/__tests__/use-render-state.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import {renderHookStatic} from "@khanacademy/wonder-blocks-testing-core";
-import {renderHook} from "@testing-library/react-hooks";
+import {renderHook, waitFor} from "@testing-library/react";
 
 import {useRenderState} from "../use-render-state";
 import {RenderStateRoot} from "../../components/render-state-root";
@@ -35,22 +35,26 @@ describe("useRenderState", () => {
             });
 
             // Assert
-            expect(result.all[0]).toEqual(RenderState.Initial);
+            expect(result.current).toEqual(RenderState.Initial);
         });
 
-        test("second render returns RenderState.Standard", () => {
+        test("second render returns RenderState.Standard", async () => {
             // Arrange
             const wrapper = ({children}: any) => (
                 <RenderStateRoot>{children}</RenderStateRoot>
             );
 
-            // Act
-            const {result} = renderHook(() => useRenderState(), {
+            const {result, rerender} = renderHook(() => useRenderState(), {
                 wrapper,
             });
 
+            // Act
+            rerender();
+
             // Assert
-            expect(result.all[1]).toEqual(RenderState.Standard);
+            await waitFor(() => {
+                expect(result.current).toEqual(RenderState.Standard);
+            });
         });
     });
 });

packages/wonder-blocks-data/package.json

@@ -18,7 +18,7 @@
   },
   "peerDependencies": {
     "@khanacademy/wonder-stuff-core": "^1.2.2",
-    "react": "16.14.0"
+    "react": "^18.2.0"
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "^1.0.1",