Update usages of test utilities preferring RTL (#10203)

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";

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 } from "react-dom/test-utils";
+import { act, fireEvent, render } from "@testing-library/react";
 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>(
-            <div>
-                <ExternalLink {...defaultProps} {...props} />
-            </div>,
-        ) as HTMLDivElement;
-        return wrapper.children[0];
+        return render(<ExternalLink {...defaultProps} {...props} />);
     };
 
     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 });
-        expect(component.getAttribute("rel")).toEqual("noreferrer noopener");
-        expect(component.getAttribute("target")).toEqual("_blank");
+        const { getByTestId } = getComponent({ children });
+        const container = getByTestId("test");
+        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 } from "react-dom/test-utils";
+import { act, renderIntoDocument, Simulate } 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
-  class="mx_ExternalLink myCustomClass"
-  data-test-id="test"
-  href="test.com"
-  rel="noopener"
-  target="_self"
->
-  <span>
-    react element 
-    <b>
-      children
-    </b>
-  </span>
-  <i
-    class="mx_ExternalLink_icon"
-  />
-</a>
+<DocumentFragment>
+  <a
+    class="mx_ExternalLink myCustomClass"
+    data-testid="test"
+    href="test.com"
+    rel="noopener"
+    target="_self"
+  >
+    <span>
+      react element 
+      <b>
+        children
+      </b>
+    </span>
+    <i
+      class="mx_ExternalLink_icon"
+    />
+  </a>
+</DocumentFragment>
 `;
 
 exports[`<ExternalLink /> renders plain text link correctly 1`] = `
-<a
-  class="mx_ExternalLink myCustomClass"
-  data-test-id="test"
-  href="test.com"
-  rel="noreferrer noopener"
-  target="_blank"
->
-  test
-  <i
-    class="mx_ExternalLink_icon"
-  />
-</a>
+<DocumentFragment>
+  <a
+    class="mx_ExternalLink myCustomClass"
+    data-testid="test"
+    href="test.com"
+    rel="noreferrer noopener"
+    target="_blank"
+  >
+    test
+    <i
+      class="mx_ExternalLink_icon"
+    />
+  </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 { fireEvent, render, RenderResult } from "@testing-library/react";
+import { act, 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 { fireEvent, getByTestId, render } from "@testing-library/react";
+import { act, 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} />);
-        expect(renderer.toJSON()).toBeNull();
+        const { container } = render(<MKeyVerificationConclusion mxEvent={event} />);
+        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} />);
-        expect(renderer.toJSON()).toBeNull();
+        const { container } = render(<MKeyVerificationConclusion mxEvent={event} />);
+        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} />);
-        expect(renderer.toJSON()).toBeNull();
+        const { container } = render(<MKeyVerificationConclusion mxEvent={event} />);
+        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} />);
-        expect(renderer.toJSON()).toBeNull();
+        const { container } = render(<MKeyVerificationConclusion mxEvent={event} />);
+        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} />);
-        expect(renderer.toJSON()).toBeNull();
+        const { container } = render(<MKeyVerificationConclusion mxEvent={event} />);
+        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} />);
-        expect(renderer.toJSON()).toBeNull();
+        const { container } = render(<MKeyVerificationConclusion mxEvent={event} />);
+        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 ReactDOM from "react-dom";
+import React from "react";
+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 } from "react-dom/test-utils";
+import { act, fireEvent, render } from "@testing-library/react";
 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 { fireEvent, getByTestId, render, screen, waitFor } from "@testing-library/react";
+import { act, 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>(
-            <div>
-                <SettingsFieldset {...defaultProps} {...props} />
-            </div>,
-        ) as HTMLDivElement;
-        return wrapper.children[0];
+        return render(<SettingsFieldset {...defaultProps} {...props} />);
     };
 
     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
-  class="mx_SettingsFieldset"
-  data-test-id="test"
->
-  <legend
-    class="mx_SettingsFieldset_legend"
+<DocumentFragment>
+  <fieldset
+    class="mx_SettingsFieldset"
+    data-testid="test"
   >
-    Who can read history?
-  </legend>
-  <div
-    class="mx_SettingsFieldset_description"
-  >
-    Changes to who can read history.
-  </div>
-  <div>
-    test
-  </div>
-</fieldset>
+    <legend
+      class="mx_SettingsFieldset_legend"
+    >
+      Who can read history?
+    </legend>
+    <div
+      class="mx_SettingsFieldset_description"
+    >
+      Changes to who can read history.
+    </div>
+    <div>
+      test
+    </div>
+  </fieldset>
+</DocumentFragment>
 `;
 
 exports[`<SettingsFieldset /> renders fieldset with react description 1`] = `
-<fieldset
-  class="mx_SettingsFieldset"
-  data-test-id="test"
->
-  <legend
-    class="mx_SettingsFieldset_legend"
+<DocumentFragment>
+  <fieldset
+    class="mx_SettingsFieldset"
+    data-testid="test"
   >
-    Who can read history?
-  </legend>
-  <div
-    class="mx_SettingsFieldset_description"
-  >
-    <p>
-      Test
-    </p>
-    <a
-      href="#test"
+    <legend
+      class="mx_SettingsFieldset_legend"
     >
-      a link
-    </a>
-  </div>
-  <div>
-    test
-  </div>
-</fieldset>
+      Who can read history?
+    </legend>
+    <div
+      class="mx_SettingsFieldset_description"
+    >
+      <p>
+        Test
+      </p>
+      <a
+        href="#test"
+      >
+        a link
+      </a>
+    </div>
+    <div>
+      test
+    </div>
+  </fieldset>
+</DocumentFragment>
 `;
 
 exports[`<SettingsFieldset /> renders fieldset without description 1`] = `
-<fieldset
-  class="mx_SettingsFieldset"
-  data-test-id="test"
->
-  <legend
-    class="mx_SettingsFieldset_legend"
+<DocumentFragment>
+  <fieldset
+    class="mx_SettingsFieldset"
+    data-testid="test"
   >
-    Who can read history?
-  </legend>
-  <div>
-    test
-  </div>
-</fieldset>
+    <legend
+      class="mx_SettingsFieldset_legend"
+    >
+      Who can read history?
+    </legend>
+    <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 } from "react-dom/test-utils";
+import { act, fireEvent, render } from "@testing-library/react";
 
 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 } from "react-dom/test-utils";
+import { act, fireEvent, render, RenderResult } from "@testing-library/react";
 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 } from "react-dom/test-utils";
+import { act, Simulate } 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>(
-            // wrap in element so renderIntoDocument can render functional component
-            <span>
-                <SpaceSettingsVisibilityTab {...defaultProps} {...props} />
-            </span>,
-        ) as HTMLSpanElement;
-        return wrapper.children[0];
+        return render(<SpaceSettingsVisibilityTab {...defaultProps} {...props} />);
     };
 
-    const getByTestId = (container: Element, id: string) => container.querySelector(`[data-test-id=${id}]`);
-    const toggleGuestAccessSection = async (component: Element) => {
-        const toggleButton = getByTestId(component, "toggle-guest-access-btn")!;
-        await act(async () => {
-            Simulate.click(toggleButton);
-        });
+    const toggleGuestAccessSection = async ({ getByTestId }: RenderResult) => {
+        const toggleButton = getByTestId("toggle-guest-access-btn")!;
+        fireEvent.click(toggleButton);
     };
-    const getGuestAccessToggle = (component: Element) => component.querySelector('[aria-label="Enable guest access"]');
-    const getHistoryVisibilityToggle = (component: Element) => component.querySelector('[aria-label="Preview Space"]');
-    const getErrorMessage = (component: Element) => getByTestId(component, "space-settings-error")?.textContent;
+    const getGuestAccessToggle = ({ container }: RenderResult) =>
+        container.querySelector('[aria-label="Enable guest access"]');
+    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();
-        expect(component).toMatchSnapshot();
+        const { asFragment } = getComponent();
+        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(getByTestId(component, "local-address-fieldset")).toBeFalsy();
+            expect(queryByTestId("published-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 () => {
-                    Simulate.click(guestAccessInput!);
-                });
-
+                fireEvent.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 () => {
-                    Simulate.click(getHistoryVisibilityToggle(component)!);
-                });
-
+                fireEvent.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(component, "local-address-fieldset")).toBeTruthy();
+            expect(getByTestId("published-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
-  class="mx_SettingsTab"
->
+<DocumentFragment>
   <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
-      class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"
+    <fieldset
+      class="mx_SettingsFieldset"
+      data-testid="access-fieldset"
     >
-      <input
-        aria-describedby="joinRule-invite-description"
-        checked=""
-        disabled=""
-        id="joinRule-invite"
-        name="joinRule"
-        type="radio"
-        value="invite"
-      />
-      <div>
-        <div />
-      </div>
-      <div
-        class="mx_StyledRadioButton_content"
+      <legend
+        class="mx_SettingsFieldset_legend"
       >
-        Private (invite only)
-      </div>
+        Access
+      </legend>
       <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"
+        class="mx_SettingsFieldset_description"
       >
-        Public
+        Decide who can view and join mock-space.
       </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"
+      <label
+        class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"
       >
-        <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"
-          />
+        <input
+          aria-describedby="joinRule-invite-description"
+          checked=""
+          disabled=""
+          id="joinRule-invite"
+          name="joinRule"
+          type="radio"
+          value="invite"
+        />
+        <div>
+          <div />
         </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>
-        Allow people to preview your space before they join.
-        <br />
-        <b>
-          Recommended for public spaces.
-        </b>
-      </p>
-    </div>
-  </fieldset>
-</div>
+    </fieldset>
+  </div>
+</DocumentFragment>
 `;

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",
-        children: <div>test</div>,
-        ["data-test-id"]: "test",
-        className: "test",
+        "size": "h1",
+        "children": <div>test</div>,
+        "data-testid": "test",
+        "className": "test",
     } as any;
     const getComponent = (props = {}) => {
-        const wrapper = renderIntoDocument<HTMLDivElement>(
-            <div>
-                <Heading {...defaultProps} {...props} />
-            </div>,
-        ) as HTMLDivElement;
-        return wrapper.children[0];
+        return render(<Heading {...defaultProps} {...props} />);
     };
 
     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
-  class="mx_Heading_h1 test"
-  data-test-id="test"
->
-  <div>
-    test
-  </div>
-</h1>
+<DocumentFragment>
+  <h1
+    class="mx_Heading_h1 test"
+    data-testid="test"
+  >
+    <div>
+      test
+    </div>
+  </h1>
+</DocumentFragment>
 `;
 
 exports[`<Heading /> renders h2 with correct attributes 1`] = `
-<h2
-  class="mx_Heading_h2 test"
-  data-test-id="test"
->
-  <div>
-    test
-  </div>
-</h2>
+<DocumentFragment>
+  <h2
+    class="mx_Heading_h2 test"
+    data-testid="test"
+  >
+    <div>
+      test
+    </div>
+  </h2>
+</DocumentFragment>
 `;
 
 exports[`<Heading /> renders h3 with correct attributes 1`] = `
-<h3
-  class="mx_Heading_h3 test"
-  data-test-id="test"
->
-  <div>
-    test
-  </div>
-</h3>
+<DocumentFragment>
+  <h3
+    class="mx_Heading_h3 test"
+    data-testid="test"
+  >
+    <div>
+      test
+    </div>
+  </h3>
+</DocumentFragment>
 `;
 
 exports[`<Heading /> renders h4 with correct attributes 1`] = `
-<h4
-  class="mx_Heading_h4 test"
-  data-test-id="test"
->
-  <div>
-    test
-  </div>
-</h4>
+<DocumentFragment>
+  <h4
+    class="mx_Heading_h4 test"
+    data-testid="test"
+  >
+    <div>
+      test
+    </div>
+  </h4>
+</DocumentFragment>
 `;