Upgrade to latest compound-web package (#84)

* Upgrade to latest compound-web package * Use a custom render function for jest tests This way we don't need to manually wrap our components with <TooltipProvider> * Pin wrap-ansi to fix broken yarn install * Add playwright helper to find tooltip from element and use it in the failing test * Exclude floating-ui divs/spans from axe testing This is rendered outside .MatrixChat by compound and contains all the tooltips. * Wrap outermost components with TooltipProvider * Remove onChange and use onSelect for toggle * Fix jest tests and update snapshots * Use vector-im/matrix-wysiwig --------- Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2024-10-14 21:41:58 +05:30
parent 3bc0439fd2
commit 91e84f7951
389 changed files with 1261 additions and 1084 deletions
--- a/test/components/structures/AutocompleteInput-test.tsx
+++ b/test/components/structures/AutocompleteInput-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { screen, render, fireEvent, waitFor, within, act } from "@testing-library/react";
+import { screen, render, fireEvent, waitFor, within, act } from "jest-matrix-react";

 import * as TestUtils from "../../test-utils";
 import AutocompleteProvider from "../../../src/autocomplete/AutocompleteProvider";
--- a/test/components/structures/FilePanel-test.tsx
+++ b/test/components/structures/FilePanel-test.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import React from "react";
 import { EventTimelineSet, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
-import { screen, render, waitFor } from "@testing-library/react";
+import { screen, render, waitFor } from "jest-matrix-react";
 import { mocked } from "jest-mock";

 import FilePanel from "../../../src/components/structures/FilePanel";
--- a/test/components/structures/LargeLoader-test.tsx
+++ b/test/components/structures/LargeLoader-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";

 import { LargeLoader } from "../../../src/components/structures/LargeLoader";

--- a/test/components/structures/LeftPanel-test.tsx
+++ b/test/components/structures/LeftPanel-test.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { render, RenderResult, screen } from "@testing-library/react";
+import { render, RenderResult, screen } from "jest-matrix-react";
 import { mocked } from "jest-mock";

 import LeftPanel from "../../../src/components/structures/LeftPanel";
--- a/test/components/structures/LoggedInView-test.tsx
+++ b/test/components/structures/LoggedInView-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { render, RenderResult } from "@testing-library/react";
+import { render, RenderResult } from "jest-matrix-react";
 import { ConditionKind, EventType, IPushRule, MatrixEvent, ClientEvent, PushRuleKind } from "matrix-js-sdk/src/matrix";
 import { MediaHandler } from "matrix-js-sdk/src/webrtc/mediaHandler";
 import { logger } from "matrix-js-sdk/src/logger";
--- a/test/components/structures/MainSplit-test.tsx
+++ b/test/components/structures/MainSplit-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { render, fireEvent } from "jest-matrix-react";

 import MainSplit from "../../../src/components/structures/MainSplit";
 import ResizeNotifier from "../../../src/utils/ResizeNotifier";
--- a/test/components/structures/MatrixChat-test.tsx
+++ b/test/components/structures/MatrixChat-test.tsx
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
 import "core-js/stable/structured-clone";
 import "fake-indexeddb/auto";
 import React, { ComponentProps } from "react";
-import { fireEvent, render, RenderResult, screen, waitFor, within } from "@testing-library/react";
+import { fireEvent, render, RenderResult, screen, waitFor, within } from "jest-matrix-react";
 import fetchMock from "fetch-mock-jest";
 import { Mocked, mocked } from "jest-mock";
 import { ClientEvent, MatrixClient, MatrixEvent, Room, SyncState } from "matrix-js-sdk/src/matrix";
--- a/test/components/structures/MatrixClientContextProvider-test.tsx
+++ b/test/components/structures/MatrixClientContextProvider-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 { act, render } from "@testing-library/react";
+import { act, render } from "jest-matrix-react";
 import React, { useContext } from "react";
 import { CryptoEvent, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
--- a/test/components/structures/MessagePanel-test.tsx
+++ b/test/components/structures/MessagePanel-test.tsx
@@ -11,7 +11,7 @@ import React from "react";
 import { EventEmitter } from "events";
 import { MatrixEvent, Room, RoomMember, Thread, ReceiptType } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";

 import MessagePanel, { shouldFormContinuation } from "../../../src/components/structures/MessagePanel";
 import SettingsStore from "../../../src/settings/SettingsStore";
--- a/test/components/structures/PictureInPictureDragger-test.tsx
+++ b/test/components/structures/PictureInPictureDragger-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React, { MouseEventHandler } from "react";
-import { screen, render, RenderResult } from "@testing-library/react";
+import { screen, render, RenderResult } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";

 import PictureInPictureDragger, { CreatePipChildren } from "../../../src/components/structures/PictureInPictureDragger";
--- a/test/components/structures/PipContainer-test.tsx
+++ b/test/components/structures/PipContainer-test.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import React from "react";
 import { mocked, Mocked } from "jest-mock";
-import { screen, render, act, cleanup } from "@testing-library/react";
+import { screen, render, act, cleanup } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { MatrixClient, PendingEventOrdering, Room, MatrixEvent, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { Widget, ClientWidgetApi } from "matrix-widget-api";
--- a/test/components/structures/ReleaseAnnouncement-test.tsx
+++ b/test/components/structures/ReleaseAnnouncement-test.tsx
@@ -7,7 +7,7 @@
 */

 import React from "react";
-import { act, render, screen, waitFor } from "@testing-library/react";
+import { act, render, screen, waitFor } from "jest-matrix-react";

 import { ReleaseAnnouncement } from "../../../src/components/structures/ReleaseAnnouncement";
 import Modal, { ModalManagerEvent } from "../../../src/Modal";
--- a/test/components/structures/RightPanel-test.tsx
+++ b/test/components/structures/RightPanel-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor } from "jest-matrix-react";
 import { jest } from "@jest/globals";
 import { mocked, MockedObject } from "jest-mock";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
--- a/test/components/structures/RoomSearchView-test.tsx
+++ b/test/components/structures/RoomSearchView-test.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import React from "react";
 import { mocked } from "jest-mock";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";
 import {
    Room,
    MatrixClient,
--- a/test/components/structures/RoomStatusBar-test.tsx
+++ b/test/components/structures/RoomStatusBar-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 import {
    MatrixClient,
    PendingEventOrdering,
--- a/test/components/structures/RoomStatusBarUnsentMessages-test.tsx
+++ b/test/components/structures/RoomStatusBarUnsentMessages-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";

 import { RoomStatusBarUnsentMessages } from "../../../src/components/structures/RoomStatusBarUnsentMessages";
 import { StaticNotificationState } from "../../../src/stores/notifications/StaticNotificationState";
--- a/test/components/structures/RoomView-test.tsx
+++ b/test/components/structures/RoomView-test.tsx
@@ -22,7 +22,7 @@ import {
    IEvent,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
-import { fireEvent, render, screen, RenderResult, waitForElementToBeRemoved, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, RenderResult, waitForElementToBeRemoved, waitFor } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";

 import {
--- a/test/components/structures/SpaceHierarchy-test.tsx
+++ b/test/components/structures/SpaceHierarchy-test.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import React from "react";
 import { mocked } from "jest-mock";
-import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "jest-matrix-react";
 import { HierarchyRoom, JoinRule, MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy";
--- a/test/components/structures/TabbedView-test.tsx
+++ b/test/components/structures/TabbedView-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { act, fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "jest-matrix-react";

 import TabbedView, { Tab, TabLocation } from "../../../src/components/structures/TabbedView";
 import { NonEmptyArray } from "../../../src/@types/common";
--- a/test/components/structures/ThreadPanel-test.tsx
+++ b/test/components/structures/ThreadPanel-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { render, screen, fireEvent, waitFor, getByRole } from "@testing-library/react";
+import { render, screen, fireEvent, waitFor, getByRole } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 import {
    MatrixClient,
--- a/test/components/structures/ThreadView-test.tsx
+++ b/test/components/structures/ThreadView-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 { act, getByTestId, render, RenderResult, waitFor } from "@testing-library/react";
+import { act, getByTestId, render, RenderResult, waitFor } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { mocked } from "jest-mock";
 import {
--- a/test/components/structures/TimelinePanel-test.tsx
+++ b/test/components/structures/TimelinePanel-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 { render, waitFor, screen } from "@testing-library/react";
+import { render, waitFor, screen } from "jest-matrix-react";
 import {
    ReceiptType,
    EventTimelineSet,
@@ -399,7 +399,7 @@ describe("TimelinePanel", () => {
        setupPagination(client, timeline, eventsPage1, null);

        await withScrollPanelMountSpy(async (mountSpy) => {
-            const { container } = render(<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />, {});
+            const { container } = render(<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />);

            await waitFor(() => expectEvents(container, [events[1]]));

--- a/test/components/structures/UploadBar-test.tsx
+++ b/test/components/structures/UploadBar-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 import { jest } from "@jest/globals";
 import { Room } from "matrix-js-sdk/src/matrix";

--- a/test/components/structures/UserMenu-test.tsx
+++ b/test/components/structures/UserMenu-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { act, render, RenderResult, screen, waitFor } from "@testing-library/react";
+import { act, render, RenderResult, screen, waitFor } from "jest-matrix-react";
 import { DEVICE_CODE_SCOPE, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import { CryptoApi } from "matrix-js-sdk/src/crypto-api";
 import { mocked } from "jest-mock";
--- a/test/components/structures/ViewSource-test.tsx
+++ b/test/components/structures/ViewSource-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 { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 import { EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import React from "react";

--- a/test/components/structures/snapshots/FilePanel-test.tsx.snap
+++ b/test/components/structures/snapshots/FilePanel-test.tsx.snap
@@ -19,6 +19,7 @@ exports[`FilePanel renders empty state 1`] = `
        </p>
      </div>
      <button
+        aria-labelledby="floating-ui-1"
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
        role="button"
--- a/test/components/structures/snapshots/RoomView-test.tsx.snap
+++ b/test/components/structures/snapshots/RoomView-test.tsx.snap
@@ -62,6 +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"
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
@@ -77,6 +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"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -101,6 +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"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -125,6 +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"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -153,6 +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"
          class="mx_AccessibleButton mx_FacePile"
          role="button"
          tabindex="0"
@@ -275,6 +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"
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
@@ -290,6 +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"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -314,6 +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"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -338,6 +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"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -366,6 +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"
          class="mx_AccessibleButton mx_FacePile"
          role="button"
          tabindex="0"
@@ -573,6 +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"
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
@@ -588,6 +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"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -612,6 +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"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -636,6 +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"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -664,6 +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"
          class="mx_AccessibleButton mx_FacePile"
          role="button"
          tabindex="0"
@@ -948,6 +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"
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
@@ -963,6 +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"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -987,6 +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"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -1011,6 +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"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@@ -1039,6 +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"
          class="mx_AccessibleButton mx_FacePile"
          role="button"
          tabindex="0"
@@ -1350,6 +1370,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
          >
            <button
              aria-label="Room info"
+              aria-labelledby="floating-ui-84"
              class="_icon-button_bh2qc_17"
              role="button"
              style="--cpd-icon-button-size: 32px;"
@@ -1374,6 +1395,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
            </button>
            <button
              aria-label="Chat"
+              aria-labelledby="floating-ui-89"
              class="_icon-button_bh2qc_17"
              role="button"
              style="--cpd-icon-button-size: 32px;"
@@ -1398,6 +1420,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
            </button>
            <button
              aria-label="Threads"
+              aria-labelledby="floating-ui-94"
              class="_icon-button_bh2qc_17"
              role="button"
              style="--cpd-icon-button-size: 32px;"
@@ -1426,6 +1449,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
          >
            <div
              aria-label="0 members"
+              aria-labelledby="floating-ui-99"
              class="mx_AccessibleButton mx_FacePile"
              role="button"
              tabindex="0"
@@ -1463,6 +1487,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                </p>
              </div>
              <button
+                aria-labelledby="floating-ui-108"
                class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
                data-testid="base-card-close-button"
                role="button"
--- a/test/components/structures/snapshots/SpaceHierarchy-test.tsx.snap
+++ b/test/components/structures/snapshots/SpaceHierarchy-test.tsx.snap
@@ -393,6 +393,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
            Join
          </div>
          <span
+            aria-labelledby="floating-ui-9"
            tabindex="0"
          >
            <span
--- a/test/components/structures/snapshots/ThreadPanel-test.tsx.snap
+++ b/test/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-label="Mark all as read"
+      aria-labelledby="floating-ui-1"
      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-label="Mark all as read"
+      aria-labelledby="floating-ui-6"
      class="_icon-button_bh2qc_17"
      role="button"
      style="--cpd-icon-button-size: 24px;"
--- a/test/components/structures/auth/CompleteSecurity-test.tsx
+++ b/test/components/structures/auth/CompleteSecurity-test.tsx
@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 import EventEmitter from "events";

--- a/test/components/structures/auth/ForgotPassword-test.tsx
+++ b/test/components/structures/auth/ForgotPassword-test.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import React from "react";
 import { mocked } from "jest-mock";
-import { act, render, RenderResult, screen } from "@testing-library/react";
+import { act, render, RenderResult, screen } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { MatrixClient, createClient } from "matrix-js-sdk/src/matrix";

--- a/test/components/structures/auth/Login-test.tsx
+++ b/test/components/structures/auth/Login-test.tsx
@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/react";
+import { fireEvent, render, screen, waitForElementToBeRemoved } from "jest-matrix-react";
 import { mocked, MockedObject } from "jest-mock";
 import fetchMock from "fetch-mock-jest";
 import { DELEGATED_OIDC_COMPATIBILITY, IdentityProviderBrand, OidcClientConfig } from "matrix-js-sdk/src/matrix";
--- a/test/components/structures/auth/LoginSplashView-test.tsx
+++ b/test/components/structures/auth/LoginSplashView-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 { act, render, RenderResult } from "@testing-library/react";
+import { act, render, RenderResult } from "jest-matrix-react";
 import React, { ComponentProps } from "react";
 import EventEmitter from "events";
 import { CryptoEvent } from "matrix-js-sdk/src/matrix";
--- a/test/components/structures/auth/Registration-test.tsx
+++ b/test/components/structures/auth/Registration-test.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "jest-matrix-react";
 import { createClient, MatrixClient, MatrixError, OidcClientConfig } from "matrix-js-sdk/src/matrix";
 import { mocked, MockedObject } from "jest-mock";
 import fetchMock from "fetch-mock-jest";