Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Iterate
2025-12-05 01:10:40 +00:00 · 2024-10-18 17:07:08 +01:00 · 2024-10-18 15:16:19 +01:00 · 2024-10-18 14:51:34 +01:00 · 2024-10-18 14:50:27 +01:00 · 2024-10-17 16:42:59 +01:00
109 changed files with 1153 additions and 1424 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -18,7 +18,7 @@ trim_trailing_whitespace = true
 indent_size = 4

 [package.json]
-indent_size = 2
+indent_size = 4

 [*.tsx.snap]
 trim_trailing_whitespace = false
--- a/.prettierignore
+++ b/.prettierignore
@@ -37,5 +37,10 @@ package-lock.json

 # Downloaded and already minified
 res/jitsi_external_api.min.js
+
+/playwright/test-results/
+/playwright/html-report/
+/playwright/logs/
+/playwright/snapshots/
 # This file is also machine-generated
 /playwright/e2e/crypto/test_indexeddb_cryptostore_dump/dump.json
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -44,6 +44,8 @@ const config: Config = {
        // getSessionLock is piped into a different JS context via stringification, and the coverage functionality is
        // not available in that contest. So, turn off coverage instrumentation for it.
        "!<rootDir>/src/utils/SessionLock.ts",
+        // Coverage chokes on type definition files
+        "!<rootDir>/src/**/*.d.ts",
    ],
    coverageReporters: ["text-summary", "lcov"],
    testResultsProcessor: "@casualbot/jest-sonar-reporter",
--- a/package.json
+++ b/package.json
@@ -74,18 +74,8 @@
        "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",
-        "@vector-im/compound-design-tokens": "1.8.0",
-        "@vector-im/compound-web": "7.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"
+        "caniuse-lite": "1.0.30001668"
    },
    "dependencies": {
        "@babel/runtime": "^7.12.5",
@@ -96,7 +86,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.0.0",
        "@zxcvbn-ts/core": "^3.0.4",
@@ -143,10 +132,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",
@@ -187,10 +176,10 @@
        "@principalstudio/html-webpack-inject-preload": "^1.2.7",
        "@sentry/webpack-plugin": "^2.7.1",
        "@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",
@@ -212,9 +201,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,8 +249,8 @@
        "html-webpack-plugin": "^5.5.3",
        "husky": "^9.0.0",
        "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",
--- a/playwright/.gitignore
+++ b/playwright/.gitignore
@@ -4,3 +4,5 @@
 # Only commit snapshots from Linux
 /snapshots/**/*.png
 !/snapshots/**/*-linux.png
+# This file is also machine-generated
+/e2e/crypto/test_indexeddb_cryptostore_dump/dump.json
--- a/playwright/element-web-test.ts
+++ b/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 () => {
--- a/playwright/pages/ElementAppPage.ts
+++ b/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}`);
    }
 }
--- a/scripts/make-react-component.js
+++ b/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%%';

--- a/sonar-project.properties
+++ b/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
--- a/src/@types/react.d.ts
+++ b/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;
 }
--- a/src/NodeAnimator.tsx
+++ b/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 {
@@ -27,7 +27,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;
 }

@@ -102,7 +102,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
@@ -116,7 +117,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;
--- a/src/async-components/structures/ErrorView.tsx
+++ b/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 }) => {
--- a/src/components/views/auth/VectorAuthPage.tsx
+++ b/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
--- a/src/components/views/dialogs/BaseDialog.tsx
+++ b/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"
                />
            );
--- a/src/languageHandler.tsx
+++ b/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("");
    }
--- a/test/setupTests.ts
+++ b/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(() => {
--- a/test/test-utils/utilities.ts
+++ b/test/test-utils/utilities.ts
@@ -119,7 +119,7 @@ export function untilEmission(
    });
 }

-export const flushPromises = async () => await new Promise<void>((resolve) => window.setTimeout(resolve));
+export const flushPromises = async () => await new Promise<void>((resolve) => window.setTimeout(resolve, 10));

 // with jest's modern fake timers process.nextTick is also mocked,
 // flushing promises in the normal way then waits for some advancement
--- a/test/unit-tests/accessibility/RovingTabIndex-test.tsx
+++ b/test/unit-tests/accessibility/RovingTabIndex-test.tsx
@@ -67,6 +67,7 @@ describe("RovingTabIndex", () => {
                    </React.Fragment>
                )}
            </RovingTabIndexProvider>,
+            { legacyRoot: true },
        );

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

        // should begin with 0th being active
--- a/test/unit-tests/async-components/dialogs/security/NewRecoveryMethodDialog-test.tsx
+++ b/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();
--- a/test/unit-tests/components/structures/MatrixChat-test.tsx
+++ b/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";
@@ -162,7 +162,7 @@ describe("<MatrixChat />", () => {
    let initPromise: Promise<void> | undefined;
    let defaultProps: ComponentProps<typeof MatrixChat>;
    const getComponent = (props: Partial<ComponentProps<typeof MatrixChat>> = {}) =>
-        render(<MatrixChat {...defaultProps} {...props} />);
+        render(<MatrixChat {...defaultProps} {...props} />, { legacyRoot: true });

    // make test results readable
    filterConsole(
@@ -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();
        });
--- a/test/unit-tests/components/structures/RoomView-test.tsx
+++ b/test/unit-tests/components/structures/RoomView-test.tsx
@@ -137,6 +137,9 @@ describe("RoomView", () => {
                    wrappedRef={ref as any}
                />
            </SDKContext.Provider>,
+            {
+                legacyRoot: true,
+            },
        );
        await flushPromises();
        return roomView;
@@ -174,6 +177,9 @@ describe("RoomView", () => {
                    onRegistered={jest.fn()}
                />
            </SDKContext.Provider>,
+            {
+                legacyRoot: true,
+            },
        );
        await flushPromises();
        return roomView;
--- a/test/unit-tests/components/structures/TimelinePanel-test.tsx
+++ b/test/unit-tests/components/structures/TimelinePanel-test.tsx
@@ -203,6 +203,7 @@ describe("TimelinePanel", () => {
                    manageReadReceipts={true}
                    ref={ref}
                />,
+                { legacyRoot: true },
            );
            await flushPromises();
            timelinePanel = ref.current!;
--- a/test/unit-tests/components/structures/snapshots/FilePanel-test.tsx.snap
+++ b/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"
--- a/test/unit-tests/components/structures/snapshots/RoomView-test.tsx.snap
+++ b/test/unit-tests/components/structures/snapshots/RoomView-test.tsx.snap
@@ -62,7 +62,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
            style="--cpd-icon-button-size: 100%;"
          >
            <svg
-              aria-labelledby="floating-ui-364"
+              aria-labelledby=":rbc:"
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
@@ -78,7 +78,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
        <button
          aria-disabled="false"
          aria-label="Voice call"
-          aria-labelledby="floating-ui-369"
+          aria-labelledby=":rbh:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -103,7 +103,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
        </button>
        <button
          aria-label="Room info"
-          aria-labelledby="floating-ui-374"
+          aria-labelledby=":rbm:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -128,7 +128,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
        </button>
        <button
          aria-label="Threads"
-          aria-labelledby="floating-ui-379"
+          aria-labelledby=":rbr:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -157,7 +157,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
      >
        <div
          aria-label="2 members"
-          aria-labelledby="floating-ui-384"
+          aria-labelledby=":rc0:"
          class="mx_AccessibleButton mx_FacePile"
          role="button"
          tabindex="0"
@@ -280,7 +280,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
            style="--cpd-icon-button-size: 100%;"
          >
            <svg
-              aria-labelledby="floating-ui-394"
+              aria-labelledby=":rca:"
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
@@ -296,7 +296,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
        <button
          aria-disabled="false"
          aria-label="Voice call"
-          aria-labelledby="floating-ui-399"
+          aria-labelledby=":rcf:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -321,7 +321,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
        </button>
        <button
          aria-label="Room info"
-          aria-labelledby="floating-ui-404"
+          aria-labelledby=":rck:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -346,7 +346,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
        </button>
        <button
          aria-label="Threads"
-          aria-labelledby="floating-ui-409"
+          aria-labelledby=":rcp:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -375,7 +375,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
      >
        <div
          aria-label="2 members"
-          aria-labelledby="floating-ui-414"
+          aria-labelledby=":rcu:"
          class="mx_AccessibleButton mx_FacePile"
          role="button"
          tabindex="0"
@@ -583,7 +583,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
            style="--cpd-icon-button-size: 100%;"
          >
            <svg
-              aria-labelledby="floating-ui-224"
+              aria-labelledby=":r70:"
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
@@ -599,7 +599,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
        <button
          aria-disabled="false"
          aria-label="Voice call"
-          aria-labelledby="floating-ui-229"
+          aria-labelledby=":r75:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -624,7 +624,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
        </button>
        <button
          aria-label="Room info"
-          aria-labelledby="floating-ui-234"
+          aria-labelledby=":r7a:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -649,7 +649,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
        </button>
        <button
          aria-label="Threads"
-          aria-labelledby="floating-ui-239"
+          aria-labelledby=":r7f:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -678,7 +678,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
      >
        <div
          aria-label="2 members"
-          aria-labelledby="floating-ui-244"
+          aria-labelledby=":r7k:"
          class="mx_AccessibleButton mx_FacePile"
          role="button"
          tabindex="0"
@@ -963,7 +963,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
            style="--cpd-icon-button-size: 100%;"
          >
            <svg
-              aria-labelledby="floating-ui-294"
+              aria-labelledby=":r96:"
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
@@ -979,7 +979,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
        <button
          aria-disabled="false"
          aria-label="Voice call"
-          aria-labelledby="floating-ui-299"
+          aria-labelledby=":r9b:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -1004,7 +1004,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
        </button>
        <button
          aria-label="Room info"
-          aria-labelledby="floating-ui-304"
+          aria-labelledby=":r9g:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -1029,7 +1029,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
        </button>
        <button
          aria-label="Threads"
-          aria-labelledby="floating-ui-309"
+          aria-labelledby=":r9l:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -1058,7 +1058,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
      >
        <div
          aria-label="2 members"
-          aria-labelledby="floating-ui-314"
+          aria-labelledby=":r9q:"
          class="mx_AccessibleButton mx_FacePile"
          role="button"
          tabindex="0"
@@ -1370,7 +1370,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
          >
            <button
              aria-label="Room info"
-              aria-labelledby="floating-ui-84"
+              aria-labelledby=":r2k:"
              class="_icon-button_bh2qc_17"
              role="button"
              style="--cpd-icon-button-size: 32px;"
@@ -1395,7 +1395,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
            </button>
            <button
              aria-label="Chat"
-              aria-labelledby="floating-ui-89"
+              aria-labelledby=":r2p:"
              class="_icon-button_bh2qc_17"
              role="button"
              style="--cpd-icon-button-size: 32px;"
@@ -1420,7 +1420,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
            </button>
            <button
              aria-label="Threads"
-              aria-labelledby="floating-ui-94"
+              aria-labelledby=":r2u:"
              class="_icon-button_bh2qc_17"
              role="button"
              style="--cpd-icon-button-size: 32px;"
@@ -1449,7 +1449,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
          >
            <div
              aria-label="0 members"
-              aria-labelledby="floating-ui-99"
+              aria-labelledby=":r33:"
              class="mx_AccessibleButton mx_FacePile"
              role="button"
              tabindex="0"
@@ -1487,7 +1487,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                </p>
              </div>
              <button
-                aria-labelledby="floating-ui-108"
+                aria-labelledby=":r3c:"
                class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
                data-testid="base-card-close-button"
                role="button"
--- a/test/unit-tests/components/structures/snapshots/SpaceHierarchy-test.tsx.snap
+++ b/test/unit-tests/components/structures/snapshots/SpaceHierarchy-test.tsx.snap
@@ -393,7 +393,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
            Join
          </div>
          <span
-            aria-labelledby="floating-ui-9"
+            aria-labelledby=":r8:"
            tabindex="0"
          >
            <span
--- a/test/unit-tests/components/structures/snapshots/ThreadPanel-test.tsx.snap
+++ b/test/unit-tests/components/structures/snapshots/ThreadPanel-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
    class="mx_BaseCard_header_title"
  >
    <button
-      aria-labelledby="floating-ui-1"
+      aria-labelledby=":r0:"
      class="_icon-button_bh2qc_17"
      role="button"
      style="--cpd-icon-button-size: 24px;"
@@ -41,7 +41,7 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
    class="mx_BaseCard_header_title"
  >
    <button
-      aria-labelledby="floating-ui-6"
+      aria-labelledby=":r6:"
      class="_icon-button_bh2qc_17"
      role="button"
      style="--cpd-icon-button-size: 24px;"
--- a/test/unit-tests/components/structures/auth/ForgotPassword-test.tsx
+++ b/test/unit-tests/components/structures/auth/ForgotPassword-test.tsx
@@ -94,6 +94,7 @@ describe("<ForgotPassword>", () => {
        beforeEach(() => {
            renderResult = render(
                <ForgotPassword serverConfig={serverConfig} onComplete={onComplete} onLoginClick={onLoginClick} />,
+                { legacyRoot: true },
            );
        });

--- a/test/unit-tests/components/structures/auth/Login-test.tsx
+++ b/test/unit-tests/components/structures/auth/Login-test.tsx
@@ -89,7 +89,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 () => {
@@ -350,7 +350,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
--- a/test/unit-tests/components/views/avatars/snapshots/DecoratedRoomAvatar-test.tsx.snap
+++ b/test/unit-tests/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-labelledby="floating-ui-1"
+      aria-labelledby=":r0:"
      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-labelledby="floating-ui-6"
+      aria-labelledby=":r6:"
      class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_online"
      tabindex="0"
    />
--- a/test/unit-tests/components/views/avatars/snapshots/WithPresenceIndicator-test.tsx.snap
+++ b/test/unit-tests/components/views/avatars/snapshots/WithPresenceIndicator-test.tsx.snap
@@ -7,7 +7,7 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
  >
    <span />
    <div
-      aria-labelledby="floating-ui-1"
+      aria-labelledby=":r0:"
      class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_online"
      style="width: 32px; height: 32px;"
      tabindex="0"
@@ -23,7 +23,7 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
  >
    <span />
    <div
-      aria-labelledby="floating-ui-6"
+      aria-labelledby=":r6:"
      class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_offline"
      style="width: 32px; height: 32px;"
      tabindex="0"
@@ -39,7 +39,7 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
  >
    <span />
    <div
-      aria-labelledby="floating-ui-12"
+      aria-labelledby=":rc:"
      class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_away"
      style="width: 32px; height: 32px;"
      tabindex="0"
--- a/test/unit-tests/components/views/beacon/snapshots/BeaconListItem-test.tsx.snap
+++ b/test/unit-tests/components/views/beacon/snapshots/BeaconListItem-test.tsx.snap
@@ -32,7 +32,7 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
          class="mx_BeaconListItem_interactions"
        >
          <a
-            aria-labelledby="floating-ui-1"
+            aria-labelledby=":r0:"
            data-testid="open-location-in-osm"
            href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
            rel="noreferrer noopener"
--- a/test/unit-tests/components/views/beacon/snapshots/DialogSidebar-test.tsx.snap
+++ b/test/unit-tests/components/views/beacon/snapshots/DialogSidebar-test.tsx.snap
@@ -47,9 +47,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"
        >
@@ -74,7 +72,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
              class="mx_BeaconListItem_interactions"
            >
              <a
-                aria-labelledby="floating-ui-8"
+                aria-labelledby=":r8:"
                data-testid="open-location-in-osm"
                href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
                rel="noreferrer noopener"
--- a/test/unit-tests/components/views/beacon/snapshots/ShareLatestLocation-test.tsx.snap
+++ b/test/unit-tests/components/views/beacon/snapshots/ShareLatestLocation-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ShareLatestLocation /> renders share buttons when there is a location 1`] = `
 <DocumentFragment>
  <a
-    aria-labelledby="floating-ui-1"
+    aria-labelledby=":r0:"
    data-testid="open-location-in-osm"
    href="https://www.openstreetmap.org/?mlat=51&mlon=42#map=16/51/42"
    rel="noreferrer noopener"
--- a/test/unit-tests/components/views/dialogs/SpotlightDialog-test.tsx
+++ b/test/unit-tests/components/views/dialogs/SpotlightDialog-test.tsx
@@ -19,7 +19,7 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import sanitizeHtml from "sanitize-html";
-import { fireEvent, render, screen } from "jest-matrix-react";
+import { fireEvent, render, screen, waitFor } from "jest-matrix-react";

 import SpotlightDialog from "../../../../../src/components/views/dialogs/spotlight/SpotlightDialog";
 import { Filter } from "../../../../../src/components/views/dialogs/spotlight/Filter";
@@ -149,6 +149,9 @@ describe("Spotlight Dialog", () => {
    let mockedClient: MatrixClient;

    beforeEach(() => {
+        SdkConfig.reset();
+        localStorage.clear();
+        SettingsStore.reset();
        mockedClient = mockClient({ rooms: [testPublicRoom], users: [testPerson] });
        testRoom = mkRoom(mockedClient, "!test23:example.com");
        mocked(testRoom.getMyMembership).mockReturnValue(KnownMembership.Join);
@@ -193,10 +196,12 @@ describe("Spotlight Dialog", () => {
            expect(filterChip).toBeInTheDocument();
            expect(filterChip.innerHTML).toContain("Public rooms");

-            const content = document.querySelector("#mx_SpotlightDialog_content")!;
-            const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
-            expect(options.length).toBe(1);
-            expect(options[0].innerHTML).toContain(testPublicRoom.name);
+            await waitFor(() => {
+                const content = document.querySelector("#mx_SpotlightDialog_content")!;
+                const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
+                expect(options.length).toBe(1);
+                expect(options[0].innerHTML).toContain(testPublicRoom.name);
+            });
        });

        it("with people filter", async () => {
@@ -215,22 +220,18 @@ describe("Spotlight Dialog", () => {
            expect(filterChip).toBeInTheDocument();
            expect(filterChip.innerHTML).toContain("People");

-            const content = document.querySelector("#mx_SpotlightDialog_content")!;
-            const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
-            expect(options.length).toBeGreaterThanOrEqual(1);
-            expect(options[0]!.innerHTML).toContain(testPerson.display_name);
+            await waitFor(() => {
+                const content = document.querySelector("#mx_SpotlightDialog_content")!;
+                const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
+                expect(options.length).toBeGreaterThanOrEqual(1);
+                expect(options[0]!.innerHTML).toContain(testPerson.display_name);
+            });
        });
    });

    describe("when MSC3946 dynamic room predecessors is enabled", () => {
-        beforeEach(() => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName, roomId, excludeDefault) => {
-                if (settingName === "feature_dynamic_room_predecessors") {
-                    return true;
-                } else {
-                    return []; // SpotlightSearch.recentSearches
-                }
-            });
+        beforeEach(async () => {
+            await SettingsStore.setValue("feature_dynamic_room_predecessors", null, SettingLevel.DEVICE, true);
        });

        afterEach(() => {
@@ -261,10 +262,12 @@ describe("Spotlight Dialog", () => {
            expect(filterChip).toBeInTheDocument();
            expect(filterChip.innerHTML).toContain("Public rooms");

-            const content = document.querySelector("#mx_SpotlightDialog_content")!;
-            const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
-            expect(options.length).toBe(1);
-            expect(options[0]!.innerHTML).toContain(testPublicRoom.name);
+            await waitFor(() => {
+                const content = document.querySelector("#mx_SpotlightDialog_content")!;
+                const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
+                expect(options.length).toBe(1);
+                expect(options[0]!.innerHTML).toContain(testPublicRoom.name);
+            });

            // assert that getVisibleRooms is called without MSC3946 dynamic room predecessors
            expect(mockedClient.getVisibleRooms).toHaveBeenCalledWith(false);
@@ -284,10 +287,12 @@ describe("Spotlight Dialog", () => {
            expect(filterChip).toBeInTheDocument();
            expect(filterChip.innerHTML).toContain("People");

-            const content = document.querySelector("#mx_SpotlightDialog_content")!;
-            const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
-            expect(options.length).toBeGreaterThanOrEqual(1);
-            expect(options[0]!.innerHTML).toContain(testPerson.display_name);
+            await waitFor(() => {
+                const content = document.querySelector("#mx_SpotlightDialog_content")!;
+                const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
+                expect(options.length).toBeGreaterThanOrEqual(1);
+                expect(options[0]!.innerHTML).toContain(testPerson.display_name);
+            });
        });
    });

@@ -372,11 +377,13 @@ describe("Spotlight Dialog", () => {
        jest.advanceTimersByTime(200);
        await flushPromisesWithFakeTimers();

-        const content = document.querySelector("#mx_SpotlightDialog_content")!;
-        const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
-        expect(options.length).toBeGreaterThanOrEqual(2);
-        expect(options[0]).toHaveTextContent("User Alpha");
-        expect(options[1]).toHaveTextContent("User Beta");
+        await waitFor(() => {
+            const content = document.querySelector("#mx_SpotlightDialog_content")!;
+            const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
+            expect(options.length).toBeGreaterThanOrEqual(2);
+            expect(options[0]).toHaveTextContent("User Alpha");
+            expect(options[1]).toHaveTextContent("User Beta");
+        });
    });

    it("should not filter out users sent by the server even if a local suggestion gets filtered out", async () => {
@@ -397,11 +404,13 @@ describe("Spotlight Dialog", () => {
        jest.advanceTimersByTime(200);
        await flushPromisesWithFakeTimers();

-        const content = document.querySelector("#mx_SpotlightDialog_content")!;
-        const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
-        expect(options.length).toBeGreaterThanOrEqual(2);
-        expect(options[0]).toHaveTextContent(testPerson.display_name!);
-        expect(options[1]).toHaveTextContent("User Beta");
+        await waitFor(() => {
+            const content = document.querySelector("#mx_SpotlightDialog_content")!;
+            const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
+            expect(options.length).toBeGreaterThanOrEqual(2);
+            expect(options[0]).toHaveTextContent(testPerson.display_name!);
+            expect(options[1]).toHaveTextContent("User Beta");
+        });
    });

    it("show non-matching query members with DMs if they are present in the server search results", async () => {
@@ -419,11 +428,13 @@ describe("Spotlight Dialog", () => {
        jest.advanceTimersByTime(200);
        await flushPromisesWithFakeTimers();

-        const content = document.querySelector("#mx_SpotlightDialog_content")!;
-        const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
-        expect(options.length).toBeGreaterThanOrEqual(2);
-        expect(options[0]).toHaveTextContent(testDMUserId);
-        expect(options[1]).toHaveTextContent("Bob Wonder");
+        await waitFor(() => {
+            const content = document.querySelector("#mx_SpotlightDialog_content")!;
+            const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
+            expect(options.length).toBeGreaterThanOrEqual(2);
+            expect(options[0]).toHaveTextContent(testDMUserId);
+            expect(options[1]).toHaveTextContent("Bob Wonder");
+        });
    });

    it("don't sort the order of users sent by the server", async () => {
@@ -441,11 +452,13 @@ describe("Spotlight Dialog", () => {
        jest.advanceTimersByTime(200);
        await flushPromisesWithFakeTimers();

-        const content = document.querySelector("#mx_SpotlightDialog_content")!;
-        const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
-        expect(options.length).toBeGreaterThanOrEqual(2);
-        expect(options[0]).toHaveTextContent("User Beta");
-        expect(options[1]).toHaveTextContent("User Alpha");
+        await waitFor(() => {
+            const content = document.querySelector("#mx_SpotlightDialog_content")!;
+            const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
+            expect(options.length).toBeGreaterThanOrEqual(2);
+            expect(options[0]).toHaveTextContent("User Beta");
+            expect(options[1]).toHaveTextContent("User Alpha");
+        });
    });

    it("should start a DM when clicking a person", async () => {
@@ -460,12 +473,13 @@ describe("Spotlight Dialog", () => {
        jest.advanceTimersByTime(200);
        await flushPromisesWithFakeTimers();

-        const options = document.querySelectorAll("li.mx_SpotlightDialog_option");
-        expect(options.length).toBeGreaterThanOrEqual(1);
-        expect(options[0]!.innerHTML).toContain(testPerson.display_name);
-
-        fireEvent.click(options[0]!);
-        expect(startDmOnFirstMessage).toHaveBeenCalledWith(mockedClient, [new DirectoryMember(testPerson)]);
+        await waitFor(() => {
+            const options = document.querySelectorAll("li.mx_SpotlightDialog_option");
+            expect(options.length).toBeGreaterThanOrEqual(1);
+            expect(options[0]!.innerHTML).toContain(testPerson.display_name);
+            fireEvent.click(options[0]!);
+            expect(startDmOnFirstMessage).toHaveBeenCalledWith(mockedClient, [new DirectoryMember(testPerson)]);
+        });
    });

    it("should pass via of the server being explored when joining room from directory", async () => {
@@ -481,20 +495,22 @@ describe("Spotlight Dialog", () => {
        jest.advanceTimersByTime(200);
        await flushPromisesWithFakeTimers();

-        const content = document.querySelector("#mx_SpotlightDialog_content")!;
-        const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
-        expect(options.length).toBe(1);
-        expect(options[0].innerHTML).toContain(testPublicRoom.name);
+        await waitFor(() => {
+            const content = document.querySelector("#mx_SpotlightDialog_content")!;
+            const options = content.querySelectorAll("li.mx_SpotlightDialog_option");
+            expect(options.length).toBe(1);
+            expect(options[0].innerHTML).toContain(testPublicRoom.name);

-        fireEvent.click(options[0].querySelector("[role='button']")!);
-        expect(defaultDispatcher.dispatch).toHaveBeenCalledTimes(1);
-        expect(defaultDispatcher.dispatch).toHaveBeenCalledWith(
-            expect.objectContaining({
-                action: "view_room",
-                room_id: testPublicRoom.room_id,
-                via_servers: ["example.tld"],
-            }),
-        );
+            fireEvent.click(options[0].querySelector("[role='button']")!);
+            expect(defaultDispatcher.dispatch).toHaveBeenCalledTimes(1);
+            expect(defaultDispatcher.dispatch).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    action: "view_room",
+                    room_id: testPublicRoom.room_id,
+                    via_servers: ["example.tld"],
+                }),
+            );
+        });
    });

    describe("nsfw public rooms filter", () => {
@@ -525,13 +541,9 @@ describe("Spotlight Dialog", () => {
            guest_can_join: false,
        };

-        beforeEach(() => {
+        beforeEach(async () => {
            mockedClient = mockClient({ rooms: [nsfwNameRoom, nsfwTopicRoom, potatoRoom], users: [testPerson] });
-            SettingsStore.setValue("SpotlightSearch.showNsfwPublicRooms", null, SettingLevel.DEVICE, false);
-        });
-
-        afterAll(() => {
-            SettingsStore.setValue("SpotlightSearch.showNsfwPublicRooms", null, SettingLevel.DEVICE, false);
+            await SettingsStore.setValue("SpotlightSearch.showNsfwPublicRooms", null, SettingLevel.DEVICE, false);
        });

        it("does not display rooms with nsfw keywords in results when showNsfwPublicRooms is falsy", async () => {
@@ -541,22 +553,26 @@ describe("Spotlight Dialog", () => {
            jest.advanceTimersByTime(200);
            await flushPromisesWithFakeTimers();

-            expect(screen.getByText(potatoRoom.name!)).toBeInTheDocument();
-            expect(screen.queryByText(nsfwTopicRoom.name!)).not.toBeInTheDocument();
-            expect(screen.queryByText(nsfwTopicRoom.name!)).not.toBeInTheDocument();
+            await waitFor(() => {
+                expect(screen.getByText(potatoRoom.name!)).toBeInTheDocument();
+                expect(screen.queryByText(nsfwTopicRoom.name!)).not.toBeInTheDocument();
+                expect(screen.queryByText(nsfwTopicRoom.name!)).not.toBeInTheDocument();
+            });
        });

        it("displays rooms with nsfw keywords in results when showNsfwPublicRooms is truthy", async () => {
-            SettingsStore.setValue("SpotlightSearch.showNsfwPublicRooms", null, SettingLevel.DEVICE, true);
+            await SettingsStore.setValue("SpotlightSearch.showNsfwPublicRooms", null, SettingLevel.DEVICE, true);
            render(<SpotlightDialog initialFilter={Filter.PublicRooms} onFinished={() => null} />);

            // search is debounced
            jest.advanceTimersByTime(200);
            await flushPromisesWithFakeTimers();

-            expect(screen.getByText(nsfwTopicRoom.name!)).toBeInTheDocument();
-            expect(screen.getByText(nsfwNameRoom.name!)).toBeInTheDocument();
-            expect(screen.getByText(potatoRoom.name!)).toBeInTheDocument();
+            await waitFor(() => {
+                expect(screen.getByText(nsfwTopicRoom.name!)).toBeInTheDocument();
+                expect(screen.getByText(nsfwNameRoom.name!)).toBeInTheDocument();
+                expect(screen.getByText(potatoRoom.name!)).toBeInTheDocument();
+            });
        });
    });

@@ -567,7 +583,7 @@ describe("Spotlight Dialog", () => {
        jest.advanceTimersByTime(200);
        await flushPromisesWithFakeTimers();

-        expect(screen.getByText("Failed to query public rooms")).toBeInTheDocument();
+        await waitFor(() => expect(screen.getByText("Failed to query public rooms")).toBeInTheDocument());
    });

    describe("knock rooms", () => {
@@ -593,9 +609,7 @@ describe("Spotlight Dialog", () => {

        describe("when disabling feature", () => {
            beforeEach(async () => {
-                jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) =>
-                    setting === "feature_ask_to_join" ? false : [],
-                );
+                await SettingsStore.setValue("feature_ask_to_join", null, SettingLevel.DEVICE, false);

                render(<SpotlightDialog initialFilter={Filter.PublicRooms} onFinished={() => {}} />);

@@ -603,7 +617,7 @@ describe("Spotlight Dialog", () => {
                jest.advanceTimersByTime(200);
                await flushPromisesWithFakeTimers();

-                fireEvent.click(screen.getByRole("button", { name: "View" }));
+                fireEvent.click(await screen.findByRole("button", { name: "View" }));
            });

            it("should not skip to auto join", async () => {
@@ -617,18 +631,12 @@ describe("Spotlight Dialog", () => {

        describe("when enabling feature", () => {
            beforeEach(async () => {
-                jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) =>
-                    setting === "feature_ask_to_join" ? true : [],
-                );
+                await SettingsStore.setValue("feature_ask_to_join", null, SettingLevel.DEVICE, true);
                jest.spyOn(mockedClient, "getRoom").mockReturnValue(null);

                render(<SpotlightDialog initialFilter={Filter.PublicRooms} onFinished={() => {}} />);

-                // search is debounced
-                jest.advanceTimersByTime(200);
-                await flushPromisesWithFakeTimers();
-
-                fireEvent.click(screen.getByRole("button", { name: "Ask to join" }));
+                await waitFor(() => fireEvent.click(screen.getByRole("button", { name: "Ask to join" })));
            });

            it("should skip to auto join", async () => {
--- a/test/unit-tests/components/views/dialogs/snapshots/DevtoolsDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/snapshots/DevtoolsDialog-test.tsx.snap
@@ -33,7 +33,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
    >
      Room ID: !id
      <div
-        aria-describedby="floating-ui-2"
+        aria-describedby=":r2:"
        aria-label="Copy"
        class="mx_AccessibleButton mx_CopyableText_copyButton"
        role="button"
--- a/test/unit-tests/components/views/dialogs/snapshots/LogoutDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/snapshots/LogoutDialog-test.tsx.snap
@@ -73,7 +73,6 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
      </details>
    </div>
    <div
-      aria-describedby="floating-ui-22"
      aria-label="Close dialog"
      class="mx_AccessibleButton mx_Dialog_cancelButton"
      role="button"
@@ -161,7 +160,6 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the
      </details>
    </div>
    <div
-      aria-describedby="floating-ui-28"
      aria-label="Close dialog"
      class="mx_AccessibleButton mx_Dialog_cancelButton"
      role="button"
--- a/test/unit-tests/components/views/dialogs/snapshots/MessageEditHistoryDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/snapshots/MessageEditHistoryDialog-test.tsx.snap
@@ -102,7 +102,6 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
      </div>
    </div>
    <div
-      aria-describedby="floating-ui-2"
      aria-label="Close dialog"
      class="mx_AccessibleButton mx_Dialog_cancelButton"
      role="button"
@@ -316,7 +315,6 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
      </div>
    </div>
    <div
-      aria-describedby="floating-ui-8"
      aria-label="Close dialog"
      class="mx_AccessibleButton mx_Dialog_cancelButton"
      role="button"
--- a/test/unit-tests/components/views/dialogs/snapshots/ServerPickerDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/snapshots/ServerPickerDialog-test.tsx.snap
@@ -50,7 +50,7 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
          class="mx_StyledRadioButton_content"
        >
          <span
-            aria-labelledby="floating-ui-1"
+            aria-labelledby=":r0:"
            class="mx_Login_underlinedServerName"
            tabindex="0"
          >
--- a/test/unit-tests/components/views/dialogs/security/ExportE2eKeysDialog-test.tsx
+++ b/test/unit-tests/components/views/dialogs/security/ExportE2eKeysDialog-test.tsx
@@ -35,10 +35,9 @@ describe("ExportE2eKeysDialog", () => {
        const cli = createTestClient();
        const onFinished = jest.fn();

-        const { container } = render(<ExportE2eKeysDialog matrixClient={cli} onFinished={onFinished} />);
+        render(<ExportE2eKeysDialog matrixClient={cli} onFinished={onFinished} />);
        const input = screen.getByLabelText("Enter passphrase");
        await userEvent.type(input, "password");
-        fireEvent.click(container.querySelector("[type=submit]")!);
        await expect(screen.findByText("This is a top-10 common password")).resolves.toBeInTheDocument();
    });

--- a/test/unit-tests/components/views/elements/AppTile-test.tsx
+++ b/test/unit-tests/components/views/elements/AppTile-test.tsx
@@ -161,6 +161,7 @@ describe("AppTile", () => {
                    permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)}
                />
            </MatrixClientContext.Provider>,
+            { legacyRoot: true },
        );
        // Wait for RPS room 1 updates to fire
        const rpsUpdated = waitForRps("r1");
@@ -234,6 +235,7 @@ describe("AppTile", () => {
                    permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)}
                />
            </MatrixClientContext.Provider>,
+            { legacyRoot: true },
        );
        // Wait for RPS room 1 updates to fire
        const rpsUpdated1 = waitForRps("r1");
@@ -352,6 +354,7 @@ describe("AppTile", () => {
                <MatrixClientContext.Provider value={cli}>
                    <AppTile key={app1.id} app={app1} room={r1} />
                </MatrixClientContext.Provider>,
+                { legacyRoot: true },
            );

            moveToContainerSpy = jest.spyOn(WidgetLayoutStore.instance, "moveToContainer");
@@ -466,6 +469,7 @@ describe("AppTile", () => {
                <MatrixClientContext.Provider value={cli}>
                    <AppTile key={app1.id} app={app1} fullWidth={true} room={r1} miniMode={true} showMenubar={false} />
                </MatrixClientContext.Provider>,
+                { legacyRoot: true },
            );
        });

--- a/test/unit-tests/components/views/elements/SearchWarning-test.tsx
+++ b/test/unit-tests/components/views/elements/SearchWarning-test.tsx
@@ -29,7 +29,7 @@ describe("<SearchWarning />", () => {
            const { asFragment, getByRole } = render(
                <SearchWarning isRoomEncrypted={true} kind={WarningKind.Search} />,
            );
-            expect(getByRole("img")).toHaveAttribute("src", "https://logo");
+            expect(getByRole("presentation")).toHaveAttribute("src", "https://logo");
            expect(asFragment()).toMatchSnapshot();
        });

--- a/test/unit-tests/components/views/elements/SyntaxHighlight-test.tsx
+++ b/test/unit-tests/components/views/elements/SyntaxHighlight-test.tsx
@@ -13,7 +13,9 @@ import SyntaxHighlight from "../../../../../src/components/views/elements/Syntax

 describe("<SyntaxHighlight />", () => {
    it("renders", async () => {
-        const { container } = render(<SyntaxHighlight>console.log("Hello, World!");</SyntaxHighlight>);
+        const { container } = render(<SyntaxHighlight>console.log("Hello, World!");</SyntaxHighlight>, {
+            legacyRoot: true,
+        });
        await waitFor(() => expect(container.querySelector(".language-arcade")).toBeTruthy());
        expect(container).toMatchSnapshot();
    });
@@ -21,7 +23,9 @@ describe("<SyntaxHighlight />", () => {
    it.each(["json", "javascript", "css"])("uses the provided language", async (lang) => {
        const mock = jest.spyOn(hljs, "highlight");

-        const { container } = render(<SyntaxHighlight language={lang}>// Hello, World</SyntaxHighlight>);
+        const { container } = render(<SyntaxHighlight language={lang}>// Hello, World</SyntaxHighlight>, {
+            legacyRoot: true,
+        });
        await waitFor(() => expect(container.querySelector(`.language-${lang}`)).toBeTruthy());

        const [_lang, opts] = mock.mock.lastCall!;
--- a/test/unit-tests/components/views/elements/snapshots/AppTile-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/snapshots/AppTile-test.tsx.snap
@@ -30,7 +30,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
          />
        </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"
@@ -320,8 +320,8 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
            <span>
              Using this widget may share data 
              <div
-                aria-describedby="floating-ui-87"
-                aria-labelledby="floating-ui-86"
+                aria-describedby=":r2n:"
+                aria-labelledby=":r2m:"
                class="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon"
              >
                <svg
--- a/test/unit-tests/components/views/elements/snapshots/FacePile-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/snapshots/FacePile-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FacePile /> renders with a tooltip 1`] = `
 <DocumentFragment>
  <div
-    aria-labelledby="floating-ui-1"
+    aria-labelledby=":r0:"
    class="mx_AccessibleButton mx_FacePile"
    role="button"
    tabindex="0"
--- a/test/unit-tests/components/views/elements/snapshots/ImageView-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/snapshots/ImageView-test.tsx.snap
@@ -21,7 +21,7 @@ exports[`<ImageView /> renders correctly 1`] = `
        class="mx_ImageView_toolbar"
      >
        <div
-          aria-describedby="floating-ui-2"
+          aria-describedby=":r2:"
          aria-label="Zoom out"
          class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_zoomOut"
          role="button"
--- a/test/unit-tests/components/views/elements/snapshots/InfoTooltip-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/snapshots/InfoTooltip-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`InfoTooltip should show tooltip on hover 1`] = `
 <DocumentFragment>
  <div
-    aria-describedby="floating-ui-2"
+    aria-describedby=":r2:"
    class="mx_InfoTooltip"
    tabindex="0"
  >
--- a/test/unit-tests/components/views/elements/snapshots/RoomFacePile-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/snapshots/RoomFacePile-test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`<RoomFacePile /> renders 1`] = `
 <DocumentFragment>
  <div
-    aria-describedby="floating-ui-2"
-    aria-labelledby="floating-ui-1"
+    aria-describedby=":r1:"
+    aria-labelledby=":r0:"
    class="mx_AccessibleButton mx_FacePile"
    role="button"
    tabindex="0"
--- a/test/unit-tests/components/views/emojipicker/EmojiPicker-test.tsx
+++ b/test/unit-tests/components/views/emojipicker/EmojiPicker-test.tsx
@@ -20,6 +20,7 @@ describe("EmojiPicker", function () {
        const ref = createRef<EmojiPicker>();
        const { container } = render(
            <EmojiPicker ref={ref} onChoose={(str: string) => false} onFinished={jest.fn()} />,
+            { legacyRoot: true },
        );

        // Record the HTML before filtering
--- a/test/unit-tests/components/views/location/LocationShareMenu-test.tsx
+++ b/test/unit-tests/components/views/location/LocationShareMenu-test.tsx
@@ -114,6 +114,7 @@ describe("<LocationShareMenu />", () => {
            wrapper: ({ children }) => (
                <MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
            ),
+            legacyRoot: true,
        });

    beforeEach(async () => {
--- a/test/unit-tests/components/views/location/snapshots/LocationViewDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/location/snapshots/LocationViewDialog-test.tsx.snap
@@ -23,7 +23,6 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
    class="mx_ZoomButtons"
  >
    <div
-      aria-describedby="floating-ui-6"
      aria-label="Zoom in"
      class="mx_AccessibleButton mx_ZoomButtons_button"
      data-testid="map-zoom-in-button"
--- a/test/unit-tests/components/views/messages/MPollBody-test.tsx
+++ b/test/unit-tests/components/views/messages/MPollBody-test.tsx
@@ -916,6 +916,7 @@ function renderMPollBodyWithWrapper(props: IBodyProps): RenderResult {
        wrapper: ({ children }) => (
            <MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
        ),
+        legacyRoot: true,
    });
 }

--- a/test/unit-tests/components/views/messages/MPollEndBody-test.tsx
+++ b/test/unit-tests/components/views/messages/MPollEndBody-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { render, waitFor } from "jest-matrix-react";
+import { render, waitFor, waitForElementToBeRemoved } from "jest-matrix-react";
 import { EventTimeline, MatrixEvent, Room, M_TEXT } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";

@@ -127,6 +127,7 @@ describe("<MPollEndBody />", () => {
            expect(container).toMatchSnapshot();

            await waitFor(() => expect(getByRole("progressbar")).toBeInTheDocument());
+            await waitForElementToBeRemoved(() => getByRole("progressbar"));

            expect(mockClient.fetchRoomEvent).toHaveBeenCalledWith(roomId, pollStartEvent.getId());

--- a/test/unit-tests/components/views/messages/snapshots/MLocationBody-test.tsx.snap
+++ b/test/unit-tests/components/views/messages/snapshots/MLocationBody-test.tsx.snap
@@ -34,7 +34,7 @@ exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] =
    class="mx_MLocationBody"
  >
    <div
-      aria-labelledby="floating-ui-18"
+      aria-labelledby=":ri:"
      class="mx_MLocationBody_map"
    >
      <div
@@ -67,7 +67,7 @@ exports[`MLocationBody <MLocationBody> without error renders marker correctly fo
    class="mx_MLocationBody"
  >
    <div
-      aria-labelledby="floating-ui-30"
+      aria-labelledby=":ru:"
      class="mx_MLocationBody_map"
    >
      <div
--- a/test/unit-tests/components/views/messages/snapshots/MPollBody-test.tsx.snap
+++ b/test/unit-tests/components/views/messages/snapshots/MPollBody-test.tsx.snap
@@ -506,9 +506,7 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
              </div>
              <div
                class="mx_PollOption_optionVoteCount"
-              >
-                
-              </div>
+              />
            </div>
          </div>
          <div
@@ -552,9 +550,7 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
              </div>
              <div
                class="mx_PollOption_optionVoteCount"
-              >
-                
-              </div>
+              />
            </div>
          </div>
          <div
@@ -598,9 +594,7 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
              </div>
              <div
                class="mx_PollOption_optionVoteCount"
-              >
-                
-              </div>
+              />
            </div>
          </div>
          <div
@@ -644,9 +638,7 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
              </div>
              <div
                class="mx_PollOption_optionVoteCount"
-              >
-                
-              </div>
+              />
            </div>
          </div>
          <div
@@ -922,9 +914,7 @@ exports[`MPollBody renders a poll with no votes 1`] = `
              </div>
              <div
                class="mx_PollOption_optionVoteCount"
-              >
-                
-              </div>
+              />
            </div>
          </div>
          <div
@@ -968,9 +958,7 @@ exports[`MPollBody renders a poll with no votes 1`] = `
              </div>
              <div
                class="mx_PollOption_optionVoteCount"
-              >
-                
-              </div>
+              />
            </div>
          </div>
          <div
@@ -1014,9 +1002,7 @@ exports[`MPollBody renders a poll with no votes 1`] = `
              </div>
              <div
                class="mx_PollOption_optionVoteCount"
-              >
-                
-              </div>
+              />
            </div>
          </div>
          <div
@@ -1060,9 +1046,7 @@ exports[`MPollBody renders a poll with no votes 1`] = `
              </div>
              <div
                class="mx_PollOption_optionVoteCount"
-              >
-                
-              </div>
+              />
            </div>
          </div>
          <div
@@ -1496,9 +1480,7 @@ exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
              </div>
              <div
                class="mx_PollOption_optionVoteCount"
-              >
-                
-              </div>
+              />
            </div>
          </div>
          <div
@@ -1542,9 +1524,7 @@ exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
              </div>
              <div
                class="mx_PollOption_optionVoteCount"
-              >
-                
-              </div>
+              />
            </div>
          </div>
          <div
@@ -1588,9 +1568,7 @@ exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
              </div>
              <div
                class="mx_PollOption_optionVoteCount"
-              >
-                
-              </div>
+              />
            </div>
          </div>
          <div
@@ -1634,9 +1612,7 @@ exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
              </div>
              <div
                class="mx_PollOption_optionVoteCount"
-              >
-                
-              </div>
+              />
            </div>
          </div>
          <div
--- a/test/unit-tests/components/views/polls/pollHistory/PollHistory-test.tsx
+++ b/test/unit-tests/components/views/polls/pollHistory/PollHistory-test.tsx
@@ -62,6 +62,7 @@ describe("<PollHistory />", () => {
            wrapper: ({ children }) => (
                <MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
            ),
+            legacyRoot: true,
        });

    beforeAll(() => {
--- a/test/unit-tests/components/views/polls/pollHistory/PollListItemEnded-test.tsx
+++ b/test/unit-tests/components/views/polls/pollHistory/PollListItemEnded-test.tsx
@@ -12,7 +12,6 @@ import { MatrixEvent, Poll, Room, M_TEXT } from "matrix-js-sdk/src/matrix";

 import { PollListItemEnded } from "../../../../../../src/components/views/polls/pollHistory/PollListItemEnded";
 import {
-    flushPromises,
    getMockClientWithEventEmitter,
    makePollEndEvent,
    makePollResponseEvent,
@@ -20,7 +19,6 @@ import {
    mockClientMethodsUser,
    mockIntlDateTimeFormat,
    setupRoomWithPollEvents,
-    unmockIntlDateTimeFormat,
 } from "../../../../../test-utils";

 describe("<PollListItemEnded />", () => {
@@ -54,14 +52,14 @@ describe("<PollListItemEnded />", () => {
    const getComponent = (props: { event: MatrixEvent; poll: Poll }) =>
        render(<PollListItemEnded {...props} onClick={jest.fn()} />);

-    beforeAll(() => {
+    beforeEach(() => {
        // mock default locale to en-GB and set timezone
        // so these tests run the same everywhere
        mockIntlDateTimeFormat();
    });

-    afterAll(() => {
-        unmockIntlDateTimeFormat();
+    afterEach(() => {
+        jest.resetAllMocks();
    });

    it("renders a poll with no responses", async () => {
@@ -81,10 +79,8 @@ describe("<PollListItemEnded />", () => {
        await setupRoomWithPollEvents([pollStartEvent], responses, [pollEndEvent], mockClient, room);
        const poll = room.polls.get(pollId)!;

-        const { getByText } = getComponent({ event: pollStartEvent, poll });
-        // fetch relations
-        await flushPromises();
-        expect(getByText("Final result based on 3 votes")).toBeInTheDocument();
+        const { getByText, findByText } = getComponent({ event: pollStartEvent, poll });
+        await expect(findByText("Final result based on 3 votes")).resolves.toBeInTheDocument();
        // winning answer
        expect(getByText("Nissan Silvia S15")).toBeInTheDocument();
    });
@@ -99,10 +95,8 @@ describe("<PollListItemEnded />", () => {
        await setupRoomWithPollEvents([pollStartEvent], responses, [pollEndEvent], mockClient, room);
        const poll = room.polls.get(pollId)!;

-        const { getByText } = getComponent({ event: pollStartEvent, poll });
-        // fetch relations
-        await flushPromises();
-        expect(getByText("Final result based on 4 votes")).toBeInTheDocument();
+        const { getByText, findByText } = getComponent({ event: pollStartEvent, poll });
+        await expect(findByText("Final result based on 4 votes")).resolves.toBeInTheDocument();
        // both answers answer
        expect(getByText("Nissan Silvia S15")).toBeInTheDocument();
        expect(getByText("Mitsubishi Lancer Evolution IX")).toBeInTheDocument();
@@ -120,12 +114,10 @@ describe("<PollListItemEnded />", () => {
        await setupRoomWithPollEvents([pollStartEvent], responses, [pollEndEvent], mockClient, room);
        const poll = room.polls.get(pollId)!;

-        const { getByText } = getComponent({ event: pollStartEvent, poll });
-        // fetch relations
-        await flushPromises();
+        const { getByText, findByText } = getComponent({ event: pollStartEvent, poll });

        // still only 3 unique votes
-        expect(getByText("Final result based on 3 votes")).toBeInTheDocument();
+        await expect(findByText("Final result based on 3 votes")).resolves.toBeInTheDocument();
        // only latest vote counted
        expect(getByText("Nissan Silvia S15")).toBeInTheDocument();
    });
@@ -139,12 +131,10 @@ describe("<PollListItemEnded />", () => {
        await setupRoomWithPollEvents([pollStartEvent], responses, [pollEndEvent], mockClient, room);
        const poll = room.polls.get(pollId)!;

-        const { getByText } = getComponent({ event: pollStartEvent, poll });
-        // fetch relations
-        await flushPromises();
+        const { findByText } = getComponent({ event: pollStartEvent, poll });

        // invalid vote excluded
-        expect(getByText("Final result based on 2 votes")).toBeInTheDocument();
+        await expect(findByText("Final result based on 2 votes")).resolves.toBeInTheDocument();
    });

    it("updates on new responses", async () => {
@@ -156,10 +146,8 @@ describe("<PollListItemEnded />", () => {
        const poll = room.polls.get(pollId)!;

        const { getByText, queryByText, findByText } = getComponent({ event: pollStartEvent, poll });
-        // fetch relations
-        await flushPromises();

-        expect(getByText("Final result based on 2 votes")).toBeInTheDocument();
+        await expect(findByText("Final result based on 2 votes")).resolves.toBeInTheDocument();

        await room.processPollEvents([
            makePollResponseEvent(pollId, [answerOne.id], "@han:domain.org", roomId, timestamp + 1),
--- a/test/unit-tests/components/views/polls/pollHistory/snapshots/PollHistory-test.tsx.snap
+++ b/test/unit-tests/components/views/polls/pollHistory/snapshots/PollHistory-test.tsx.snap
@@ -91,7 +91,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
            tabindex="0"
          >
            <div
-              aria-labelledby="floating-ui-10"
+              aria-labelledby=":ra:"
              class="mx_PollListItem_content"
            >
              <span>
@@ -116,7 +116,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
            tabindex="0"
          >
            <div
-              aria-labelledby="floating-ui-16"
+              aria-labelledby=":rg:"
              class="mx_PollListItem_content"
            >
              <span>
--- a/test/unit-tests/components/views/polls/pollHistory/snapshots/PollListItem-test.tsx.snap
+++ b/test/unit-tests/components/views/polls/pollHistory/snapshots/PollListItem-test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<PollListItem /> renders a poll 1`] = `
      tabindex="0"
    >
      <div
-        aria-labelledby="floating-ui-1"
+        aria-labelledby=":r0:"
        class="mx_PollListItem_content"
      >
        <span>
--- a/test/unit-tests/components/views/polls/pollHistory/snapshots/PollListItemEnded-test.tsx.snap
+++ b/test/unit-tests/components/views/polls/pollHistory/snapshots/PollListItemEnded-test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<PollListItemEnded /> renders a poll with no responses 1`] = `
      tabindex="0"
    >
      <div
-        aria-labelledby="floating-ui-1"
+        aria-labelledby=":r0:"
        class="mx_PollListItemEnded_content"
      >
        <div
--- a/test/unit-tests/components/views/right_panel/UserInfo-test.tsx
+++ b/test/unit-tests/components/views/right_panel/UserInfo-test.tsx
@@ -200,6 +200,7 @@ describe("<UserInfo />", () => {

        return render(<UserInfo {...defaultProps} {...props} />, {
            wrapper: Wrapper,
+            legacyRoot: true,
        });
    };

@@ -340,6 +341,9 @@ describe("<UserInfo />", () => {
                <MatrixClientContext.Provider value={mockClient}>
                    <UserInfo {...defaultProps} />
                </MatrixClientContext.Provider>,
+                {
+                    legacyRoot: true,
+                },
            );

            screen.getByRole("button", { name: "Send message" });
@@ -355,6 +359,9 @@ describe("<UserInfo />", () => {
                        <MatrixClientContext.Provider value={mockClient}>
                            <UserInfo {...defaultProps} />
                        </MatrixClientContext.Provider>,
+                        {
+                            legacyRoot: true,
+                        },
                    );

                    expect(screen.queryByRole("button", { name: "Message" })).toBeNull();
@@ -703,6 +710,7 @@ describe("<UserInfoHeader />", () => {

        return render(<UserInfoHeader {...defaultProps} {...props} />, {
            wrapper: Wrapper,
+            legacyRoot: true,
        });
    };

@@ -742,6 +750,7 @@ describe("<DeviceItem />", () => {

        return render(<DeviceItem {...defaultProps} {...props} />, {
            wrapper: Wrapper,
+            legacyRoot: true,
        });
    };

@@ -885,6 +894,7 @@ describe("<UserOptionsSection />", () => {

        return render(<UserOptionsSection {...defaultProps} {...props} />, {
            wrapper: Wrapper,
+            legacyRoot: true,
        });
    };

@@ -1111,6 +1121,7 @@ describe("<PowerLevelEditor />", () => {

        return render(<PowerLevelEditor {...defaultProps} {...props} />, {
            wrapper: Wrapper,
+            legacyRoot: true,
        });
    };

@@ -1170,6 +1181,7 @@ describe("<RoomKickButton />", () => {

        return render(<RoomKickButton {...defaultProps} {...props} />, {
            wrapper: Wrapper,
+            legacyRoot: true,
        });
    };

@@ -1277,6 +1289,7 @@ describe("<BanToggleButton />", () => {

        return render(<BanToggleButton {...defaultProps} {...props} />, {
            wrapper: Wrapper,
+            legacyRoot: true,
        });
    };

@@ -1409,6 +1422,7 @@ describe("<RoomAdminToolsContainer />", () => {

        return render(<RoomAdminToolsContainer {...defaultProps} {...props} />, {
            wrapper: Wrapper,
+            legacyRoot: true,
        });
    };

--- a/test/unit-tests/components/views/right_panel/snapshots/BaseCard-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/snapshots/BaseCard-test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<BaseCard /> should close when clicking X button 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"
--- a/test/unit-tests/components/views/right_panel/snapshots/ExtensionsCard-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/snapshots/ExtensionsCard-test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<ExtensionsCard /> should render 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"
@@ -119,7 +119,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
        </p>
      </div>
      <button
-        aria-labelledby="floating-ui-6"
+        aria-labelledby=":r6:"
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
        role="button"
--- a/test/unit-tests/components/views/right_panel/snapshots/PinnedMessagesCard-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/snapshots/PinnedMessagesCard-test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
        </p>
      </div>
      <button
-        aria-labelledby="floating-ui-12"
+        aria-labelledby=":re:"
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
        role="button"
@@ -100,7 +100,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
        </p>
      </div>
      <button
-        aria-labelledby="floating-ui-18"
+        aria-labelledby=":rk:"
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
        role="button"
@@ -156,7 +156,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
              class="mx_PinnedEventTile_top"
            >
              <span
-                aria-labelledby="floating-ui-24"
+                aria-labelledby=":rq:"
                class="mx_PinnedEventTile_sender mx_Username_color3"
              >
                @alice:example.org
@@ -168,7 +168,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                aria-label="Open menu"
                class="_icon-button_bh2qc_17"
                data-state="closed"
-                id="radix-2"
+                id="radix-:rv:"
                role="button"
                style="--cpd-icon-button-size: 24px;"
                tabindex="0"
@@ -233,7 +233,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
              class="mx_PinnedEventTile_top"
            >
              <span
-                aria-labelledby="floating-ui-29"
+                aria-labelledby=":r11:"
                class="mx_PinnedEventTile_sender mx_Username_color3"
              >
                @alice:example.org
@@ -245,7 +245,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                aria-label="Open menu"
                class="_icon-button_bh2qc_17"
                data-state="closed"
-                id="radix-3"
+                id="radix-:r16:"
                role="button"
                style="--cpd-icon-button-size: 24px;"
                tabindex="0"
@@ -319,7 +319,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
        </p>
      </div>
      <button
-        aria-labelledby="floating-ui-712"
+        aria-labelledby=":rt2:"
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
        role="button"
@@ -375,7 +375,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
              class="mx_PinnedEventTile_top"
            >
              <span
-                aria-labelledby="floating-ui-718"
+                aria-labelledby=":rt8:"
                class="mx_PinnedEventTile_sender mx_Username_color3"
              >
                @alice:example.org
@@ -387,7 +387,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                aria-label="Open menu"
                class="_icon-button_bh2qc_17"
                data-state="closed"
-                id="radix-218"
+                id="radix-:rtd:"
                role="button"
                style="--cpd-icon-button-size: 24px;"
                tabindex="0"
@@ -452,7 +452,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
              class="mx_PinnedEventTile_top"
            >
              <span
-                aria-labelledby="floating-ui-723"
+                aria-labelledby=":rtf:"
                class="mx_PinnedEventTile_sender mx_Username_color3"
              >
                @alice:example.org
@@ -464,7 +464,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                aria-label="Open menu"
                class="_icon-button_bh2qc_17"
                data-state="closed"
-                id="radix-219"
+                id="radix-:rtk:"
                role="button"
                style="--cpd-icon-button-size: 24px;"
                tabindex="0"
--- a/test/unit-tests/components/views/right_panel/snapshots/RoomSummaryCard-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/snapshots/RoomSummaryCard-test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
        class="mx_BaseCard_header_spacer"
      />
      <button
-        aria-labelledby="floating-ui-20"
+        aria-labelledby=":rm:"
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
        role="button"
@@ -188,7 +188,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
            <input
              aria-hidden="true"
              class="_input_qnvru_32"
-              id=":r3:"
+              id=":rr:"
              type="checkbox"
            />
            <div
@@ -669,7 +669,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
        class="mx_BaseCard_header_spacer"
      />
      <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"
@@ -805,7 +805,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
            <input
              aria-hidden="true"
              class="_input_qnvru_32"
-              id=":r1:"
+              id=":r5:"
              type="checkbox"
            />
            <div
@@ -1286,7 +1286,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
        class="mx_BaseCard_header_spacer"
      />
      <button
-        aria-labelledby="floating-ui-10"
+        aria-labelledby=":rb:"
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
        role="button"
@@ -1459,7 +1459,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
            <input
              aria-hidden="true"
              class="_input_qnvru_32"
-              id=":r2:"
+              id=":rg:"
              type="checkbox"
            />
            <div
--- a/test/unit-tests/components/views/right_panel/snapshots/UserInfo-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/snapshots/UserInfo-test.tsx.snap
@@ -88,7 +88,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
        </p>
      </div>
      <button
-        aria-labelledby="floating-ui-220"
+        aria-labelledby=":r6s:"
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
        role="button"
@@ -402,7 +402,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
        </p>
      </div>
      <button
-        aria-labelledby="floating-ui-290"
+        aria-labelledby=":r92:"
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
        role="button"
--- a/test/unit-tests/components/views/rooms/MemberList-test.tsx
+++ b/test/unit-tests/components/views/rooms/MemberList-test.tsx
@@ -398,10 +398,12 @@ describe("MemberList", () => {
                jest.spyOn(room, "canInvite").mockReturnValue(false);

                renderComponent();
-                await flushPromises();
+                await act(flushPromises);

                // button rendered but disabled
-                expect(screen.getByText("Invite to this room")).toHaveAttribute("aria-disabled", "true");
+                const button = document.querySelector(".mx_MemberList_invite");
+                expect(button).toHaveTextContent("Invite to this room");
+                expect(button).toHaveAttribute("aria-disabled", "true");
            });

            it("renders enabled invite button when current user is a member and has rights to invite", async () => {
--- a/test/unit-tests/components/views/rooms/MessageComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/MessageComposer-test.tsx
@@ -529,7 +529,9 @@ function wrapAndRender(
    );
    return {
        rawComponent: getRawComponent(props, roomContext, mockClient),
-        renderResult: render(getRawComponent(props, roomContext, mockClient)),
+        renderResult: render(getRawComponent(props, roomContext, mockClient), {
+            legacyRoot: true,
+        }),
        roomContext,
    };
 }
--- a/test/unit-tests/components/views/rooms/RoomHeader/snapshots/VideoRoomChatButton-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomHeader/snapshots/VideoRoomChatButton-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<VideoRoomChatButton /> renders button with an unread marker when room is unread 1`] = `
 <button
  aria-label="Chat"
-  aria-labelledby="floating-ui-6"
+  aria-labelledby=":r6:"
  class="_icon-button_bh2qc_17"
  data-indicator="default"
  role="button"
--- a/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx
@@ -374,7 +374,7 @@ describe("<SendMessageComposer/>", () => {
            </MatrixClientContext.Provider>
        );
        const getComponent = (props = {}, roomContext = defaultRoomContext, client = mockClient) => {
-            return render(getRawComponent(props, roomContext, client));
+            return render(getRawComponent(props, roomContext, client), { legacyRoot: true });
        };

        it("renders text and placeholder correctly", () => {
--- a/test/unit-tests/components/views/rooms/snapshots/PinnedEventTile-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/snapshots/PinnedEventTile-test.tsx.snap
@@ -25,7 +25,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
        class="mx_PinnedEventTile_top"
      >
        <span
-          aria-labelledby="floating-ui-1"
+          aria-labelledby=":r0:"
          class="mx_PinnedEventTile_sender mx_Username_color2"
        >
          @alice:server.org
@@ -37,7 +37,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
          aria-label="Open menu"
          class="_icon-button_bh2qc_17"
          data-state="closed"
-          id="radix-0"
+          id="radix-:r5:"
          role="button"
          style="--cpd-icon-button-size: 24px;"
          tabindex="0"
@@ -101,7 +101,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
        class="mx_PinnedEventTile_top"
      >
        <span
-          aria-labelledby="floating-ui-6"
+          aria-labelledby=":r8:"
          class="mx_PinnedEventTile_sender mx_Username_color2"
        >
          @alice:server.org
@@ -113,7 +113,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
          aria-label="Open menu"
          class="_icon-button_bh2qc_17"
          data-state="closed"
-          id="radix-2"
+          id="radix-:rd:"
          role="button"
          style="--cpd-icon-button-size: 24px;"
          tabindex="0"
@@ -181,7 +181,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
 exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
 <div
  aria-label="Open menu"
-  aria-labelledby="radix-8"
+  aria-labelledby="radix-:r10:"
  aria-orientation="vertical"
  class="_menu_1x5h1_17"
  data-align="start"
@@ -190,7 +190,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
  data-side="right"
  data-state="open"
  dir="ltr"
-  id="radix-9"
+  id="radix-:r11:"
  role="menu"
  style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
  tabindex="-1"
@@ -372,7 +372,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
 exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`] = `
 <div
  aria-label="Open menu"
-  aria-labelledby="radix-4"
+  aria-labelledby="radix-:rl:"
  aria-orientation="vertical"
  class="_menu_1x5h1_17"
  data-align="start"
@@ -381,7 +381,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
  data-side="right"
  data-state="open"
  dir="ltr"
-  id="radix-5"
+  id="radix-:rm:"
  role="menu"
  style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
  tabindex="-1"
--- a/test/unit-tests/components/views/rooms/snapshots/ReadReceiptGroup-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/snapshots/ReadReceiptGroup-test.tsx.snap
@@ -3,7 +3,8 @@
 exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
 <div
  class="_tooltip_1pslb_17"
-  id="floating-ui-6"
+  data-floating-ui-focusable=""
+  id=":r6:"
  role="tooltip"
  style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
  tabindex="-1"
@@ -21,7 +22,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
      stroke="none"
    />
    <clippath
-      id="floating-ui-9"
+      id=":r9:"
    >
      <rect
        height="10"
@@ -32,13 +33,13 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
    </clippath>
  </svg>
  <span
-    id="floating-ui-4"
+    id=":r4:"
  >
    Alice
  </span>
  <span
    class="_caption_1pslb_37 cpd-theme-dark"
-    id="floating-ui-5"
+    id=":r5:"
  >
    @alice:example.org
  </span>
--- a/test/unit-tests/components/views/rooms/snapshots/RoomHeader-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/snapshots/RoomHeader-test.tsx.snap
@@ -47,7 +47,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
    >
      <button
-        aria-labelledby="floating-ui-1180"
+        aria-labelledby=":r154:"
        class="_icon-button_bh2qc_17"
        role="button"
        style="--cpd-icon-button-size: 32px;"
@@ -73,7 +73,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
      <button
        aria-disabled="true"
        aria-label="There's no one here to call"
-        aria-labelledby="floating-ui-1185"
+        aria-labelledby=":r159:"
        class="_icon-button_bh2qc_17"
        role="button"
        style="--cpd-icon-button-size: 32px;"
@@ -98,7 +98,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
      </button>
      <button
        aria-label="Room info"
-        aria-labelledby="floating-ui-1190"
+        aria-labelledby=":r15e:"
        class="_icon-button_bh2qc_17"
        role="button"
        style="--cpd-icon-button-size: 32px;"
@@ -123,7 +123,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
      </button>
      <button
        aria-label="Threads"
-        aria-labelledby="floating-ui-1195"
+        aria-labelledby=":r15j:"
        class="_icon-button_bh2qc_17"
        role="button"
        style="--cpd-icon-button-size: 32px;"
--- a/test/unit-tests/components/views/rooms/snapshots/ThirdPartyMemberInfo-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/snapshots/ThirdPartyMemberInfo-test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite 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"
@@ -93,7 +93,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
        </p>
      </div>
      <button
-        aria-labelledby="floating-ui-6"
+        aria-labelledby=":r6:"
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
        role="button"
--- a/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
@@ -77,6 +77,9 @@ describe("SendWysiwygComposer", () => {
                    />
                </RoomContext.Provider>
            </MatrixClientContext.Provider>,
+            {
+                legacyRoot: true,
+            },
        );
    };

--- a/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners-test.tsx
+++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners-test.tsx
@@ -6,8 +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 { renderHook } from "@testing-library/react-hooks";
-import { act } from "jest-matrix-react";
+import { renderHook, act } from "jest-matrix-react";

 import { usePlainTextListeners } from "../../../../../../../src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners";

--- a/test/unit-tests/components/views/settings/AddRemoveThreepids-test.tsx
+++ b/test/unit-tests/components/views/settings/AddRemoveThreepids-test.tsx
@@ -49,7 +49,7 @@ describe("AddRemoveThreepids", () => {
        clearAllModals();
    });

-    const clientProviderWrapper: React.FC = ({ children }) => (
+    const clientProviderWrapper: React.FC = ({ children }: React.PropsWithChildren) => (
        <MatrixClientContext.Provider value={client}>{children}</MatrixClientContext.Provider>
    );

--- a/test/unit-tests/components/views/settings/CryptographyPanel-test.tsx
+++ b/test/unit-tests/components/views/settings/CryptographyPanel-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { render } from "jest-matrix-react";
+import { render, waitFor } from "jest-matrix-react";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";

@@ -28,7 +28,7 @@ describe("CryptographyPanel", () => {
        mocked(client.getCrypto()!.getOwnDeviceKeys).mockResolvedValue({ ed25519: sessionKey, curve25519: "1234" });

        // When we render the CryptographyPanel
-        const rendered = render(<CryptographyPanel />);
+        const rendered = render(<CryptographyPanel />, { legacyRoot: true });

        // Then it displays info about the user's session
        const codes = rendered.container.querySelectorAll("code");
@@ -39,8 +39,7 @@ describe("CryptographyPanel", () => {
        expect(codes[1].innerHTML).toEqual("<strong>...</strong>");

        // Then the actual key
-        await TestUtils.flushPromises();
-        expect(codes[1].innerHTML).toEqual(sessionKeyFormatted);
+        await waitFor(() => expect(codes[1].innerHTML).toEqual(sessionKeyFormatted));
    });

    it("handles errors fetching session key", async () => {
@@ -62,7 +61,6 @@ describe("CryptographyPanel", () => {
        expect(codes[1].innerHTML).toEqual("<strong>...</strong>");

        // Then "not supported key
-        await TestUtils.flushPromises();
-        expect(codes[1].innerHTML).toEqual("<strong>&lt;not supported&gt;</strong>");
+        await waitFor(() => expect(codes[1].innerHTML).toEqual("<strong>&lt;not supported&gt;</strong>"));
    });
 });
--- a/test/unit-tests/components/views/settings/snapshots/LayoutSwitcher-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/snapshots/LayoutSwitcher-test.tsx.snap
@@ -27,7 +27,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
          <label
            aria-label="Modern"
            class="_label_dgy0u_67"
-            for="radix-0"
+            for="radix-:r0:"
          >
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -38,7 +38,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                <input
                  checked=""
                  class="_input_1vw5h_26"
-                  id="radix-0"
+                  id="radix-:r0:"
                  name="layout"
                  title=""
                  type="radio"
@@ -154,7 +154,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
          <label
            aria-label="Message bubbles"
            class="_label_dgy0u_67"
-            for="radix-1"
+            for="radix-:r9:"
          >
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -164,7 +164,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
              >
                <input
                  class="_input_1vw5h_26"
-                  id="radix-1"
+                  id="radix-:r9:"
                  name="layout"
                  title=""
                  type="radio"
@@ -280,7 +280,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
          <label
            aria-label="IRC (experimental)"
            class="_label_dgy0u_67"
-            for="radix-2"
+            for="radix-:ri:"
          >
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -290,7 +290,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
              >
                <input
                  class="_input_1vw5h_26"
-                  id="radix-2"
+                  id="radix-:ri:"
                  name="layout"
                  title=""
                  type="radio"
@@ -414,9 +414,9 @@ exports[`<LayoutSwitcher /> should render 1`] = `
              class="_container_qnvru_18"
            >
              <input
-                aria-describedby="radix-3"
+                aria-describedby="radix-:rs:"
                class="_input_qnvru_32"
-                id="radix-4"
+                id="radix-:rr:"
                name="compactLayout"
                title=""
                type="checkbox"
@@ -431,13 +431,13 @@ exports[`<LayoutSwitcher /> should render 1`] = `
          >
            <label
              class="_label_dgy0u_67"
-              for="radix-4"
+              for="radix-:rr:"
            >
              Show compact text and messages
            </label>
            <span
              class="_message_dgy0u_98 _help-message_dgy0u_104"
-              id="radix-3"
+              id="radix-:rs:"
            >
              Modern layout must be selected to use this feature.
            </span>
--- a/test/unit-tests/components/views/settings/snapshots/SecureBackupPanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/snapshots/SecureBackupPanel-test.tsx.snap
@@ -39,7 +39,6 @@ exports[`<SecureBackupPanel /> handles error fetching backup 1`] = `
        </th>
        <td>
          not found locally
-          
        </td>
      </tr>
      <tr>
@@ -117,7 +116,6 @@ exports[`<SecureBackupPanel /> suggests connecting session to key backup when ba
        </th>
        <td>
          not found locally
-          
        </td>
      </tr>
      <tr>
@@ -168,7 +166,6 @@ exports[`<SecureBackupPanel /> suggests connecting session to key backup when ba
        </td>
      </tr>
    </table>
-    
    <div />
  </details>
  <div
--- a/test/unit-tests/components/views/settings/snapshots/ThemeChoicePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/snapshots/ThemeChoicePanel-test.tsx.snap
@@ -32,7 +32,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
            >
              <input
                class="_input_qnvru_32"
-                id="radix-48"
+                id="radix-:r28:"
                name="systemTheme"
                title=""
                type="checkbox"
@@ -47,7 +47,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
          >
            <label
              class="_label_dgy0u_67"
-              for="radix-48"
+              for="radix-:r28:"
            >
              Match system theme
            </label>
@@ -69,7 +69,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
              <input
                checked=""
                class="_input_1vw5h_26"
-                id="radix-49"
+                id="radix-:r29:"
                name="themeSelector"
                title=""
                type="radio"
@@ -85,7 +85,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
          >
            <label
              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-49"
+              for="radix-:r29:"
            >
              Light
            </label>
@@ -102,7 +102,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
            >
              <input
                class="_input_1vw5h_26"
-                id="radix-50"
+                id="radix-:r2a:"
                name="themeSelector"
                title=""
                type="radio"
@@ -118,7 +118,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
          >
            <label
              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-50"
+              for="radix-:r2a:"
            >
              Dark
            </label>
@@ -135,7 +135,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
            >
              <input
                class="_input_1vw5h_26"
-                id="radix-51"
+                id="radix-:r2b:"
                name="themeSelector"
                title=""
                type="radio"
@@ -151,7 +151,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
          >
            <label
              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-51"
+              for="radix-:r2b:"
            >
              High contrast
            </label>
@@ -168,7 +168,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
            >
              <input
                class="_input_1vw5h_26"
-                id="radix-52"
+                id="radix-:r2c:"
                name="themeSelector"
                title=""
                type="radio"
@@ -184,7 +184,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
          >
            <label
              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-52"
+              for="radix-:r2c:"
            >
              Alice theme
            </label>
@@ -202,7 +202,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
          >
            <label
              class="_label_dgy0u_67"
-              for="radix-54"
+              for="radix-:r2d:"
            >
              Add custom theme
            </label>
@@ -210,9 +210,9 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
              class="_controls_1h4nb_17"
            >
              <input
-                aria-describedby="radix-53"
+                aria-describedby="radix-:r2e:"
                class="_control_9gon8_18"
-                id="radix-54"
+                id="radix-:r2d:"
                name="input"
                title=""
                value=""
@@ -220,7 +220,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
            </div>
            <span
              class="_message_dgy0u_98 _help-message_dgy0u_104"
-              id="radix-53"
+              id="radix-:r2e:"
            >
              Enter the URL of a custom theme you want to apply.
            </span>
@@ -240,7 +240,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
            </span>
            <button
              aria-label="Delete"
-              aria-labelledby="floating-ui-24"
+              aria-labelledby=":r2f:"
              class="_icon-button_bh2qc_17 _destructive_bh2qc_83"
              role="button"
              style="--cpd-icon-button-size: 32px;"
@@ -309,7 +309,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
            >
              <input
                class="_input_qnvru_32"
-                id="radix-32"
+                id="radix-:r10:"
                name="systemTheme"
                title=""
                type="checkbox"
@@ -324,7 +324,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
          >
            <label
              class="_label_dgy0u_67"
-              for="radix-32"
+              for="radix-:r10:"
            >
              Match system theme
            </label>
@@ -346,7 +346,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
              <input
                checked=""
                class="_input_1vw5h_26"
-                id="radix-33"
+                id="radix-:r11:"
                name="themeSelector"
                title=""
                type="radio"
@@ -362,7 +362,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
          >
            <label
              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-33"
+              for="radix-:r11:"
            >
              Light
            </label>
@@ -379,7 +379,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
            >
              <input
                class="_input_1vw5h_26"
-                id="radix-34"
+                id="radix-:r12:"
                name="themeSelector"
                title=""
                type="radio"
@@ -395,7 +395,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
          >
            <label
              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-34"
+              for="radix-:r12:"
            >
              Dark
            </label>
@@ -412,7 +412,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
            >
              <input
                class="_input_1vw5h_26"
-                id="radix-35"
+                id="radix-:r13:"
                name="themeSelector"
                title=""
                type="radio"
@@ -428,7 +428,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
          >
            <label
              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-35"
+              for="radix-:r13:"
            >
              High contrast
            </label>
@@ -445,7 +445,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
            >
              <input
                class="_input_1vw5h_26"
-                id="radix-36"
+                id="radix-:r14:"
                name="themeSelector"
                title=""
                type="radio"
@@ -461,7 +461,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
          >
            <label
              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-36"
+              for="radix-:r14:"
            >
              Alice theme
            </label>
@@ -479,7 +479,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
          >
            <label
              class="_label_dgy0u_67"
-              for="radix-38"
+              for="radix-:r15:"
            >
              Add custom theme
            </label>
@@ -487,9 +487,9 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
              class="_controls_1h4nb_17"
            >
              <input
-                aria-describedby="radix-37"
+                aria-describedby="radix-:r16:"
                class="_control_9gon8_18"
-                id="radix-38"
+                id="radix-:r15:"
                name="input"
                title=""
                value=""
@@ -497,7 +497,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
            </div>
            <span
              class="_message_dgy0u_98 _help-message_dgy0u_104"
-              id="radix-37"
+              id="radix-:r16:"
            >
              Enter the URL of a custom theme you want to apply.
            </span>
@@ -517,7 +517,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
            </span>
            <button
              aria-label="Delete"
-              aria-labelledby="floating-ui-1"
+              aria-labelledby=":r17:"
              class="_icon-button_bh2qc_17 _destructive_bh2qc_83"
              role="button"
              style="--cpd-icon-button-size: 32px;"
@@ -586,7 +586,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
            >
              <input
                class="_input_qnvru_32"
-                id="radix-0"
+                id="radix-:r0:"
                name="systemTheme"
                title=""
                type="checkbox"
@@ -601,7 +601,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
          >
            <label
              class="_label_dgy0u_67"
-              for="radix-0"
+              for="radix-:r0:"
            >
              Match system theme
            </label>
@@ -623,7 +623,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
              <input
                checked=""
                class="_input_1vw5h_26"
-                id="radix-1"
+                id="radix-:r1:"
                name="themeSelector"
                title=""
                type="radio"
@@ -639,7 +639,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
          >
            <label
              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-1"
+              for="radix-:r1:"
            >
              Light
            </label>
@@ -656,7 +656,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
            >
              <input
                class="_input_1vw5h_26"
-                id="radix-2"
+                id="radix-:r2:"
                name="themeSelector"
                title=""
                type="radio"
@@ -672,7 +672,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
          >
            <label
              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-2"
+              for="radix-:r2:"
            >
              Dark
            </label>
@@ -689,7 +689,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
            >
              <input
                class="_input_1vw5h_26"
-                id="radix-3"
+                id="radix-:r3:"
                name="themeSelector"
                title=""
                type="radio"
@@ -705,7 +705,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
          >
            <label
              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-3"
+              for="radix-:r3:"
            >
              High contrast
            </label>
--- a/test/unit-tests/components/views/settings/devices/LoginWithQR-test.tsx
+++ b/test/unit-tests/components/views/settings/devices/LoginWithQR-test.tsx
@@ -108,7 +108,9 @@ describe("<LoginWithQR />", () => {
        test("no homeserver support", async () => {
            // simulate no support
            jest.spyOn(MSC3906Rendezvous.prototype, "generateCode").mockRejectedValue("");
-            render(getComponent({ client }));
+            render(getComponent({ client }), {
+                legacyRoot: true,
+            });
            await waitFor(() =>
                expect(mockedFlow).toHaveBeenLastCalledWith({
                    phase: Phase.Error,
@@ -122,7 +124,9 @@ describe("<LoginWithQR />", () => {

        test("failed to connect", async () => {
            jest.spyOn(MSC3906Rendezvous.prototype, "startAfterShowingCode").mockRejectedValue("");
-            render(getComponent({ client }));
+            render(getComponent({ client }), {
+                legacyRoot: true,
+            });
            await waitFor(() =>
                expect(mockedFlow).toHaveBeenLastCalledWith({
                    phase: Phase.Error,
@@ -138,7 +142,9 @@ describe("<LoginWithQR />", () => {
        test("render QR then back", async () => {
            const onFinished = jest.fn();
            jest.spyOn(MSC3906Rendezvous.prototype, "startAfterShowingCode").mockReturnValue(unresolvedPromise());
-            render(getComponent({ client, onFinished }));
+            render(getComponent({ client, onFinished }), {
+                legacyRoot: true,
+            });
            const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];

            await waitFor(() =>
@@ -166,7 +172,9 @@ describe("<LoginWithQR />", () => {

        test("render QR then decline", async () => {
            const onFinished = jest.fn();
-            render(getComponent({ client, onFinished }));
+            render(getComponent({ client, onFinished }), {
+                legacyRoot: true,
+            });
            const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];

            await waitFor(() =>
@@ -195,7 +203,9 @@ describe("<LoginWithQR />", () => {
        test("approve - no crypto", async () => {
            (client as any).getCrypto = () => undefined;
            const onFinished = jest.fn();
-            render(getComponent({ client, onFinished }));
+            render(getComponent({ client, onFinished }), {
+                legacyRoot: true,
+            });
            const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];

            await waitFor(() =>
@@ -235,7 +245,9 @@ describe("<LoginWithQR />", () => {
            jest.spyOn(MSC3906Rendezvous.prototype, "verifyNewDeviceOnExistingDevice").mockImplementation(() =>
                unresolvedPromise(),
            );
-            render(getComponent({ client, onFinished }));
+            render(getComponent({ client, onFinished }), {
+                legacyRoot: true,
+            });
            const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];

            await waitFor(() =>
@@ -272,7 +284,9 @@ describe("<LoginWithQR />", () => {

        test("approve + verify", async () => {
            const onFinished = jest.fn();
-            render(getComponent({ client, onFinished }));
+            render(getComponent({ client, onFinished }), {
+                legacyRoot: true,
+            });
            const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];

            await waitFor(() =>
@@ -302,7 +316,9 @@ describe("<LoginWithQR />", () => {
        test("approve - rate limited", async () => {
            mocked(client.requestLoginToken).mockRejectedValue(new HTTPError("rate limit reached", 429));
            const onFinished = jest.fn();
-            render(getComponent({ client, onFinished }));
+            render(getComponent({ client, onFinished }), {
+                legacyRoot: true,
+            });
            const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];

            await waitFor(() =>
@@ -346,7 +362,9 @@ describe("<LoginWithQR />", () => {
        test("render QR then back", async () => {
            const onFinished = jest.fn();
            jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockReturnValue(unresolvedPromise());
-            render(getComponent({ client, onFinished }));
+            render(getComponent({ client, onFinished }), {
+                legacyRoot: true,
+            });

            await waitFor(() =>
                expect(mockedFlow).toHaveBeenLastCalledWith({
@@ -367,7 +385,9 @@ describe("<LoginWithQR />", () => {
        });

        test("failed to connect", async () => {
-            render(getComponent({ client }));
+            render(getComponent({ client }), {
+                legacyRoot: true,
+            });
            jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({});
            jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockRejectedValue(
                new HTTPError("Internal Server Error", 500),
@@ -379,7 +399,9 @@ describe("<LoginWithQR />", () => {
        test("reciprocates login", async () => {
            jest.spyOn(global.window, "open");

-            render(getComponent({ client }));
+            render(getComponent({ client }), {
+                legacyRoot: true,
+            });
            jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({});
            jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockResolvedValue({
                verificationUri: "mock-verification-uri",
@@ -405,7 +427,9 @@ describe("<LoginWithQR />", () => {
        });

        test("handles errors during reciprocation", async () => {
-            render(getComponent({ client }));
+            render(getComponent({ client }), {
+                legacyRoot: true,
+            });
            jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({});
            jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockResolvedValue({});
            await waitFor(() =>
@@ -432,7 +456,9 @@ describe("<LoginWithQR />", () => {
        });

        test("handles user cancelling during reciprocation", async () => {
-            render(getComponent({ client }));
+            render(getComponent({ client }), {
+                legacyRoot: true,
+            });
            jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({});
            jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockResolvedValue({});
            jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockResolvedValue({});
--- a/test/unit-tests/components/views/settings/devices/snapshots/FilteredDeviceListHeader-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/devices/snapshots/FilteredDeviceListHeader-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
      >
        <input
          aria-label="Deselect all"
-          aria-labelledby="floating-ui-6"
+          aria-labelledby=":r6:"
          checked=""
          data-testid="device-select-all-checkbox"
          id="device-select-all-checkbox"
@@ -59,7 +59,7 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
      >
        <input
          aria-label="Select all"
-          aria-labelledby="floating-ui-1"
+          aria-labelledby=":r0:"
          data-testid="device-select-all-checkbox"
          id="device-select-all-checkbox"
          type="checkbox"
--- a/test/unit-tests/components/views/settings/tabs/room/SecurityRoomSettingsTab-test.tsx
+++ b/test/unit-tests/components/views/settings/tabs/room/SecurityRoomSettingsTab-test.tsx
@@ -39,6 +39,7 @@ describe("<SecurityRoomSettingsTab />", () => {
            wrapper: ({ children }) => (
                <MatrixClientContext.Provider value={client}>{children}</MatrixClientContext.Provider>
            ),
+            legacyRoot: true,
        });

    const setRoomStateEvents = (
--- a/test/unit-tests/components/views/settings/tabs/user/SessionManagerTab-test.tsx
+++ b/test/unit-tests/components/views/settings/tabs/user/SessionManagerTab-test.tsx
@@ -926,10 +926,10 @@ describe("<SessionManagerTab />", () => {
                    devices: [alicesDevice, alicesMobileDevice, alicesOlderMobileDevice],
                });

-                const { getByTestId, findByTestId } = render(getComponent());
+                const { getByTestId, findByTestId } = render(getComponent(), { legacyRoot: true });

                await waitForElementToBeRemoved(() => screen.queryAllByRole("progressbar"));
-                await toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
+                toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);

                const signOutButton = await within(
                    await findByTestId(`device-detail-${alicesMobileDevice.device_id}`),
@@ -1002,7 +1002,7 @@ describe("<SessionManagerTab />", () => {
                        devices: [alicesDevice, alicesOlderMobileDevice],
                    });

-                const { getByTestId, getByLabelText } = render(getComponent());
+                const { getByTestId, getByLabelText } = render(getComponent(), { legacyRoot: true });

                await act(flushPromises);

@@ -1046,7 +1046,7 @@ describe("<SessionManagerTab />", () => {
                        type: "m.id.user",
                        user: aliceId,
                    },
-                    password: "",
+                    password: "topsecret",
                    type: "m.login.password",
                });
                // devices refreshed
--- a/test/unit-tests/components/views/settings/tabs/user/VoiceUserSettingsTab-test.tsx
+++ b/test/unit-tests/components/views/settings/tabs/user/VoiceUserSettingsTab-test.tsx
@@ -58,17 +58,16 @@ describe("<VoiceUserSettingsTab />", () => {
    describe("devices", () => {
        it("renders dropdowns for input devices", async () => {
            render(getComponent());
-            await flushPromises();

-            expect(screen.getByLabelText("Microphone")).toHaveDisplayValue(audioIn1.label);
-            expect(screen.getByLabelText("Camera")).toHaveDisplayValue(videoIn1.label);
+            await expect(screen.findByLabelText("Microphone")).resolves.toHaveDisplayValue(audioIn1.label);
+            await expect(screen.findByLabelText("Camera")).resolves.toHaveDisplayValue(videoIn1.label);
        });

        it("updates device", async () => {
            render(getComponent());
            await flushPromises();

-            fireEvent.change(screen.getByLabelText("Camera"), { target: { value: videoIn2.deviceId } });
+            fireEvent.change(await screen.findByLabelText("Camera"), { target: { value: videoIn2.deviceId } });

            expect(MediaDeviceHandlerMock.instance.setDevice).toHaveBeenCalledWith(
                videoIn2.deviceId,
--- a/test/unit-tests/components/views/settings/tabs/user/snapshots/AccountUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/snapshots/AccountUserSettingsTab-test.tsx.snap
@@ -42,14 +42,14 @@ exports[`<AccountUserSettingsTab /> 3pids should display 3pid email addresses an
      >
        <input
          autocomplete="email"
-          id="mx_Field_9"
+          id="mx_Field_3"
          label="Email Address"
          placeholder="Email Address"
          type="text"
          value=""
        />
        <label
-          for="mx_Field_9"
+          for="mx_Field_3"
        >
          Email Address
        </label>
@@ -145,14 +145,14 @@ exports[`<AccountUserSettingsTab /> 3pids should display 3pid email addresses an
        </span>
        <input
          autocomplete="tel-national"
-          id="mx_Field_10"
+          id="mx_Field_4"
          label="Phone Number"
          placeholder="Phone Number"
          type="text"
          value=""
        />
        <label
-          for="mx_Field_10"
+          for="mx_Field_4"
        >
          Phone Number
        </label>
--- a/test/unit-tests/components/views/settings/tabs/user/snapshots/AppearanceUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/snapshots/AppearanceUserSettingsTab-test.tsx.snap
@@ -46,7 +46,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                      <input
                        class="_input_1vw5h_26"
                        disabled=""
-                        id="radix-0"
+                        id="radix-:r0:"
                        name="themeSelector"
                        title=""
                        type="radio"
@@ -62,7 +62,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                  >
                    <label
                      class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
-                      for="radix-0"
+                      for="radix-:r0:"
                    >
                      Light
                    </label>
@@ -80,7 +80,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                      <input
                        class="_input_1vw5h_26"
                        disabled=""
-                        id="radix-1"
+                        id="radix-:r1:"
                        name="themeSelector"
                        title=""
                        type="radio"
@@ -96,7 +96,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                  >
                    <label
                      class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
-                      for="radix-1"
+                      for="radix-:r1:"
                    >
                      Dark
                    </label>
@@ -114,7 +114,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                      <input
                        class="_input_1vw5h_26"
                        disabled=""
-                        id="radix-2"
+                        id="radix-:r2:"
                        name="themeSelector"
                        title=""
                        type="radio"
@@ -130,7 +130,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                  >
                    <label
                      class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
-                      for="radix-2"
+                      for="radix-:r2:"
                    >
                      High contrast
                    </label>
@@ -170,7 +170,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                  <label
                    aria-label="Modern"
                    class="_label_dgy0u_67"
-                    for="radix-3"
+                    for="radix-:r3:"
                  >
                    <div
                      class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -181,7 +181,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                        <input
                          checked=""
                          class="_input_1vw5h_26"
-                          id="radix-3"
+                          id="radix-:r3:"
                          name="layout"
                          title=""
                          type="radio"
@@ -297,7 +297,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                  <label
                    aria-label="Message bubbles"
                    class="_label_dgy0u_67"
-                    for="radix-4"
+                    for="radix-:rc:"
                  >
                    <div
                      class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -307,7 +307,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                      >
                        <input
                          class="_input_1vw5h_26"
-                          id="radix-4"
+                          id="radix-:rc:"
                          name="layout"
                          title=""
                          type="radio"
@@ -423,7 +423,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                  <label
                    aria-label="IRC (experimental)"
                    class="_label_dgy0u_67"
-                    for="radix-5"
+                    for="radix-:rl:"
                  >
                    <div
                      class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -433,7 +433,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                      >
                        <input
                          class="_input_1vw5h_26"
-                          id="radix-5"
+                          id="radix-:rl:"
                          name="layout"
                          title=""
                          type="radio"
@@ -557,9 +557,9 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                      class="_container_qnvru_18"
                    >
                      <input
-                        aria-describedby="radix-6"
+                        aria-describedby="radix-:rv:"
                        class="_input_qnvru_32"
-                        id="radix-7"
+                        id="radix-:ru:"
                        name="compactLayout"
                        title=""
                        type="checkbox"
@@ -574,13 +574,13 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                  >
                    <label
                      class="_label_dgy0u_67"
-                      for="radix-7"
+                      for="radix-:ru:"
                    >
                      Show compact text and messages
                    </label>
                    <span
                      class="_message_dgy0u_98 _help-message_dgy0u_104"
-                      id="radix-6"
+                      id="radix-:rv:"
                    >
                      Modern layout must be selected to use this feature.
                    </span>
--- a/test/unit-tests/components/views/settings/tabs/user/snapshots/SecurityUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/snapshots/SecurityUserSettingsTab-test.tsx.snap
@@ -129,7 +129,6 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                    </th>
                    <td>
                      not found locally
-                      
                    </td>
                  </tr>
                  <tr>
--- a/test/unit-tests/components/views/settings/tabs/user/snapshots/SessionManagerTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/snapshots/SessionManagerTab-test.tsx.snap
@@ -370,7 +370,7 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
    >
      <input
        aria-label="Select all"
-        aria-labelledby="floating-ui-142"
+        aria-labelledby=":r3s:"
        data-testid="device-select-all-checkbox"
        id="device-select-all-checkbox"
        type="checkbox"
--- a/test/unit-tests/components/views/spaces/snapshots/SpacePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/snapshots/SpacePanel-test.tsx.snap
@@ -229,12 +229,12 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
      class="mx_ThreadsActivityCentre_container"
    >
      <button
-        aria-controls="floating-ui-40"
-        aria-describedby="floating-ui-40"
+        aria-controls=":r12:"
+        aria-describedby=":r12:"
        aria-expanded="true"
        aria-haspopup="dialog"
        aria-label="Threads"
-        aria-labelledby="floating-ui-33"
+        aria-labelledby=":r14:"
        class="_icon-button_bh2qc_17 mx_ThreadsActivityCentreButton"
        role="button"
        style="--cpd-icon-button-size: 32px;"
@@ -258,6 +258,11 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
          </svg>
        </div>
      </button>
+      <span
+        aria-hidden="true"
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="-1"
+      />
      <span
        data-floating-ui-focus-guard=""
        data-type="outside"
@@ -266,7 +271,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
        tabindex="0"
      />
      <span
-        aria-owns="undefined"
+        aria-owns=":r19:"
        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
      />
      <span
--- a/test/unit-tests/components/views/spaces/snapshots/ThreadsActivityCentre-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/snapshots/ThreadsActivityCentre-test.tsx.snap
@@ -2,7 +2,7 @@

 exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] = `
 <div
-  aria-labelledby="radix-16"
+  aria-labelledby="radix-:r33:"
  aria-orientation="vertical"
  class="_menu_1x5h1_17"
  data-align="start"
@@ -11,14 +11,14 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
  data-side="top"
  data-state="open"
  dir="ltr"
-  id="radix-17"
+  id="radix-:r34:"
  role="menu"
  style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
  tabindex="-1"
 >
  <h3
    class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
-    id=":r6:"
+    id=":r3b:"
  >
    Threads activity
  </h3>
@@ -145,15 +145,15 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
      class="mx_ThreadsActivityCentre_container"
    >
      <button
-        aria-controls="radix-3"
+        aria-controls="radix-:r1d:"
        aria-disabled="false"
        aria-expanded="true"
        aria-haspopup="menu"
        aria-label="Threads"
-        aria-labelledby="floating-ui-42"
+        aria-labelledby=":r1e:"
        class="_icon-button_bh2qc_17 mx_ThreadsActivityCentreButton"
        data-state="open"
-        id="radix-2"
+        id="radix-:r1c:"
        role="button"
        style="--cpd-icon-button-size: 32px;"
        tabindex="0"
@@ -183,10 +183,11 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
    aria-hidden="true"
    data-aria-hidden="true"
    data-floating-ui-portal=""
-    id="floating-ui-46"
+    id=":r1i:"
  >
    <div
      class="_tooltip_1pslb_17 _invisible_1pslb_30"
+      data-floating-ui-focusable=""
      style="position: absolute; left: 0px; top: 0px; transform: translate(6px, 5px);"
      tabindex="-1"
    >
@@ -203,7 +204,7 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
          stroke="none"
        />
        <clippath
-          id="floating-ui-47"
+          id=":r1j:"
        >
          <rect
            height="10"
@@ -214,7 +215,7 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
        </clippath>
      </svg>
      <span
-        id="floating-ui-42"
+        id=":r1e:"
      >
        Threads
      </span>
@@ -226,7 +227,7 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
    style="position: fixed; left: 0px; top: 0px; transform: translate(0px, -8px); min-width: max-content; --radix-popper-available-width: 0px; --radix-popper-available-height: -8px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0% 0px;"
  >
    <div
-      aria-labelledby="radix-2"
+      aria-labelledby="radix-:r1c:"
      aria-orientation="vertical"
      class="_menu_1x5h1_17"
      data-align="start"
@@ -235,14 +236,14 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
      data-side="top"
      data-state="open"
      dir="ltr"
-      id="radix-3"
+      id="radix-:r1d:"
      role="menu"
      style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
      tabindex="-1"
    >
      <h3
        class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
-        id=":r1:"
+        id=":r1k:"
      >
        Threads activity
      </h3>
@@ -269,7 +270,7 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA

 exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
 <div
-  aria-labelledby="radix-22"
+  aria-labelledby="radix-:r3n:"
  aria-orientation="vertical"
  class="_menu_1x5h1_17"
  data-align="start"
@@ -278,14 +279,14 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
  data-side="top"
  data-state="open"
  dir="ltr"
-  id="radix-23"
+  id="radix-:r3o:"
  role="menu"
  style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
  tabindex="-1"
 >
  <h3
    class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
-    id=":r8:"
+    id=":r3v:"
  >
    Threads activity
  </h3>
@@ -303,7 +304,7 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `

 exports[`ThreadsActivityCentre should order the room with the same notification level by most recent 1`] = `
 <div
-  aria-labelledby="radix-24"
+  aria-labelledby="radix-:r40:"
  aria-orientation="vertical"
  class="_menu_1x5h1_17"
  data-align="start"
@@ -312,14 +313,14 @@ exports[`ThreadsActivityCentre should order the room with the same notification
  data-side="top"
  data-state="open"
  dir="ltr"
-  id="radix-25"
+  id="radix-:r41:"
  role="menu"
  style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
  tabindex="-1"
 >
  <h3
    class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
-    id=":r9:"
+    id=":r48:"
  >
    Threads activity
  </h3>
@@ -483,12 +484,12 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
      class="mx_ThreadsActivityCentre_container"
    >
      <button
-        aria-controls="floating-ui-8"
-        aria-describedby="floating-ui-8"
+        aria-controls=":ra:"
+        aria-describedby=":ra:"
        aria-expanded="true"
        aria-haspopup="dialog"
        aria-label="Threads"
-        aria-labelledby="floating-ui-10"
+        aria-labelledby=":rc:"
        class="_icon-button_bh2qc_17 mx_ThreadsActivityCentreButton"
        role="button"
        style="--cpd-icon-button-size: 32px;"
@@ -512,6 +513,11 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
          </svg>
        </div>
      </button>
+      <span
+        aria-hidden="true"
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="-1"
+      />
      <span
        data-floating-ui-focus-guard=""
        data-type="outside"
@@ -520,7 +526,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
        tabindex="0"
      />
      <span
-        aria-owns="floating-ui-15"
+        aria-owns=":rh:"
        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
      />
      <span
@@ -535,10 +541,11 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
  <div
    data-floating-ui-inert=""
    data-floating-ui-portal=""
-    id="floating-ui-14"
+    id=":rg:"
  >
    <div
      class="_tooltip_1pslb_17 _invisible_1pslb_30"
+      data-floating-ui-focusable=""
      style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
      tabindex="-1"
    >
@@ -555,7 +562,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
          stroke="none"
        />
        <clippath
-          id="floating-ui-16"
+          id=":ri:"
        >
          <rect
            height="10"
@@ -566,7 +573,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
        </clippath>
      </svg>
      <span
-        id="floating-ui-10"
+        id=":rc:"
      >
        Threads
      </span>
@@ -574,7 +581,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
  </div>
  <div
    data-floating-ui-portal=""
-    id="floating-ui-15"
+    id=":rh:"
  >
    <span
      data-floating-ui-focus-guard=""
@@ -585,10 +592,11 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
      tabindex="0"
    />
    <div
-      aria-describedby="floating-ui-7"
-      aria-labelledby="floating-ui-6"
+      aria-describedby=":r9:"
+      aria-labelledby=":r8:"
      class="_content_1oa1y_17"
-      id="floating-ui-8"
+      data-floating-ui-focusable=""
+      id=":ra:"
      role="dialog"
      style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
      tabindex="-1"
@@ -606,7 +614,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
          stroke="none"
        />
        <clippath
-          id="floating-ui-17"
+          id=":rj:"
        >
          <rect
            height="20"
@@ -618,13 +626,13 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
      </svg>
      <h3
        class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 _header_1oa1y_46"
-        id="floating-ui-6"
+        id=":r8:"
      >
        Threads Activity Centre
      </h3>
      <span
        class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _description_1oa1y_52"
-        id="floating-ui-7"
+        id=":r9:"
      >
        Threads notifications have moved, find them here from now on.
      </span>
--- a/test/unit-tests/components/views/spaces/useUnreadThreadRooms-test.tsx
+++ b/test/unit-tests/components/views/spaces/useUnreadThreadRooms-test.tsx
@@ -7,7 +7,6 @@
 */

 import React from "react";
-import { renderHook } from "@testing-library/react-hooks";
 import {
    MatrixClient,
    MatrixEventEvent,
@@ -15,7 +14,7 @@ import {
    PendingEventOrdering,
    Room,
 } from "matrix-js-sdk/src/matrix";
-import { act } from "jest-matrix-react";
+import { renderHook, act } from "jest-matrix-react";

 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import { stubClient } from "../../../../test-utils";
--- a/test/unit-tests/components/views/voip/VideoFeed-test.tsx
+++ b/test/unit-tests/components/views/voip/VideoFeed-test.tsx
@@ -54,7 +54,7 @@ describe("VideoFeed", () => {
            removeListener: jest.fn(),
        };
        render(<VideoFeed feed={feed as unknown as CallFeed} call={mockCall as unknown as MatrixCall} />);
-        const avatarImg = screen.getByRole("img");
+        const avatarImg = screen.getByRole("presentation");
        expect(avatarImg).toHaveAttribute("src", FAKE_AVATAR_URL);
    });
 });
--- a/test/unit-tests/hooks/room/useRoomThreadNotifications-test.tsx
+++ b/test/unit-tests/hooks/room/useRoomThreadNotifications-test.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 { renderHook } from "@testing-library/react-hooks/dom";
+import { renderHook } from "jest-matrix-react";
 import { MatrixClient, NotificationCountType, Room } from "matrix-js-sdk/src/matrix";

 import { useRoomThreadNotifications } from "../../../../src/hooks/room/useRoomThreadNotifications";
--- a/test/unit-tests/hooks/useDebouncedCallback-test.tsx
+++ b/test/unit-tests/hooks/useDebouncedCallback-test.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 { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "jest-matrix-react";

 import { useDebouncedCallback } from "../../../src/hooks/spotlight/useDebouncedCallback";

--- a/test/unit-tests/hooks/useLatestResult-test.tsx
+++ b/test/unit-tests/hooks/useLatestResult-test.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 { renderHook, RenderHookResult } from "@testing-library/react-hooks/dom";
+import { renderHook, RenderHookResult } from "jest-matrix-react";

 import { useLatestResult } from "../../../src/hooks/useLatestResult";

@@ -20,7 +20,7 @@ beforeEach(() => {
 });

 function simulateRequest(
-    hookResult: RenderHookResult<typeof useLatestResult, ReturnType<typeof useLatestResult>>["result"],
+    hookResult: RenderHookResult<ReturnType<typeof useLatestResult>, typeof useLatestResult>["result"],
    { id, delayInMs, result }: { id: string; delayInMs: number; result: string },
 ) {
    const [setQuery, setResult] = hookResult.current;
--- a/test/unit-tests/hooks/useNotificationSettings-test.tsx
+++ b/test/unit-tests/hooks/useNotificationSettings-test.tsx
@@ -6,8 +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 { renderHook } from "@testing-library/react-hooks/dom";
-import { waitFor } from "jest-matrix-react";
+import { waitFor, renderHook } from "jest-matrix-react";
 import { IPushRules, MatrixClient, PushRuleKind, RuleId } from "matrix-js-sdk/src/matrix";

 import { useNotificationSettings } from "../../../src/hooks/useNotificationSettings";
--- a/test/unit-tests/hooks/useProfileInfo-test.tsx
+++ b/test/unit-tests/hooks/useProfileInfo-test.tsx
@@ -6,8 +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 { waitFor } from "jest-matrix-react";
-import { renderHook, act } from "@testing-library/react-hooks/dom";
+import { waitFor, renderHook, act } from "jest-matrix-react";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";

 import { useProfileInfo } from "../../../src/hooks/useProfileInfo";
--- a/test/unit-tests/hooks/usePublicRoomDirectory-test.tsx
+++ b/test/unit-tests/hooks/usePublicRoomDirectory-test.tsx
@@ -6,8 +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 { waitFor } from "jest-matrix-react";
-import { renderHook, act } from "@testing-library/react-hooks/dom";
+import { waitFor, renderHook, act } from "jest-matrix-react";
 import { IRoomDirectoryOptions, MatrixClient } from "matrix-js-sdk/src/matrix";

 import { usePublicRoomDirectory } from "../../../src/hooks/usePublicRoomDirectory";
--- a/test/unit-tests/hooks/useRoomMembers-test.tsx
+++ b/test/unit-tests/hooks/useRoomMembers-test.tsx
@@ -6,8 +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 { waitFor } from "jest-matrix-react";
-import { renderHook, act } from "@testing-library/react-hooks/dom";
+import { waitFor, renderHook, act } from "jest-matrix-react";
 import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Michael Telatynski	260ec431c2	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-10-18 17:07:08 +01:00
Michael Telatynski	0f52667f3a	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-10-18 15:16:19 +01:00
Michael Telatynski	8bd3f5a3a0	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-10-18 14:51:34 +01:00
Michael Telatynski	21c4ddc2ea	Merge branch 'develop' of https://github.com/vector-im/element-web into t3chguy/react18/update Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> # Conflicts: # package.json # yarn.lock	2024-10-18 14:50:27 +01:00
Michael Telatynski	3cf9166c7d	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-10-17 16:42:59 +01:00
Michael Telatynski	2a313268ce	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-10-17 15:30:16 +01:00
Michael Telatynski	bf7f9873e3	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-10-17 15:05:16 +01:00
Michael Telatynski	8bad361c96	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-10-17 14:55:46 +01:00
Michael Telatynski	1a5f2f7af5	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-10-17 14:48:43 +01:00
Michael Telatynski	736da11c1a	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-10-17 13:14:19 +01:00
Michael Telatynski	21022e3283	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-10-17 12:55:57 +01:00
Michael Telatynski	457e7d5f60	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-10-17 11:37:23 +01:00
Michael Telatynski	9148e3585f	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-10-17 10:33:33 +01:00
Michael Telatynski	9381bd1550	Update lockfile Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-10-17 09:43:04 +01:00
Michael Telatynski	8e6a18ec6b	Merge branch 't3chguy/react18/update' of ../matrix-react-sdk into t3chguy/react18/update # Conflicts: # package.json # src/settings/handlers/AbstractLocalStorageSettingsHandler.ts # test/components/views/elements/SpellCheckLanguagesDropdown-test.tsx # test/components/views/right_panel/LegacyRoomHeaderButtons-test.tsx # test/components/views/right_panel/PinnedMessagesCard-test.tsx # test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap # test/components/views/settings/discovery/EmailAddresses-test.tsx # test/hooks/useNotificationSettings-test.tsx # test/unit-tests/components/structures/UserMenu-test.tsx # test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap # test/unit-tests/components/views/dialogs/AccessSecretStorageDialog-test.tsx # test/unit-tests/components/views/dialogs/MessageEditHistoryDialog-test.tsx # test/unit-tests/components/views/dialogs/RoomSettingsDialog-test.tsx # test/unit-tests/components/views/dialogs/SpotlightDialog-test.tsx # test/unit-tests/components/views/dialogs/UserSettingsDialog-test.tsx # test/unit-tests/components/views/elements/Field-test.tsx # test/unit-tests/components/views/elements/SearchWarning-test.tsx # test/unit-tests/components/views/messages/MPollEndBody-test.tsx # test/unit-tests/components/views/polls/pollHistory/PollListItemEnded-test.tsx # test/unit-tests/components/views/right_panel/UserInfo-test.tsx # test/unit-tests/components/views/rooms/MemberList-test.tsx # test/unit-tests/components/views/rooms/MessageComposer-test.tsx # test/unit-tests/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx # test/unit-tests/components/views/rooms/RoomPreviewBar-test.tsx # test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap # test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners-test.tsx # test/unit-tests/components/views/settings/Notifications-test.tsx # test/unit-tests/components/views/settings/SetIntegrationManager-test.tsx # test/unit-tests/components/views/settings/devices/DeviceDetailHeading-test.tsx # test/unit-tests/components/views/settings/tabs/user/SessionManagerTab-test.tsx # test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap # test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap # test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap # test/unit-tests/components/views/spaces/useUnreadThreadRooms-test.tsx # test/unit-tests/hooks/useProfileInfo-test.tsx # test/unit-tests/hooks/usePublicRoomDirectory-test.tsx # test/unit-tests/hooks/useRoomMembers-test.tsx # test/unit-tests/hooks/useSlidingSyncRoomSearch-test.tsx # test/unit-tests/hooks/useUserDirectory-test.tsx # test/unit-tests/hooks/useUserOnboardingTasks-test.tsx # test/unit-tests/hooks/useWindowWidth-test.ts # test/unit-tests/languageHandler-test.tsx # test/unit-tests/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx # yarn.lock	2024-10-17 09:40:35 +01:00
Michael Telatynski	e888c26ce2	Merge branch 'develop' of https://github.com/vector-im/element-web into t3chguy/react18/update # Conflicts: # .editorconfig # package.json # src/languageHandler.tsx # yarn.lock	2024-10-17 09:26:59 +01:00
Michael Telatynski	712ac34755	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-02 15:07:31 +01:00
Michael Telatynski	df1b7772f2	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-02 14:03:31 +01:00
Michael Telatynski	899ba238ac	Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/react18/update	2024-08-02 13:26:10 +01:00
Michael Telatynski	c3505a63ea	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-02 13:22:03 +01:00
Michael Telatynski	2bb46e960c	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-02 09:37:28 +01:00
Michael Telatynski	1daafdc7a3	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-02 09:04:32 +01:00
Michael Telatynski	cbba3e4457	Install @testing-library/dom Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-02 08:48:13 +01:00
Michael Telatynski	42386db2b8	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-02 08:42:41 +01:00
Michael Telatynski	50d1257463	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-02 08:42:38 +01:00
Michael Telatynski	78378615d1	Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/react18/update # Conflicts: # src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx # test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap	2024-08-01 17:04:11 +01:00
Michael Telatynski	8d7f0aa3cc	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-01 17:01:42 +01:00
Michael Telatynski	07670a75ce	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-01 16:15:53 +01:00
Michael Telatynski	e6bb0f34d4	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-01 15:29:35 +01:00
Michael Telatynski	6f2dd10873	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-01 15:10:38 +01:00
Michael Telatynski	e72908f336	Update to React 18 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-01 14:55:12 +01:00
Michael Telatynski	317ffcf1ac	Update to React 18 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-01 14:55:09 +01:00
Michael Telatynski	17506f76bf	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-01 13:14:47 +01:00
Michael Telatynski	939147c6ad	Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/es2022 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> # Conflicts: # src/components/structures/EmbeddedPage.tsx # src/components/structures/FilePanel.tsx # src/components/structures/NotificationPanel.tsx # src/components/structures/RoomStatusBar.tsx # src/components/views/elements/AppTile.tsx # src/components/views/messages/EditHistoryMessage.tsx # src/components/views/messages/MessageActionBar.tsx # src/components/views/right_panel/TimelineCard.tsx # src/components/views/rooms/Autocomplete.tsx # src/components/views/rooms/EditMessageComposer.tsx # src/components/views/rooms/ReplyPreview.tsx # src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx # src/components/views/spaces/SpaceTreeLevel.tsx	2024-08-01 13:04:00 +01:00
Michael Telatynski	bb80f28e66	Fix React state Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-01 11:35:46 +01:00
Michael Telatynski	adfe9cb86b	Merge branch 'develop' into t3chguy/es2022	2024-08-01 11:14:46 +01:00
Michael Telatynski	a1c6ba3782	Fix types Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-01 11:12:44 +01:00
Michael Telatynski	2938e5733e	Fix React contexts Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-01 10:56:29 +01:00
Michael Telatynski	b71d044d89	Fix babel config Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-01 09:59:29 +01:00
Michael Telatynski	f33eec70ed	Fix babel config Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-01 09:59:28 +01:00
Michael Telatynski	9b4bfd495b	Upgrade to es2022 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-01 09:50:45 +01:00
Michael Telatynski	6d87029807	Upgrade to es2022 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-01 09:50:42 +01:00
Michael Telatynski	1bb780348a	Upgrade target to es2021 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-01 09:30:21 +01:00
Michael Telatynski	c290e7e375	Upgrade target to es2021 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-08-01 09:30:19 +01:00