Update to React 18

package.json

@@ -74,13 +74,9 @@
         "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js"
     },
     "resolutions": {
-        "@types/react-dom": "17.0.25",
-        "@types/react": "17.0.83",
         "@types/seedrandom": "3.0.8",
         "oidc-client-ts": "3.1.0",
         "jwt-decode": "4.0.0",
-        "@floating-ui/react": "0.26.11",
-        "@radix-ui/react-id": "1.1.0",
         "caniuse-lite": "1.0.30001668",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
@@ -94,7 +90,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.8.0",
         "@vector-im/compound-web": "^7.1.0",
         "@zxcvbn-ts/core": "^3.0.4",
@@ -141,10 +136,10 @@
         "posthog-js": "1.157.2",
         "qrcode": "1.5.4",
         "re-resizable": "6.9.17",
-        "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",
@@ -186,10 +181,10 @@
         "@sentry/webpack-plugin": "^2.7.1",
         "@stylistic/eslint-plugin": "^2.9.0",
         "@svgr/webpack": "^8.0.0",
-        "@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",
@@ -211,9 +206,9 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "17.0.83",
+        "@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.13.0",
         "@types/sdp-transform": "^2.4.6",
@@ -260,7 +255,7 @@
         "husky": "^9.0.0",
         "jest": "^29.6.2",
         "jest-canvas-mock": "^2.5.2",
-        "jest-environment-jsdom": "^29.6.2",
+        "jest-environment-jsdom": "^29.7.0",
         "jest-mock": "^29.6.2",
         "jest-raw-loader": "^1.0.1",
         "jsqr": "^1.4.0",

playwright/element-web-test.ts

@@ -224,7 +224,7 @@ export const test = base.extend<{
     },
 
     axe: async ({ page }, use) => {
-        await use(new AxeBuilder({ page }).exclude("[id^='floating-ui-']"));
+        await use(new AxeBuilder({ page }).exclude("[data-floating-ui-portal]"));
     },
     checkA11y: async ({ axe }, use, testInfo) =>
         use(async () => {

playwright/pages/ElementAppPage.ts

@@ -188,6 +188,6 @@ export class ElementAppPage {
                 "Element has no aria-labelledby or aria-describedy attributes! The tooltip should have added either one of these.",
             );
         }
-        return this.page.locator(`#${labelledById ?? describedById}`);
+        return this.page.locator(`id=${labelledById ?? describedById}`);
     }
 }

scripts/make-react-component.js

@@ -32,7 +32,7 @@ export default %%ComponentName%%;
 `,
     TEST: `
 import React from "react";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 
 import %%ComponentName%% from '%%RelativeComponentPath%%';
 

sonar-project.properties

@@ -11,5 +11,13 @@ sonar.exclusions=__mocks__,docs,element.io,nginx
 sonar.cpd.exclusions=src/i18n/strings/*.json
 sonar.typescript.tsconfigPath=./tsconfig.json
 sonar.javascript.lcov.reportPaths=coverage/lcov.info
-sonar.coverage.exclusions=test/**/*,playwright/**/*,res/**/*,src/vector/modernizr.js,src/components/views/dialogs/devtools/**/*,src/utils/SessionLock.ts
+sonar.coverage.exclusions=\
+  test/**/*,\
+  playwright/**/*,\
+  res/**/*,\
+  scripts/**/*,\
+  src/vector/modernizr.js,\
+  src/components/views/dialogs/devtools/**/*,\
+  src/utils/SessionLock.ts,\
+  src/**/*.d.ts
 sonar.testExecutionReportPaths=coverage/jest-sonar-report.xml

src/@types/react.d.ts

@@ -13,4 +13,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

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-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 {
@@ -24,7 +24,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;
 }
 
@@ -99,7 +99,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
@@ -113,7 +114,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/async-components/structures/ErrorView.tsx

@@ -25,6 +25,7 @@ interface IProps {
     title: string;
     messages?: string[];
     footer?: ReactNode;
+    children?: ReactNode;
 }
 
 export const ErrorView: React.FC<IProps> = ({ title, messages, footer, children }) => {

src/components/views/auth/VectorAuthPage.tsx

@@ -10,7 +10,7 @@ import * as React from "react";
 import SdkConfig from "../../../SdkConfig";
 import VectorAuthFooter from "./VectorAuthFooter";
 
-export default class VectorAuthPage extends React.PureComponent {
+export default class VectorAuthPage extends React.PureComponent<React.PropsWithChildren> {
     private static welcomeBackgroundUrl?: string;
 
     // cache the url as a static to prevent it changing without refreshing

src/components/views/dialogs/BaseDialog.tsx

@@ -120,7 +120,6 @@ export default class BaseDialog extends React.Component<IProps> {
                     onClick={this.onCancelClick}
                     className="mx_Dialog_cancelButton"
                     aria-label={_t("dialog_close_label")}
-                    title={_t("action|close")}
                     placement="bottom"
                 />
             );

src/languageHandler.tsx

@@ -436,7 +436,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/setupTests.ts

@@ -13,6 +13,13 @@ import { mocked } from "jest-mock";
 
 import { PredictableRandom } from "./test-utils/predictableRandom"; // https://github.com/jsdom/jsdom/issues/2555
 
+declare global {
+    // eslint-disable-next-line no-var
+    var IS_REACT_ACT_ENVIRONMENT: boolean;
+}
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
 // Fake random strings to give a predictable snapshot for IDs
 jest.mock("matrix-js-sdk/src/randomstring");
 beforeEach(() => {

test/test-utils/jest-matrix-react.tsx

@@ -27,6 +27,7 @@ const wrapWithTooltipProvider = (Wrapper: RenderOptions["wrapper"]) => {
 
 const customRender = (ui: ReactElement, options: RenderOptions = {}) => {
     return render(ui, {
+        legacyRoot: true,
         ...options,
         wrapper: wrapWithTooltipProvider(options?.wrapper) as RenderOptions["wrapper"],
     }) as ReturnType<typeof render>;

test/unit-tests/async-components/dialogs/security/NewRecoveryMethodDialog-test.tsx

@@ -7,10 +7,9 @@
 
 import React from "react";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
-import { render, screen } from "jest-matrix-react";
+import { render, screen, act } from "jest-matrix-react";
 import { waitFor } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
-import { act } from "@testing-library/react-hooks/dom";
 
 import NewRecoveryMethodDialog from "../../../../../src/async-components/views/dialogs/security/NewRecoveryMethodDialog";
 import { createTestClient } from "../../../../test-utils";
@@ -55,15 +54,13 @@ describe("<NewRecoveryMethodDialog />", () => {
 
         const onFinished = jest.fn();
 
-        await act(async () => {
-            const { asFragment } = renderComponent(onFinished);
-            await waitFor(() =>
-                expect(
-                    screen.getByText("This session is encrypting history using the new recovery method."),
-                ).toBeInTheDocument(),
-            );
-            expect(asFragment()).toMatchSnapshot();
-        });
+        const { asFragment } = renderComponent(onFinished);
+        await waitFor(() =>
+            expect(
+                screen.getByText("This session is encrypting history using the new recovery method."),
+            ).toBeInTheDocument(),
+        );
+        expect(asFragment()).toMatchSnapshot();
 
         await userEvent.click(screen.getByRole("button", { name: "Set up Secure Messages" }));
         expect(onFinished).toHaveBeenCalled();

test/unit-tests/components/structures/MatrixChat-test.tsx

@@ -55,7 +55,7 @@ import * as Lifecycle from "../../../../src/Lifecycle";
 import { SSO_HOMESERVER_URL_KEY, SSO_ID_SERVER_URL_KEY } from "../../../../src/BasePlatform";
 import SettingsStore from "../../../../src/settings/SettingsStore";
 import { SettingLevel } from "../../../../src/settings/SettingLevel";
-import { MatrixClientPeg, MatrixClientPeg as peg } from "../../../../src/MatrixClientPeg";
+import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
 import { ReleaseAnnouncementStore } from "../../../../src/stores/ReleaseAnnouncementStore";
 import { DRAFT_LAST_CLEANUP_KEY } from "../../../../src/DraftCleaner";
@@ -933,17 +933,13 @@ describe("<MatrixChat />", () => {
             // but as the exception was swallowed, the test was passing (see in `initClientCrypto`).
             // There are several uses of the peg in the app, so during all these tests you might end-up
             // with a real client instead of the mocked one. Not sure how reliable all these tests are.
-            const originalReplace = peg.replaceUsingCreds;
-            peg.replaceUsingCreds = jest.fn().mockResolvedValue(mockClient);
-            // @ts-ignore - need to mock this for the test
-            peg.matrixClient = mockClient;
+            jest.spyOn(MatrixClientPeg, "replaceUsingCreds");
+            jest.spyOn(MatrixClientPeg, "get").mockReturnValue(mockClient);
 
             const result = getComponent();
 
             await result.findByText("You're signed out");
             expect(result.container).toMatchSnapshot();
-
-            peg.replaceUsingCreds = originalReplace;
         });
     });
 
@@ -1490,8 +1486,6 @@ describe("<MatrixChat />", () => {
                 action: "start_mobile_registration",
             });
 
-            await flushPromises();
-
             return renderResult;
         };
 
@@ -1512,6 +1506,7 @@ describe("<MatrixChat />", () => {
             enabledMobileRegistration();
 
             await getComponentAndWaitForReady();
+            await flushPromises();
 
             expect(screen.getByTestId("mobile-register")).toBeInTheDocument();
         });

test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap

@@ -19,7 +19,7 @@ exports[`FilePanel renders empty state 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="floating-ui-1"
+        aria-labelledby=":r0:"
         class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
         data-testid="base-card-close-button"
         role="button"