Update to React 18

package.json

@@ -63,8 +63,8 @@
         "lint:workflows": "find .github/workflows -type f \\( -iname '*.yaml' -o -iname '*.yml' \\) | xargs -I {} sh -c 'echo \"Linting {}\"; action-validator \"{}\"'"
     },
     "resolutions": {
-        "@types/react-dom": "17.0.25",
-        "@types/react": "17.0.80",
+        "@types/react-dom": "18.3.0",
+        "@types/react": "18.3.3",
         "@types/seedrandom": "3.0.8",
         "oidc-client-ts": "3.0.1",
         "jwt-decode": "4.0.0",
@@ -81,7 +81,6 @@
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
-        "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.6.1",
         "@vector-im/compound-web": "^5.5.0",
         "@zxcvbn-ts/core": "^3.0.4",
@@ -129,10 +128,10 @@
         "posthog-js": "1.149.1",
         "qrcode": "1.5.3",
         "re-resizable": "^6.9.0",
-        "react": "17.0.2",
+        "react": "^18.3.1",
         "react-beautiful-dnd": "^13.1.0",
         "react-blurhash": "^0.3.0",
-        "react-dom": "17.0.2",
+        "react-dom": "^18.3.1",
         "react-focus-lock": "^2.5.1",
         "react-transition-group": "^4.4.1",
         "rfc4648": "^1.4.0",
@@ -165,10 +164,10 @@
         "@casualbot/jest-sonar-reporter": "2.2.7",
         "@peculiar/webcrypto": "^1.4.3",
         "@playwright/test": "^1.40.1",
-        "@testing-library/dom": "^9.0.0",
-        "@testing-library/jest-dom": "^6.0.0",
-        "@testing-library/react": "^12.1.5",
-        "@testing-library/user-event": "^14.4.3",
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/jest-dom": "^6.4.8",
+        "@testing-library/react": "^16.0.0",
+        "@testing-library/user-event": "^14.5.2",
         "@types/commonmark": "^0.27.4",
         "@types/content-type": "^1.1.5",
         "@types/counterpart": "^0.18.1",
@@ -187,9 +186,9 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "17.0.80",
+        "@types/react": "18.3.3",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "17.0.25",
+        "@types/react-dom": "18.3.0",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.11.0",
         "@types/sdp-transform": "^2.4.6",
@@ -220,8 +219,8 @@
         "glob": "^11.0.0",
         "husky": "^8.0.3",
         "jest": "^29.6.2",
+        "jest-environment-jsdom": "^29.7.0",
         "jest-canvas-mock": "^2.5.2",
-        "jest-environment-jsdom": "^29.6.2",
         "jest-mock": "^29.6.2",
         "jest-raw-loader": "^1.0.1",
         "jsqr": "^1.4.0",

src/@types/react.d.ts

@@ -21,4 +21,7 @@ declare module "react" {
     function forwardRef<T, P = {}>(
         render: (props: PropsWithChildren<P>, ref: React.ForwardedRef<T>) => React.ReactElement | null,
     ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+
+    // Fix lazy types - https://stackoverflow.com/a/71017028
+    function lazy<T extends ComponentType<any>>(factory: () => Promise<{ default: T }>): T;
 }

src/NodeAnimator.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { Key, MutableRefObject, ReactElement, ReactFragment, ReactInstance, ReactPortal } from "react";
+import React, { Key, MutableRefObject, ReactElement, ReactInstance } from "react";
 import ReactDom from "react-dom";
 
 interface IChildProps {
@@ -35,7 +35,7 @@ interface IProps {
     innerRef?: MutableRefObject<any>;
 }
 
-function isReactElement(c: ReactElement | ReactFragment | ReactPortal): c is ReactElement {
+function isReactElement(c: ReturnType<(typeof React.Children)["toArray"]>[number]): c is ReactElement {
     return typeof c === "object" && "type" in c;
 }
 
@@ -110,7 +110,8 @@ export default class NodeAnimator extends React.Component<IProps> {
     }
 
     private collectNode(k: Key, node: React.ReactInstance, restingStyle: React.CSSProperties): void {
-        if (node && this.nodes[k] === undefined && this.props.startStyles.length > 0) {
+        const key = typeof k === "bigint" ? Number(k) : k;
+        if (node && this.nodes[key] === undefined && this.props.startStyles.length > 0) {
             const startStyles = this.props.startStyles;
             const domNode = ReactDom.findDOMNode(node);
             // start from startStyle 1: 0 is the one we gave it
@@ -124,7 +125,7 @@ export default class NodeAnimator extends React.Component<IProps> {
                 this.applyStyles(domNode as HTMLElement, restingStyle);
             }, 0);
         }
-        this.nodes[k] = node;
+        this.nodes[key] = node;
 
         if (this.props.innerRef) {
             this.props.innerRef.current = node;

src/languageHandler.tsx

@@ -444,7 +444,7 @@ export function replaceByRegexes(text: string, mapping: IVariables | Tags): stri
     }
 
     if (shouldWrapInSpan) {
-        return React.createElement("span", null, ...output);
+        return React.createElement("span", null, ...(output as Array<number | string | React.ReactNode>));
     } else {
         return output.join("");
     }

test/accessibility/RovingTabIndex-test.tsx

@@ -75,6 +75,7 @@ describe("RovingTabIndex", () => {
                     </React.Fragment>
                 )}
             </RovingTabIndexProvider>,
+            { legacyRoot: true },
         );
 
         // should begin with 0th being active
@@ -143,6 +144,7 @@ describe("RovingTabIndex", () => {
                     </React.Fragment>
                 )}
             </RovingTabIndexProvider>,
+            { legacyRoot: true },
         );
 
         // should begin with 0th being active

test/components/structures/MatrixChat-test.tsx

@@ -156,7 +156,7 @@ describe("<MatrixChat />", () => {
         realQueryParams: {},
     };
     const getComponent = (props: Partial<ComponentProps<typeof MatrixChat>> = {}) =>
-        render(<MatrixChat {...defaultProps} {...props} />);
+        render(<MatrixChat {...defaultProps} {...props} />, { legacyRoot: true });
 
     // make test results readable
     filterConsole(
@@ -1380,7 +1380,6 @@ describe("<MatrixChat />", () => {
 
             it("while we are checking the sync store", async () => {
                 const rendered = getComponent({});
-                await flushPromises();
                 expect(rendered.getByTestId("spinner")).toBeInTheDocument();
 
                 // now a third session starts

test/components/structures/RoomView-test.tsx

@@ -144,6 +144,9 @@ describe("RoomView", () => {
                     wrappedRef={ref as any}
                 />
             </SDKContext.Provider>,
+            {
+                legacyRoot: true,
+            },
         );
         await flushPromises();
         return roomView;
@@ -181,6 +184,9 @@ describe("RoomView", () => {
                     onRegistered={jest.fn()}
                 />
             </SDKContext.Provider>,
+            {
+                legacyRoot: true,
+            },
         );
         await flushPromises();
         return roomView;

test/components/structures/TimelinePanel-test.tsx

@@ -211,6 +211,7 @@ describe("TimelinePanel", () => {
                     manageReadReceipts={true}
                     ref={ref}
                 />,
+                { legacyRoot: true },
             );
             await flushPromises();
             timelinePanel = ref.current!;

test/components/structures/UserMenu-test.tsx

@@ -128,7 +128,7 @@ describe("<UserMenu>", () => {
 
             const spy = jest.spyOn(defaultDispatcher, "dispatch");
             screen.getByRole("button", { name: /User menu/i }).click();
-            screen.getByRole("menuitem", { name: /Sign out/i }).click();
+            await waitFor(() => screen.getByRole("menuitem", { name: /Sign out/i }).click());
             await waitFor(() => {
                 expect(spy).toHaveBeenCalledWith({ action: "logout" });
             });
@@ -152,7 +152,7 @@ describe("<UserMenu>", () => {
 
             const spy = jest.spyOn(defaultDispatcher, "dispatch");
             screen.getByRole("button", { name: /User menu/i }).click();
-            screen.getByRole("menuitem", { name: /Sign out/i }).click();
+            await waitFor(() => screen.getByRole("menuitem", { name: /Sign out/i }).click());
             await waitFor(() => {
                 expect(spy).toHaveBeenCalledWith({ action: "logout" });
             });
@@ -178,7 +178,7 @@ describe("<UserMenu>", () => {
 
             const spy = jest.spyOn(Modal, "createDialog");
             screen.getByRole("button", { name: /User menu/i }).click();
-            screen.getByRole("menuitem", { name: /Sign out/i }).click();
+            await waitFor(() => screen.getByRole("menuitem", { name: /Sign out/i }).click());
 
             await waitFor(() => {
                 expect(spy).toHaveBeenCalledWith(LogoutDialog);

test/components/structures/auth/ForgotPassword-test.tsx

@@ -102,6 +102,7 @@ describe("<ForgotPassword>", () => {
         beforeEach(() => {
             renderResult = render(
                 <ForgotPassword serverConfig={serverConfig} onComplete={onComplete} onLoginClick={onLoginClick} />,
+                { legacyRoot: true },
             );
         });
 

test/components/structures/auth/Login-test.tsx

@@ -98,7 +98,7 @@ describe("Login", function () {
     }
 
     function getComponent(hsUrl?: string, isUrl?: string, delegatedAuthentication?: OidcClientConfig) {
-        return render(getRawComponent(hsUrl, isUrl, delegatedAuthentication));
+        return render(getRawComponent(hsUrl, isUrl, delegatedAuthentication), { legacyRoot: true });
     }
 
     it("should show form with change server link", async () => {
@@ -359,7 +359,9 @@ describe("Login", function () {
             unstable_features: {},
             versions: ["v1.1"],
         });
-        const { rerender } = render(getRawComponent());
+        const { rerender } = render(getRawComponent(), {
+            legacyRoot: true,
+        });
         await waitForElementToBeRemoved(() => screen.queryAllByLabelText("Loading…"));
 
         // error displayed

test/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap

@@ -16,7 +16,7 @@ exports[`DecoratedRoomAvatar shows an avatar with globe icon and tooltip for pub
       r
     </span>
     <div
-      aria-describedby="floating-ui-2"
+      aria-describedby=":r2:"
       class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_globe"
       tabindex="0"
     />
@@ -40,7 +40,7 @@ exports[`DecoratedRoomAvatar shows the presence indicator in a DM room that also
       r
     </span>
     <div
-      aria-describedby="floating-ui-8"
+      aria-describedby=":r8:"
       class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_online"
       tabindex="0"
     />

test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap

@@ -38,9 +38,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
           data-type="round"
           role="presentation"
           style="--cpd-avatar-size: 32px;"
-        >
-
-        </span>
+        />
         <div
           class="mx_BeaconListItem_info"
         >

test/components/views/dialogs/AccessSecretStorageDialog-test.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React, { ComponentProps } from "react";
 import { SecretStorage, MatrixClient } from "matrix-js-sdk/src/matrix";
-import { act, fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Mocked } from "jest-mock";
 
@@ -129,11 +129,13 @@ describe("AccessSecretStorageDialog", () => {
         expect(screen.getByPlaceholderText("Security Phrase")).toHaveValue(securityKey);
         await submitDialog();
 
-        expect(
-            screen.getByText(
-                "👎 Unable to access secret storage. Please verify that you entered the correct Security Phrase.",
-            ),
-        ).toBeInTheDocument();
+        await waitFor(() =>
+            expect(
+                screen.getByText(
+                    "👎 Unable to access secret storage. Please verify that you entered the correct Security Phrase.",
+                ),
+            ).toBeInTheDocument(),
+        );
 
         expect(screen.getByPlaceholderText("Security Phrase")).toHaveFocus();
     });

test/components/views/dialogs/InviteDialog-test.tsx

@@ -429,7 +429,7 @@ describe("InviteDialog", () => {
 
         describe("when clicking »Start DM anyway«", () => {
             beforeEach(async () => {
-                await userEvent.click(screen.getByRole("button", { name: "Start DM anyway", exact: true }));
+                await userEvent.click(screen.getByRole("button", { name: "Start DM anyway" }));
             });
 
             it("should start the DM", () => {

test/components/views/dialogs/MessageEditHistoryDialog-test.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { render, RenderResult } from "@testing-library/react";
+import { render, RenderResult, waitForElementToBeRemoved } from "@testing-library/react";
 import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import type { MatrixClient } from "matrix-js-sdk/src/matrix";
@@ -39,6 +39,7 @@ describe("<MessageEditHistory />", () => {
 
     async function renderComponent(): Promise<RenderResult> {
         const result = render(<MessageEditHistoryDialog mxEvent={event} onFinished={jest.fn()} />);
+        await waitForElementToBeRemoved(() => result.queryByRole("progressbar"));
         await flushPromises();
         return result;
     }

test/components/views/dialogs/RoomSettingsDialog-test.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import {
     EventTimeline,
     EventType,
@@ -129,7 +129,7 @@ describe("<RoomSettingsDialog />", () => {
                 expect(screen.getByTestId("settings-tab-ROOM_PEOPLE_TAB")).toBeInTheDocument();
             });
 
-            it("re-renders on room join rule changes", () => {
+            it("re-renders on room join rule changes", async () => {
                 jest.spyOn(SettingsStore, "getValue").mockImplementation(
                     (setting) => setting === "feature_ask_to_join",
                 );
@@ -142,7 +142,9 @@ describe("<RoomSettingsDialog />", () => {
                     room.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
                     null,
                 );
-                expect(screen.queryByTestId("settings-tab-ROOM_PEOPLE_TAB")).not.toBeInTheDocument();
+                await waitFor(() =>
+                    expect(screen.queryByTestId("settings-tab-ROOM_PEOPLE_TAB")).not.toBeInTheDocument(),
+                );
             });
         });