Update usages of test utilities preferring RTL (#10203)

package.json

@@ -167,7 +167,6 @@
         "@types/react": "17.0.49",
         "@types/react-beautiful-dnd": "^13.0.0",
         "@types/react-dom": "17.0.17",
-        "@types/react-test-renderer": "^17.0.1",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.8.0",
         "@types/tar-js": "^0.3.2",
@@ -212,7 +211,6 @@
         "postcss-scss": "^4.0.4",
         "prettier": "2.8.0",
         "raw-loader": "^4.0.2",
-        "react-test-renderer": "^17.0.2",
         "rimraf": "^3.0.2",
         "stylelint": "^14.9.1",
         "stylelint-config-prettier": "^9.0.4",

src/components/views/room_settings/AliasSettings.tsx

@@ -399,7 +399,7 @@ export default class AliasSettings extends React.Component<IProps, IState> {
         return (
             <div className="mx_AliasSettings">
                 <SettingsFieldset
-                    data-test-id="published-address-fieldset"
+                    data-testid="published-address-fieldset"
                     legend={_t("Published Addresses")}
                     description={
                         <>
@@ -450,7 +450,7 @@ export default class AliasSettings extends React.Component<IProps, IState> {
                     />
                 </SettingsFieldset>
                 <SettingsFieldset
-                    data-test-id="local-address-fieldset"
+                    data-testid="local-address-fieldset"
                     legend={_t("Local Addresses")}
                     description={
                         isSpaceRoom

src/components/views/spaces/SpaceSettingsVisibilityTab.tsx

@@ -93,7 +93,7 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
         advancedSection = (
             <div>
                 <AccessibleButton
-                    data-test-id="toggle-guest-access-btn"
+                    data-testid="toggle-guest-access-btn"
                     onClick={toggleAdvancedSection}
                     kind="link"
                     className="mx_SettingsTab_showAdvanced"
@@ -141,13 +141,13 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
             <div className="mx_SettingsTab_heading">{_t("Visibility")}</div>
 
             {error && (
-                <div data-test-id="space-settings-error" className="mx_SpaceRoomView_errorText">
+                <div data-testid="space-settings-error" className="mx_SpaceRoomView_errorText">
                     {error}
                 </div>
             )}
 
             <SettingsFieldset
-                data-test-id="access-fieldset"
+                data-testid="access-fieldset"
                 legend={_t("Access")}
                 description={_t("Decide who can view and join %(spaceName)s.", { spaceName: space.name })}
             >

test/TextForEvent-test.ts

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { EventType, MatrixClient, MatrixEvent, Room, RoomMember } from "matrix-js-sdk/src/matrix";
-import TestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react";
 import { ReactElement } from "react";
 import { Mocked, mocked } from "jest-mock";
 
@@ -46,43 +46,6 @@ function mockPinnedEvent(pinnedMessageIds?: string[], prevPinnedMessageIds?: str
     });
 }
 
-// Helper function that renders a component to a plain text string.
-// Once snapshots are introduced in tests, this function will no longer be necessary,
-// and should be replaced with snapshots.
-function renderComponent(component: TestRenderer.ReactTestRenderer): string {
-    const serializeObject = (
-        object:
-            | TestRenderer.ReactTestRendererJSON
-            | TestRenderer.ReactTestRendererJSON[]
-            | TestRenderer.ReactTestRendererNode
-            | TestRenderer.ReactTestRendererNode[],
-    ): string => {
-        if (typeof object === "string") {
-            return object === " " ? "" : object;
-        }
-
-        if (Array.isArray(object) && object.length === 1 && typeof object[0] === "string") {
-            return object[0];
-        }
-
-        if (!Array.isArray(object) && object["type"] !== undefined && typeof object["children"] !== undefined) {
-            return serializeObject(object.children!);
-        }
-
-        if (!Array.isArray(object)) {
-            return "";
-        }
-
-        return object
-            .map((child) => {
-                return serializeObject(child);
-            })
-            .join("");
-    };
-
-    return serializeObject(component.toJSON()!);
-}
-
 describe("TextForEvent", () => {
     describe("getSenderName()", () => {
         it("Prefers sender.name", () => {
@@ -105,71 +68,71 @@ describe("TextForEvent", () => {
         it("mentions message when a single message was pinned, with no previously pinned messages", () => {
             const event = mockPinnedEvent(["message-1"]);
             const plainText = textForEvent(event);
-            const component = TestRenderer.create(textForEvent(event, true) as ReactElement);
+            const component = render(textForEvent(event, true) as ReactElement);
 
             const expectedText = "@foo:example.com pinned a message to this room. See all pinned messages.";
             expect(plainText).toBe(expectedText);
-            expect(renderComponent(component)).toBe(expectedText);
+            expect(component.container).toHaveTextContent(expectedText);
         });
 
         it("mentions message when a single message was pinned, with multiple previously pinned messages", () => {
             const event = mockPinnedEvent(["message-1", "message-2", "message-3"], ["message-1", "message-2"]);
             const plainText = textForEvent(event);
-            const component = TestRenderer.create(textForEvent(event, true) as ReactElement);
+            const component = render(textForEvent(event, true) as ReactElement);
 
             const expectedText = "@foo:example.com pinned a message to this room. See all pinned messages.";
             expect(plainText).toBe(expectedText);
-            expect(renderComponent(component)).toBe(expectedText);
+            expect(component.container).toHaveTextContent(expectedText);
         });
 
         it("mentions message when a single message was unpinned, with a single message previously pinned", () => {
             const event = mockPinnedEvent([], ["message-1"]);
             const plainText = textForEvent(event);
-            const component = TestRenderer.create(textForEvent(event, true) as ReactElement);
+            const component = render(textForEvent(event, true) as ReactElement);
 
             const expectedText = "@foo:example.com unpinned a message from this room. See all pinned messages.";
             expect(plainText).toBe(expectedText);
-            expect(renderComponent(component)).toBe(expectedText);
+            expect(component.container).toHaveTextContent(expectedText);
         });
 
         it("mentions message when a single message was unpinned, with multiple previously pinned messages", () => {
             const event = mockPinnedEvent(["message-2"], ["message-1", "message-2"]);
             const plainText = textForEvent(event);
-            const component = TestRenderer.create(textForEvent(event, true) as ReactElement);
+            const component = render(textForEvent(event, true) as ReactElement);
 
             const expectedText = "@foo:example.com unpinned a message from this room. See all pinned messages.";
             expect(plainText).toBe(expectedText);
-            expect(renderComponent(component)).toBe(expectedText);
+            expect(component.container).toHaveTextContent(expectedText);
         });
 
         it("shows generic text when multiple messages were pinned", () => {
             const event = mockPinnedEvent(["message-1", "message-2", "message-3"], ["message-1"]);
             const plainText = textForEvent(event);
-            const component = TestRenderer.create(textForEvent(event, true) as ReactElement);
+            const component = render(textForEvent(event, true) as ReactElement);
 
             const expectedText = "@foo:example.com changed the pinned messages for the room.";
             expect(plainText).toBe(expectedText);
-            expect(renderComponent(component)).toBe(expectedText);
+            expect(component.container).toHaveTextContent(expectedText);
         });
 
         it("shows generic text when multiple messages were unpinned", () => {
             const event = mockPinnedEvent(["message-3"], ["message-1", "message-2", "message-3"]);
             const plainText = textForEvent(event);
-            const component = TestRenderer.create(textForEvent(event, true) as ReactElement);
+            const component = render(textForEvent(event, true) as ReactElement);
 
             const expectedText = "@foo:example.com changed the pinned messages for the room.";
             expect(plainText).toBe(expectedText);
-            expect(renderComponent(component)).toBe(expectedText);
+            expect(component.container).toHaveTextContent(expectedText);
         });
 
         it("shows generic text when one message was pinned, and another unpinned", () => {
             const event = mockPinnedEvent(["message-2"], ["message-1"]);
             const plainText = textForEvent(event);
-            const component = TestRenderer.create(textForEvent(event, true) as ReactElement);
+            const component = render(textForEvent(event, true) as ReactElement);
 
             const expectedText = "@foo:example.com changed the pinned messages for the room.";
             expect(plainText).toBe(expectedText);
-            expect(renderComponent(component)).toBe(expectedText);
+            expect(component.container).toHaveTextContent(expectedText);
         });
     });
 

test/components/structures/MessagePanel-test.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from "react";
-import ReactDOM from "react-dom";
 import { EventEmitter } from "events";
 import { MatrixEvent, Room, RoomMember } from "matrix-js-sdk/src/matrix";
 import FakeTimers from "@sinonjs/fake-timers";
@@ -358,7 +357,7 @@ describe("MessagePanel", function () {
         const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container");
 
         // it should follow the <li> which wraps the event tile for event 4
-        const eventContainer = ReactDOM.findDOMNode(tiles[4]);
+        const eventContainer = tiles[4];
         expect(rm.previousSibling).toEqual(eventContainer);
     });
 

test/components/structures/TabbedView-test.tsx

@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "@testing-library/react";
-import { act } from "react-dom/test-utils";
 
 import TabbedView, { Tab, TabLocation } from "../../../src/components/structures/TabbedView";
 

test/components/structures/ThreadView-test.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { getByTestId, render, RenderResult, waitFor } from "@testing-library/react";
+import { act, getByTestId, render, RenderResult, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { mocked } from "jest-mock";
 import { MsgType, RelationType } from "matrix-js-sdk/src/@types/event";
@@ -23,7 +23,6 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
 import React, { useState } from "react";
-import { act } from "react-dom/test-utils";
 
 import ThreadView from "../../../src/components/structures/ThreadView";
 import MatrixClientContext from "../../../src/contexts/MatrixClientContext";

test/components/views/beacon/BeaconListItem-test.tsx

@@ -15,10 +15,9 @@ limitations under the License.
 */
 
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "@testing-library/react";
 import { Beacon, RoomMember, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { LocationAssetType } from "matrix-js-sdk/src/@types/location";
-import { act } from "react-dom/test-utils";
 
 import BeaconListItem from "../../../../src/components/views/beacon/BeaconListItem";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";

test/components/views/beacon/BeaconMarker-test.tsx

@@ -15,9 +15,8 @@ limitations under the License.
 */
 
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import * as maplibregl from "maplibre-gl";
-import { act } from "react-dom/test-utils";
 import { Beacon, Room, RoomMember, MatrixEvent, getBeaconInfoIdentifier } from "matrix-js-sdk/src/matrix";
 
 import BeaconMarker from "../../../../src/components/views/beacon/BeaconMarker";

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

@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React, { ComponentProps } from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "@testing-library/react";
-import { act } from "react-dom/test-utils";
 
 import DialogSidebar from "../../../../src/components/views/beacon/DialogSidebar";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";

test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx

@@ -16,8 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { mocked } from "jest-mock";
-import { fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "@testing-library/react";
-import { act } from "react-dom/test-utils";
 import { Beacon, BeaconIdentifier } from "matrix-js-sdk/src/matrix";
 
 import LeftPanelLiveShareWarning from "../../../../src/components/views/beacon/LeftPanelLiveShareWarning";

test/components/views/beacon/RoomCallBanner-test.tsx

@@ -15,10 +15,9 @@ limitations under the License.
 */
 
 import React from "react";
-import { act } from "react-dom/test-utils";
 import { Room, PendingEventOrdering, MatrixClient, RoomMember, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { ClientWidgetApi, Widget } from "matrix-widget-api";
-import { cleanup, render, screen } from "@testing-library/react";
+import { act, cleanup, render, screen } from "@testing-library/react";
 import { mocked, Mocked } from "jest-mock";
 
 import { mkRoomMember, MockedCall, setupAsyncStoreWithClient, stubClient, useMockedCalls } from "../../../test-utils";

test/components/views/beacon/RoomLiveShareWarning-test.tsx

@@ -15,10 +15,9 @@ limitations under the License.
 */
 
 import React from "react";
-import { act } from "react-dom/test-utils";
 import { Room, Beacon, BeaconEvent, getBeaconInfoIdentifier, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
-import { fireEvent, getByTestId, render, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, getByTestId, render, screen, waitFor } from "@testing-library/react";
 
 import RoomLiveShareWarning from "../../../../src/components/views/beacon/RoomLiveShareWarning";
 import { OwnBeaconStore, OwnBeaconStoreEvent } from "../../../../src/stores/OwnBeaconStore";

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

@@ -15,11 +15,10 @@ limitations under the License.
 */
 
 import React from "react";
-import { act } from "react-dom/test-utils";
 import { MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
 import { LocationAssetType, M_ASSET, M_LOCATION, M_TIMESTAMP } from "matrix-js-sdk/src/@types/location";
 import { M_TEXT } from "matrix-js-sdk/src/@types/extensible_events";
-import { fireEvent, getByTestId, render, RenderResult, screen } from "@testing-library/react";
+import { act, fireEvent, getByTestId, render, RenderResult, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";

test/components/views/elements/ExternalLink-test.tsx

@@ -12,8 +12,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { render } from "@testing-library/react";
 import React from "react";
-import { renderIntoDocument } from "react-dom/test-utils";
 
 import ExternalLink from "../../../../src/components/views/elements/ExternalLink";
 
@@ -22,15 +22,10 @@ describe("<ExternalLink />", () => {
         "href": "test.com",
         "onClick": jest.fn(),
         "className": "myCustomClass",
-        "data-test-id": "test",
+        "data-testid": "test",
     };
     const getComponent = (props = {}) => {
-        const wrapper = renderIntoDocument<HTMLDivElement>(
+        return render(<ExternalLink {...defaultProps} {...props} />);
-            <div>
-                <ExternalLink {...defaultProps} {...props} />
-            </div>,
-        ) as HTMLDivElement;
-        return wrapper.children[0];
     };
 
     it("renders link correctly", () => {
@@ -39,18 +34,19 @@ describe("<ExternalLink />", () => {
                 react element <b>children</b>
             </span>
         );
-        expect(getComponent({ children, target: "_self", rel: "noopener" })).toMatchSnapshot();
+        expect(getComponent({ children, target: "_self", rel: "noopener" }).asFragment()).toMatchSnapshot();
     });
 
     it("defaults target and rel", () => {
         const children = "test";
-        const component = getComponent({ children });
+        const { getByTestId } = getComponent({ children });
-        expect(component.getAttribute("rel")).toEqual("noreferrer noopener");
+        const container = getByTestId("test");
-        expect(component.getAttribute("target")).toEqual("_blank");
+        expect(container.getAttribute("rel")).toEqual("noreferrer noopener");
+        expect(container.getAttribute("target")).toEqual("_blank");
     });
 
     it("renders plain text link correctly", () => {
         const children = "test";
-        expect(getComponent({ children })).toMatchSnapshot();
+        expect(getComponent({ children }).asFragment()).toMatchSnapshot();
     });
 });

test/components/views/elements/TooltipTarget-test.tsx

@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { renderIntoDocument, Simulate } from "react-dom/test-utils";
+import { act, renderIntoDocument, Simulate } from "react-dom/test-utils";
-import { act } from "react-dom/test-utils";
 
 import { Alignment } from "../../../../src/components/views/elements/Tooltip";
 import TooltipTarget from "../../../../src/components/views/elements/TooltipTarget";

test/components/views/elements/__snapshots__/ExternalLink-test.tsx.snap

@@ -1,36 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ExternalLink /> renders link correctly 1`] = `
-<a
+<DocumentFragment>
-  class="mx_ExternalLink myCustomClass"
+  <a
-  data-test-id="test"
+    class="mx_ExternalLink myCustomClass"
-  href="test.com"
+    data-testid="test"
-  rel="noopener"
+    href="test.com"
-  target="_self"
+    rel="noopener"
->
+    target="_self"
-  <span>
+  >
-    react element 
+    <span>
-    <b>
+      react element 
-      children
+      <b>
-    </b>
+        children
-  </span>
+      </b>
-  <i
+    </span>
-    class="mx_ExternalLink_icon"
+    <i
-  />
+      class="mx_ExternalLink_icon"
-</a>
+    />
+  </a>
+</DocumentFragment>
 `;
 
 exports[`<ExternalLink /> renders plain text link correctly 1`] = `
-<a
+<DocumentFragment>
-  class="mx_ExternalLink myCustomClass"
+  <a
-  data-test-id="test"
+    class="mx_ExternalLink myCustomClass"
-  href="test.com"
+    data-testid="test"
-  rel="noreferrer noopener"
+    href="test.com"
-  target="_blank"
+    rel="noreferrer noopener"
->
+    target="_blank"
-  test
+  >
-  <i
+    test
-    class="mx_ExternalLink_icon"
+    <i
-  />
+      class="mx_ExternalLink_icon"
-</a>
+    />
+  </a>
+</DocumentFragment>
 `;

test/components/views/location/LocationPicker-test.tsx

@@ -15,9 +15,8 @@ limitations under the License.
 */
 
 import React from "react";
-import { fireEvent, render, RenderResult } from "@testing-library/react";
+import { act, fireEvent, render, RenderResult } from "@testing-library/react";
 import * as maplibregl from "maplibre-gl";
-import { act } from "react-dom/test-utils";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { mocked } from "jest-mock";

test/components/views/location/LocationShareMenu-test.tsx

@@ -21,8 +21,7 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RelationType } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import { M_ASSET, LocationAssetType } from "matrix-js-sdk/src/@types/location";
-import { act } from "react-dom/test-utils";
+import { act, fireEvent, render, RenderResult } from "@testing-library/react";
-import { fireEvent, render, RenderResult } from "@testing-library/react";
 import * as maplibregl from "maplibre-gl";
 
 import LocationShareMenu from "../../../../src/components/views/location/LocationShareMenu";

test/components/views/location/Map-test.tsx

@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { act } from "react-dom/test-utils";
+import { act, fireEvent, getByTestId, render } from "@testing-library/react";
-import { fireEvent, getByTestId, render } from "@testing-library/react";
 import * as maplibregl from "maplibre-gl";
 import { ClientEvent } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";

test/components/views/messages/MKeyVerificationConclusion-test.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import TestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react";
 import { EventEmitter } from "events";
 import { MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
@@ -72,29 +72,29 @@ describe("MKeyVerificationConclusion", () => {
 
     it("shouldn't render if there's no verificationRequest", () => {
         const event = new MatrixEvent({});
-        const renderer = TestRenderer.create(<MKeyVerificationConclusion mxEvent={event} />);
+        const { container } = render(<MKeyVerificationConclusion mxEvent={event} />);
-        expect(renderer.toJSON()).toBeNull();
+        expect(container).toBeEmpty();
     });
 
     it("shouldn't render if the verificationRequest is pending", () => {
         const event = new MatrixEvent({});
         event.verificationRequest = getMockVerificationRequest({ pending: true });
-        const renderer = TestRenderer.create(<MKeyVerificationConclusion mxEvent={event} />);
+        const { container } = render(<MKeyVerificationConclusion mxEvent={event} />);
-        expect(renderer.toJSON()).toBeNull();
+        expect(container).toBeEmpty();
     });
 
     it("shouldn't render if the event type is cancel but the request type isn't", () => {
         const event = new MatrixEvent({ type: EventType.KeyVerificationCancel });
         event.verificationRequest = getMockVerificationRequest({ cancelled: false });
-        const renderer = TestRenderer.create(<MKeyVerificationConclusion mxEvent={event} />);
+        const { container } = render(<MKeyVerificationConclusion mxEvent={event} />);
-        expect(renderer.toJSON()).toBeNull();
+        expect(container).toBeEmpty();
     });
 
     it("shouldn't render if the event type is done but the request type isn't", () => {
         const event = new MatrixEvent({ type: "m.key.verification.done" });
         event.verificationRequest = getMockVerificationRequest({ done: false });
-        const renderer = TestRenderer.create(<MKeyVerificationConclusion mxEvent={event} />);
+        const { container } = render(<MKeyVerificationConclusion mxEvent={event} />);
-        expect(renderer.toJSON()).toBeNull();
+        expect(container).toBeEmpty();
     });
 
     it("shouldn't render if the user isn't actually trusted", () => {
@@ -102,8 +102,8 @@ describe("MKeyVerificationConclusion", () => {
 
         const event = new MatrixEvent({ type: "m.key.verification.done" });
         event.verificationRequest = getMockVerificationRequest({ done: true });
-        const renderer = TestRenderer.create(<MKeyVerificationConclusion mxEvent={event} />);
+        const { container } = render(<MKeyVerificationConclusion mxEvent={event} />);
-        expect(renderer.toJSON()).toBeNull();
+        expect(container).toBeEmpty();
     });
 
     it("should rerender appropriately if user trust status changes", () => {
@@ -111,8 +111,8 @@ describe("MKeyVerificationConclusion", () => {
 
         const event = new MatrixEvent({ type: "m.key.verification.done" });
         event.verificationRequest = getMockVerificationRequest({ done: true, otherUserId: "@someuser:domain" });
-        const renderer = TestRenderer.create(<MKeyVerificationConclusion mxEvent={event} />);
+        const { container } = render(<MKeyVerificationConclusion mxEvent={event} />);
-        expect(renderer.toJSON()).toBeNull();
+        expect(container).toBeEmpty();
 
         mockClient.checkUserTrust.mockReturnValue(trustworthy);
 
@@ -122,7 +122,7 @@ describe("MKeyVerificationConclusion", () => {
             "@anotheruser:domain",
             new UserTrustLevel(true, true, true),
         );
-        expect(renderer.toJSON()).toBeNull();
+        expect(container).toBeEmpty();
 
         /* But when our user changes, we do rerender */
         mockClient.emit(
@@ -130,6 +130,6 @@ describe("MKeyVerificationConclusion", () => {
             event.verificationRequest.otherUserId,
             new UserTrustLevel(true, true, true),
         );
-        expect(renderer.toJSON()).not.toBeNull();
+        expect(container).not.toBeEmpty();
     });
 });

test/components/views/rooms/RoomListHeader-test.tsx

@@ -18,9 +18,8 @@ import React from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Room } from "matrix-js-sdk/src/matrix";
 import { EventType } from "matrix-js-sdk/src/@types/event";
-import { act } from "react-dom/test-utils";
 import { mocked } from "jest-mock";
-import { render, screen, fireEvent, RenderResult } from "@testing-library/react";
+import { act, render, screen, fireEvent, RenderResult } from "@testing-library/react";
 
 import SpaceStore from "../../../../src/stores/spaces/SpaceStore";
 import { MetaSpace } from "../../../../src/stores/spaces";

test/components/views/settings/CryptographyPanel-test.tsx

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactElement } from "react";
+import React from "react";
-import ReactDOM from "react-dom";
+import { render } from "@testing-library/react";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
@@ -37,16 +37,9 @@ describe("CryptographyPanel", () => {
         const rendered = render(<CryptographyPanel />);
 
         // Then it displays info about the user's session
-        const codes = rendered.querySelectorAll("code");
+        const codes = rendered.container.querySelectorAll("code");
         expect(codes.length).toEqual(2);
         expect(codes[0].innerHTML).toEqual(sessionId);
         expect(codes[1].innerHTML).toEqual(sessionKeyFormatted);
     });
 });
-
-function render(component: ReactElement<CryptographyPanel>): HTMLDivElement {
-    const parentDiv = document.createElement("div");
-    document.body.appendChild(parentDiv);
-    ReactDOM.render(component, parentDiv);
-    return parentDiv;
-}

test/components/views/settings/DevicesPanel-test.tsx

@@ -14,8 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "@testing-library/react";
-import { act } from "react-dom/test-utils";
 import { CrossSigningInfo } from "matrix-js-sdk/src/crypto/CrossSigning";
 import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
 import { sleep } from "matrix-js-sdk/src/utils";

test/components/views/settings/Notifications-test.tsx

@@ -25,8 +25,7 @@ import {
     PushRuleActionName,
 } from "matrix-js-sdk/src/matrix";
 import { IThreepid, ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";
-import { act } from "react-dom/test-utils";
+import { act, fireEvent, getByTestId, render, screen, waitFor } from "@testing-library/react";
-import { fireEvent, getByTestId, render, screen, waitFor } from "@testing-library/react";
 
 import Notifications from "../../../../src/components/views/settings/Notifications";
 import SettingsStore from "../../../../src/settings/SettingsStore";

test/components/views/settings/SettingsFieldset-test.tsx

@@ -12,8 +12,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { render } from "@testing-library/react";
 import React from "react";
-import { renderIntoDocument } from "react-dom/test-utils";
 
 import SettingsFieldset from "../../../../src/components/views/settings/SettingsFieldset";
 
@@ -21,24 +21,19 @@ describe("<SettingsFieldset />", () => {
     const defaultProps = {
         "legend": "Who can read history?",
         "children": <div>test</div>,
-        "data-test-id": "test",
+        "data-testid": "test",
     };
     const getComponent = (props = {}) => {
-        const wrapper = renderIntoDocument<HTMLDivElement>(
+        return render(<SettingsFieldset {...defaultProps} {...props} />);
-            <div>
-                <SettingsFieldset {...defaultProps} {...props} />
-            </div>,
-        ) as HTMLDivElement;
-        return wrapper.children[0];
     };
 
     it("renders fieldset without description", () => {
-        expect(getComponent()).toMatchSnapshot();
+        expect(getComponent().asFragment()).toMatchSnapshot();
     });
 
     it("renders fieldset with plain text description", () => {
         const description = "Changes to who can read history.";
-        expect(getComponent({ description })).toMatchSnapshot();
+        expect(getComponent({ description }).asFragment()).toMatchSnapshot();
     });
 
     it("renders fieldset with react description", () => {
@@ -48,6 +43,6 @@ describe("<SettingsFieldset />", () => {
                 <a href="#test">a link</a>
             </>
         );
-        expect(getComponent({ description })).toMatchSnapshot();
+        expect(getComponent({ description }).asFragment()).toMatchSnapshot();
     });
 });

test/components/views/settings/__snapshots__/SettingsFieldset-test.tsx.snap

@@ -1,66 +1,72 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<SettingsFieldset /> renders fieldset with plain text description 1`] = `
-<fieldset
+<DocumentFragment>
-  class="mx_SettingsFieldset"
+  <fieldset
-  data-test-id="test"
+    class="mx_SettingsFieldset"
->
+    data-testid="test"
-  <legend
-    class="mx_SettingsFieldset_legend"
   >
-    Who can read history?
+    <legend
-  </legend>
+      class="mx_SettingsFieldset_legend"
-  <div
+    >
-    class="mx_SettingsFieldset_description"
+      Who can read history?
-  >
+    </legend>
-    Changes to who can read history.
+    <div
-  </div>
+      class="mx_SettingsFieldset_description"
-  <div>
+    >
-    test
+      Changes to who can read history.
-  </div>
+    </div>
-</fieldset>
+    <div>
+      test
+    </div>
+  </fieldset>
+</DocumentFragment>
 `;
 
 exports[`<SettingsFieldset /> renders fieldset with react description 1`] = `
-<fieldset
+<DocumentFragment>
-  class="mx_SettingsFieldset"
+  <fieldset
-  data-test-id="test"
+    class="mx_SettingsFieldset"
->
+    data-testid="test"
-  <legend
-    class="mx_SettingsFieldset_legend"
   >
-    Who can read history?
+    <legend
-  </legend>
+      class="mx_SettingsFieldset_legend"
-  <div
-    class="mx_SettingsFieldset_description"
-  >
-    <p>
-      Test
-    </p>
-    <a
-      href="#test"
     >
-      a link
+      Who can read history?
-    </a>
+    </legend>
-  </div>
+    <div
-  <div>
+      class="mx_SettingsFieldset_description"
-    test
+    >
-  </div>
+      <p>
-</fieldset>
+        Test
+      </p>
+      <a
+        href="#test"
+      >
+        a link
+      </a>
+    </div>
+    <div>
+      test
+    </div>
+  </fieldset>
+</DocumentFragment>
 `;
 
 exports[`<SettingsFieldset /> renders fieldset without description 1`] = `
-<fieldset
+<DocumentFragment>
-  class="mx_SettingsFieldset"
+  <fieldset
-  data-test-id="test"
+    class="mx_SettingsFieldset"
->
+    data-testid="test"
-  <legend
-    class="mx_SettingsFieldset_legend"
   >
-    Who can read history?
+    <legend
-  </legend>
+      class="mx_SettingsFieldset_legend"
-  <div>
+    >
-    test
+      Who can read history?
-  </div>
+    </legend>
-</fieldset>
+    <div>
+      test
+    </div>
+  </fieldset>
+</DocumentFragment>
 `;

test/components/views/settings/devices/CurrentDeviceSection-test.tsx

@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "@testing-library/react";
-import { act } from "react-dom/test-utils";
 
 import CurrentDeviceSection from "../../../../../src/components/views/settings/devices/CurrentDeviceSection";
 import { DeviceType } from "../../../../../src/utils/device/parseUserAgent";

test/components/views/settings/devices/SelectableDeviceTile-test.tsx

@@ -14,9 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "@testing-library/react";
 import React from "react";
-import { act } from "react-dom/test-utils";
 
 import SelectableDeviceTile from "../../../../../src/components/views/settings/devices/SelectableDeviceTile";
 import { DeviceType } from "../../../../../src/utils/device/parseUserAgent";

test/components/views/settings/tabs/user/SessionManagerTab-test.tsx

@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { fireEvent, render, RenderResult } from "@testing-library/react";
+import { act, fireEvent, render, RenderResult } from "@testing-library/react";
-import { act } from "react-dom/test-utils";
 import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
 import { logger } from "matrix-js-sdk/src/logger";
 import { DeviceTrustLevel } from "matrix-js-sdk/src/crypto/CrossSigning";

test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx

@@ -16,8 +16,8 @@ limitations under the License.
 
 import React from "react";
 import { mocked } from "jest-mock";
-import { renderIntoDocument, Simulate } from "react-dom/test-utils";
+import { act, Simulate } from "react-dom/test-utils";
-import { act } from "react-dom/test-utils";
+import { fireEvent, render, RenderResult } from "@testing-library/react";
 import { EventType, MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { GuestAccess, HistoryVisibility, JoinRule } from "matrix-js-sdk/src/@types/partials";
 
@@ -83,25 +83,18 @@ describe("<SpaceSettingsVisibilityTab />", () => {
     };
 
     const getComponent = (props = {}) => {
-        const wrapper = renderIntoDocument<HTMLSpanElement>(
+        return render(<SpaceSettingsVisibilityTab {...defaultProps} {...props} />);
-            // wrap in element so renderIntoDocument can render functional component
-            <span>
-                <SpaceSettingsVisibilityTab {...defaultProps} {...props} />
-            </span>,
-        ) as HTMLSpanElement;
-        return wrapper.children[0];
     };
 
-    const getByTestId = (container: Element, id: string) => container.querySelector(`[data-test-id=${id}]`);
+    const toggleGuestAccessSection = async ({ getByTestId }: RenderResult) => {
-    const toggleGuestAccessSection = async (component: Element) => {
+        const toggleButton = getByTestId("toggle-guest-access-btn")!;
-        const toggleButton = getByTestId(component, "toggle-guest-access-btn")!;
+        fireEvent.click(toggleButton);
-        await act(async () => {
-            Simulate.click(toggleButton);
-        });
     };
-    const getGuestAccessToggle = (component: Element) => component.querySelector('[aria-label="Enable guest access"]');
+    const getGuestAccessToggle = ({ container }: RenderResult) =>
-    const getHistoryVisibilityToggle = (component: Element) => component.querySelector('[aria-label="Preview Space"]');
+        container.querySelector('[aria-label="Enable guest access"]');
-    const getErrorMessage = (component: Element) => getByTestId(component, "space-settings-error")?.textContent;
+    const getHistoryVisibilityToggle = ({ container }: RenderResult) =>
+        container.querySelector('[aria-label="Preview Space"]');
+    const getErrorMessage = ({ getByTestId }: RenderResult) => getByTestId("space-settings-error")?.textContent;
 
     beforeEach(() => {
         (mockMatrixClient.sendStateEvent as jest.Mock).mockClear().mockResolvedValue({});
@@ -113,18 +106,18 @@ describe("<SpaceSettingsVisibilityTab />", () => {
     });
 
     it("renders container", () => {
-        const component = getComponent();
+        const { asFragment } = getComponent();
-        expect(component).toMatchSnapshot();
+        expect(asFragment()).toMatchSnapshot();
     });
 
     describe("for a private space", () => {
         const joinRule = JoinRule.Invite;
         it("does not render addresses section", () => {
             const space = makeMockSpace(mockMatrixClient, joinRule);
-            const component = getComponent({ space });
+            const { queryByTestId } = getComponent({ space });
 
-            expect(getByTestId(component, "published-address-fieldset")).toBeFalsy();
+            expect(queryByTestId("published-address-fieldset")).toBeFalsy();
-            expect(getByTestId(component, "local-address-fieldset")).toBeFalsy();
+            expect(queryByTestId("local-address-fieldset")).toBeFalsy();
         });
     });
 
@@ -152,10 +145,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
 
                 expect(guestAccessInput?.getAttribute("aria-checked")).toEqual("true");
 
-                await act(async () => {
+                fireEvent.click(guestAccessInput!);
-                    Simulate.click(guestAccessInput!);
-                });
-
                 expect(mockMatrixClient.sendStateEvent).toHaveBeenCalledWith(
                     mockSpaceId,
                     EventType.RoomGuestAccess,
@@ -200,17 +190,14 @@ describe("<SpaceSettingsVisibilityTab />", () => {
                 expect(getHistoryVisibilityToggle(component)?.getAttribute("aria-checked")).toEqual("false");
             });
 
-            it("updates history visibility on toggle", async () => {
+            it("updates history visibility on toggle", () => {
                 const space = makeMockSpace(mockMatrixClient, joinRule, guestRule, historyRule);
                 const component = getComponent({ space });
 
                 // toggle off because space settings is != WorldReadable
                 expect(getHistoryVisibilityToggle(component)?.getAttribute("aria-checked")).toEqual("false");
 
-                await act(async () => {
+                fireEvent.click(getHistoryVisibilityToggle(component)!);
-                    Simulate.click(getHistoryVisibilityToggle(component)!);
-                });
-
                 expect(mockMatrixClient.sendStateEvent).toHaveBeenCalledWith(
                     mockSpaceId,
                     EventType.RoomHistoryVisibility,
@@ -243,10 +230,10 @@ describe("<SpaceSettingsVisibilityTab />", () => {
 
         it("renders addresses section", () => {
             const space = makeMockSpace(mockMatrixClient, joinRule, guestRule);
-            const component = getComponent({ space });
+            const { getByTestId } = getComponent({ space });
 
-            expect(getByTestId(component, "published-address-fieldset")).toBeTruthy();
+            expect(getByTestId("published-address-fieldset")).toBeTruthy();
-            expect(getByTestId(component, "local-address-fieldset")).toBeTruthy();
+            expect(getByTestId("local-address-fieldset")).toBeTruthy();
         });
     });
 });

test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap

@@ -16,118 +16,119 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space Access renders guest
 `;
 
 exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
-<div
+<DocumentFragment>
-  class="mx_SettingsTab"
->
   <div
-    class="mx_SettingsTab_heading"
+    class="mx_SettingsTab"
   >
-    Visibility
-  </div>
-  
-  <fieldset
-    class="mx_SettingsFieldset"
-    data-test-id="access-fieldset"
-  >
-    <legend
-      class="mx_SettingsFieldset_legend"
-    >
-      Access
-    </legend>
     <div
-      class="mx_SettingsFieldset_description"
+      class="mx_SettingsTab_heading"
     >
-      Decide who can view and join mock-space.
+      Visibility
     </div>
-    <label
+    <fieldset
-      class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"
+      class="mx_SettingsFieldset"
+      data-testid="access-fieldset"
     >
-      <input
+      <legend
-        aria-describedby="joinRule-invite-description"
+        class="mx_SettingsFieldset_legend"
-        checked=""
-        disabled=""
-        id="joinRule-invite"
-        name="joinRule"
-        type="radio"
-        value="invite"
-      />
-      <div>
-        <div />
-      </div>
-      <div
-        class="mx_StyledRadioButton_content"
       >
-        Private (invite only)
+        Access
-      </div>
+      </legend>
       <div
-        class="mx_StyledRadioButton_spacer"
+        class="mx_SettingsFieldset_description"
-      />
-    </label>
-    <span
-      id="joinRule-invite-description"
-    >
-      Only invited people can join.
-    </span>
-    <label
-      class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled"
-    >
-      <input
-        aria-describedby="joinRule-public-description"
-        disabled=""
-        id="joinRule-public"
-        name="joinRule"
-        type="radio"
-        value="public"
-      />
-      <div>
-        <div />
-      </div>
-      <div
-        class="mx_StyledRadioButton_content"
       >
-        Public
+        Decide who can view and join mock-space.
       </div>
-      <div
+      <label
-        class="mx_StyledRadioButton_spacer"
+        class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"
-      />
-    </label>
-    <span
-      id="joinRule-public-description"
-    >
-      Anyone can find and join.
-    </span>
-    <div
-      class="mx_SettingsTab_toggleWithDescription"
-    >
-      <div
-        class="mx_SettingsFlag"
       >
-        <span
+        <input
-          class="mx_SettingsFlag_label"
+          aria-describedby="joinRule-invite-description"
-        >
+          checked=""
-          Preview Space
+          disabled=""
-        </span>
+          id="joinRule-invite"
-        <div
+          name="joinRule"
-          aria-checked="true"
+          type="radio"
-          aria-disabled="false"
+          value="invite"
-          aria-label="Preview Space"
+        />
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+        <div>
-          role="switch"
+          <div />
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
         </div>
+        <div
+          class="mx_StyledRadioButton_content"
+        >
+          Private (invite only)
+        </div>
+        <div
+          class="mx_StyledRadioButton_spacer"
+        />
+      </label>
+      <span
+        id="joinRule-invite-description"
+      >
+        Only invited people can join.
+      </span>
+      <label
+        class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled"
+      >
+        <input
+          aria-describedby="joinRule-public-description"
+          disabled=""
+          id="joinRule-public"
+          name="joinRule"
+          type="radio"
+          value="public"
+        />
+        <div>
+          <div />
+        </div>
+        <div
+          class="mx_StyledRadioButton_content"
+        >
+          Public
+        </div>
+        <div
+          class="mx_StyledRadioButton_spacer"
+        />
+      </label>
+      <span
+        id="joinRule-public-description"
+      >
+        Anyone can find and join.
+      </span>
+      <div
+        class="mx_SettingsTab_toggleWithDescription"
+      >
+        <div
+          class="mx_SettingsFlag"
+        >
+          <span
+            class="mx_SettingsFlag_label"
+          >
+            Preview Space
+          </span>
+          <div
+            aria-checked="true"
+            aria-disabled="false"
+            aria-label="Preview Space"
+            class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+            role="switch"
+            tabindex="0"
+          >
+            <div
+              class="mx_ToggleSwitch_ball"
+            />
+          </div>
+        </div>
+        <p>
+          Allow people to preview your space before they join.
+          <br />
+          <b>
+            Recommended for public spaces.
+          </b>
+        </p>
       </div>
-      <p>
+    </fieldset>
-        Allow people to preview your space before they join.
+  </div>
-        <br />
+</DocumentFragment>
-        <b>
-          Recommended for public spaces.
-        </b>
-      </p>
-    </div>
-  </fieldset>
-</div>
 `;

test/components/views/typography/Heading-test.tsx

@@ -14,37 +14,32 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { render } from "@testing-library/react";
 import React from "react";
-import { renderIntoDocument } from "react-dom/test-utils";
 
 import Heading from "../../../../src/components/views/typography/Heading";
 describe("<Heading />", () => {
     const defaultProps = {
-        size: "h1",
+        "size": "h1",
-        children: <div>test</div>,
+        "children": <div>test</div>,
-        ["data-test-id"]: "test",
+        "data-testid": "test",
-        className: "test",
+        "className": "test",
     } as any;
     const getComponent = (props = {}) => {
-        const wrapper = renderIntoDocument<HTMLDivElement>(
+        return render(<Heading {...defaultProps} {...props} />);
-            <div>
-                <Heading {...defaultProps} {...props} />
-            </div>,
-        ) as HTMLDivElement;
-        return wrapper.children[0];
     };
 
     it("renders h1 with correct attributes", () => {
-        expect(getComponent({ size: "h1" })).toMatchSnapshot();
+        expect(getComponent({ size: "h1" }).asFragment()).toMatchSnapshot();
     });
     it("renders h2 with correct attributes", () => {
-        expect(getComponent({ size: "h2" })).toMatchSnapshot();
+        expect(getComponent({ size: "h2" }).asFragment()).toMatchSnapshot();
     });
     it("renders h3 with correct attributes", () => {
-        expect(getComponent({ size: "h3" })).toMatchSnapshot();
+        expect(getComponent({ size: "h3" }).asFragment()).toMatchSnapshot();
     });
 
     it("renders h4 with correct attributes", () => {
-        expect(getComponent({ size: "h4" })).toMatchSnapshot();
+        expect(getComponent({ size: "h4" }).asFragment()).toMatchSnapshot();
     });
 });

test/components/views/typography/__snapshots__/Heading-test.tsx.snap

@@ -1,45 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Heading /> renders h1 with correct attributes 1`] = `
-<h1
+<DocumentFragment>
-  class="mx_Heading_h1 test"
+  <h1
-  data-test-id="test"
+    class="mx_Heading_h1 test"
->
+    data-testid="test"
-  <div>
+  >
-    test
+    <div>
-  </div>
+      test
-</h1>
+    </div>
+  </h1>
+</DocumentFragment>
 `;
 
 exports[`<Heading /> renders h2 with correct attributes 1`] = `
-<h2
+<DocumentFragment>
-  class="mx_Heading_h2 test"
+  <h2
-  data-test-id="test"
+    class="mx_Heading_h2 test"
->
+    data-testid="test"
-  <div>
+  >
-    test
+    <div>
-  </div>
+      test
-</h2>
+    </div>
+  </h2>
+</DocumentFragment>
 `;
 
 exports[`<Heading /> renders h3 with correct attributes 1`] = `
-<h3
+<DocumentFragment>
-  class="mx_Heading_h3 test"
+  <h3
-  data-test-id="test"
+    class="mx_Heading_h3 test"
->
+    data-testid="test"
-  <div>
+  >
-    test
+    <div>
-  </div>
+      test
-</h3>
+    </div>
+  </h3>
+</DocumentFragment>
 `;
 
 exports[`<Heading /> renders h4 with correct attributes 1`] = `
-<h4
+<DocumentFragment>
-  class="mx_Heading_h4 test"
+  <h4
-  data-test-id="test"
+    class="mx_Heading_h4 test"
->
+    data-testid="test"
-  <div>
+  >
-    test
+    <div>
-  </div>
+      test
-</h4>
+    </div>
+  </h4>
+</DocumentFragment>
 `;

test/useTopic-test.tsx

@@ -16,8 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
-import { act } from "react-dom/test-utils";
+import { act, render, screen } from "@testing-library/react";
-import { render, screen } from "@testing-library/react";
 
 import { useTopic } from "../src/hooks/room/useTopic";
 import { mkEvent, stubClient } from "./test-utils";

test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx

@@ -12,7 +12,6 @@ limitations under the License.
 */
 
 import React from "react";
-import { Container } from "react-dom";
 import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix";
 import { render, RenderResult } from "@testing-library/react";
 
@@ -33,7 +32,7 @@ describe("VoiceBroadcastHeader", () => {
     let client: MatrixClient;
     let room: Room;
     const sender = new RoomMember(roomId, userId);
-    let container: Container;
+    let container: RenderResult["container"];
 
     const renderHeader = (live: VoiceBroadcastLiveness, showBroadcast?: boolean, buffering?: boolean): RenderResult => {
         return render(

yarn.lock

@@ -2336,13 +2336,6 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-test-renderer@^17.0.1":
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.2.tgz#5f800a39b12ac8d2a2149e7e1885215bcf4edbbf"
-  integrity sha512-+F1KONQTBHDBBhbHuT2GNydeMpPuviduXIVJRB7Y4nma4NR5DrTJfMMZ+jbhEHbpwL+Uqhs1WXh4KHiyrtYTPg==
-  dependencies:
-    "@types/react" "^17"
-
 "@types/react-transition-group@^4.4.0":
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
@@ -7494,7 +7487,7 @@ react-shallow-renderer@^16.13.1:
     object-assign "^4.1.1"
     react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
 
-react-test-renderer@^17.0.0, react-test-renderer@^17.0.2:
+react-test-renderer@^17.0.0:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
   integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==