Update usages of test utilities preferring RTL (#10203)

Author: t3chguy

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 } from "react-dom/test-utils";
+import { act, fireEvent, render } from "@testing-library/react";
 
 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 } from "react-dom/test-utils";
+import { act, fireEvent, render } from "@testing-library/react";
 
 import DialogSidebar from "../../../../src/components/views/beacon/DialogSidebar";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";