Migrate some enzyme tests to RTL (#9383)

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

@@ -12,18 +12,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { fireEvent, render } from "@testing-library/react";
 import React, { useState } from "react";
-// eslint-disable-next-line deprecate/import
-import { mount } from "enzyme";
 
 import { Linkify } from "../../../../src/components/views/elements/Linkify";
 
 describe("Linkify", () => {
     it("linkifies the context", () => {
-        const wrapper = mount(<Linkify>
+        const { container } = render(<Linkify>
             https://perdu.com
         </Linkify>);
-        expect(wrapper.html()).toBe(
+        expect(container.innerHTML).toBe(
             "<div><a href=\"https://perdu.com\" class=\"linkified\" target=\"_blank\" rel=\"noreferrer noopener\">"+
             "https://perdu.com" +
             "</a></div>",
@@ -31,10 +30,10 @@ describe("Linkify", () => {
     });
 
     it("correctly linkifies a room alias", () => {
-        const wrapper = mount(<Linkify>
+        const { container } = render(<Linkify>
             #element-web:matrix.org
         </Linkify>);
-        expect(wrapper.html()).toBe(
+        expect(container.innerHTML).toBe(
             "<div>" +
             "<a href=\"https://matrix.to/#/#element-web:matrix.org\" class=\"linkified\" rel=\"noreferrer noopener\">" +
             "#element-web:matrix.org" +
@@ -45,11 +44,11 @@ describe("Linkify", () => {
     it("changes the root tag name", () => {
         const TAG_NAME = "p";
 
-        const wrapper = mount(<Linkify as={TAG_NAME}>
+        const { container } = render(<Linkify as={TAG_NAME}>
             Hello world!
         </Linkify>);
 
-        expect(wrapper.find("p")).toHaveLength(1);
+        expect(container.querySelectorAll("p")).toHaveLength(1);
     });
 
     it("relinkifies on update", () => {
@@ -70,18 +69,18 @@ describe("Linkify", () => {
             </div>;
         }
 
-        const wrapper = mount(<DummyTest />);
+        const { container } = render(<DummyTest />);
 
-        expect(wrapper.html()).toBe(
+        expect(container.innerHTML).toBe(
             "<div><div>" +
             "<a href=\"https://perdu.com\" class=\"linkified\" target=\"_blank\" rel=\"noreferrer noopener\">" +
             "https://perdu.com" +
             "</a></div></div>",
         );
 
-        wrapper.find('div').at(0).simulate('click');
+        fireEvent.click(container.querySelector("div"));
 
-        expect(wrapper.html()).toBe(
+        expect(container.innerHTML).toBe(
             "<div><div>" +
             "<a href=\"https://matrix.org\" class=\"linkified\" target=\"_blank\" rel=\"noreferrer noopener\">" +
             "https://matrix.org" +

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

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from "react";
 import { render, screen, act, cleanup, fireEvent, waitFor } from "@testing-library/react";
-import "@testing-library/jest-dom";
 import { mocked, Mocked } from "jest-mock";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/client";

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

@@ -15,9 +15,8 @@ limitations under the License.
 */
 
 import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount } from "enzyme";
 import { mocked } from "jest-mock";
+import { render } from "@testing-library/react";
 
 import { formatFullDateNoTime } from "../../../../src/DateUtils";
 import SettingsStore from "../../../../src/settings/SettingsStore";
@@ -48,10 +47,11 @@ describe("DateSeparator", () => {
 
     const mockClient = getMockClientWithEventEmitter({});
     const getComponent = (props = {}) =>
-        mount(<DateSeparator {...defaultProps} {...props} />, {
+        render((
-            wrappingComponent: MatrixClientContext.Provider,
+            <MatrixClientContext.Provider value={mockClient}>
-            wrappingComponentProps: { value: mockClient },
+                <DateSeparator {...defaultProps} {...props} />
-        });
+            </MatrixClientContext.Provider>
+        ));
 
     type TestCase = [string, number, string];
     const testCases: TestCase[] = [
@@ -81,18 +81,19 @@ describe("DateSeparator", () => {
     });
 
     it('renders the date separator correctly', () => {
-        const component = getComponent();
+        const { asFragment } = getComponent();
-        expect(component).toMatchSnapshot();
+        expect(asFragment()).toMatchSnapshot();
         expect(SettingsStore.getValue).toHaveBeenCalledWith(UIFeature.TimelineEnableRelativeDates);
     });
 
     it.each(testCases)('formats date correctly when current time is %s', (_d, ts, result) => {
-        expect(getComponent({ ts, forExport: false }).text()).toEqual(result);
+        expect(getComponent({ ts, forExport: false }).container.textContent).toEqual(result);
     });
 
     describe('when forExport is true', () => {
         it.each(testCases)('formats date in full when current time is %s', (_d, ts) => {
-            expect(getComponent({ ts, forExport: true }).text()).toEqual(formatFullDateNoTime(new Date(ts)));
+            expect(getComponent({ ts, forExport: true }).container.textContent)
+                .toEqual(formatFullDateNoTime(new Date(ts)));
         });
     });
 
@@ -105,7 +106,8 @@ describe("DateSeparator", () => {
             });
         });
         it.each(testCases)('formats date in full when current time is %s', (_d, ts) => {
-            expect(getComponent({ ts, forExport: false }).text()).toEqual(formatFullDateNoTime(new Date(ts)));
+            expect(getComponent({ ts, forExport: false }).container.textContent)
+                .toEqual(formatFullDateNoTime(new Date(ts)));
         });
     });
 
@@ -118,8 +120,8 @@ describe("DateSeparator", () => {
             });
         });
         it('renders the date separator correctly', () => {
-            const component = getComponent();
+            const { asFragment } = getComponent();
-            expect(component).toMatchSnapshot();
+            expect(asFragment()).toMatchSnapshot();
         });
     });
 });

test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap

@@ -1,16 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DateSeparator renders the date separator correctly 1`] = `
-<DateSeparator
+<DocumentFragment>
-  now="2021-12-17T08:09:00.000Z"
-  roomId="!unused:example.org"
-  ts={1639728540000}
->
   <div
     aria-label="Today"
-    className="mx_DateSeparator"
+    class="mx_DateSeparator"
     role="separator"
-    tabIndex={-1}
+    tabindex="-1"
   >
     <hr
       role="none"
@@ -24,85 +20,40 @@ exports[`DateSeparator renders the date separator correctly 1`] = `
       role="none"
     />
   </div>
-</DateSeparator>
+</DocumentFragment>
 `;
 
 exports[`DateSeparator when feature_jump_to_date is enabled renders the date separator correctly 1`] = `
-<DateSeparator
+<DocumentFragment>
-  now="2021-12-17T08:09:00.000Z"
-  roomId="!unused:example.org"
-  ts={1639728540000}
->
   <div
     aria-label="Fri, Dec 17 2021"
-    className="mx_DateSeparator"
+    class="mx_DateSeparator"
     role="separator"
-    tabIndex={-1}
+    tabindex="-1"
   >
     <hr
       role="none"
     />
-    <ContextMenuTooltipButton
+    <div
-      className="mx_DateSeparator_jumpToDateMenu"
+      aria-expanded="false"
-      isExpanded={false}
+      aria-haspopup="true"
-      onClick={[Function]}
+      aria-label="Jump to date"
-      title="Jump to date"
+      class="mx_AccessibleButton mx_DateSeparator_jumpToDateMenu"
+      role="button"
+      tabindex="0"
     >
-      <AccessibleTooltipButton
+      <h2
-        aria-expanded={false}
+        aria-hidden="true"
-        aria-haspopup={true}
-        className="mx_DateSeparator_jumpToDateMenu"
-        forceHide={false}
-        onClick={[Function]}
-        onContextMenu={[Function]}
-        title="Jump to date"
       >
-        <AccessibleButton
+        Fri, Dec 17 2021
-          aria-expanded={false}
+      </h2>
-          aria-haspopup={true}
+      <div
-          aria-label="Jump to date"
+        class="mx_DateSeparator_chevron"
-          className="mx_DateSeparator_jumpToDateMenu"
+      />
-          element="div"
+    </div>
-          onBlur={[Function]}
-          onClick={[Function]}
-          onContextMenu={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseOver={[Function]}
-          role="button"
-          tabIndex={0}
-        >
-          <div
-            aria-expanded={false}
-            aria-haspopup={true}
-            aria-label="Jump to date"
-            className="mx_AccessibleButton mx_DateSeparator_jumpToDateMenu"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onContextMenu={[Function]}
-            onFocus={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseLeave={[Function]}
-            onMouseOver={[Function]}
-            role="button"
-            tabIndex={0}
-          >
-            <h2
-              aria-hidden="true"
-            >
-              Fri, Dec 17 2021
-            </h2>
-            <div
-              className="mx_DateSeparator_chevron"
-            />
-          </div>
-        </AccessibleButton>
-      </AccessibleTooltipButton>
-    </ContextMenuTooltipButton>
     <hr
       role="none"
     />
   </div>
-</DateSeparator>
+</DocumentFragment>
 `;

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

@@ -18,7 +18,6 @@ import React from 'react';
 // eslint-disable-next-line deprecate/import
 import { mount, ReactWrapper } from 'enzyme';
 import { render, screen, act, fireEvent, waitFor, getByRole } from "@testing-library/react";
-import "@testing-library/jest-dom";
 import { mocked, Mocked } from "jest-mock";
 import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
 import { Room } from "matrix-js-sdk/src/models/room";

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

@@ -15,13 +15,12 @@ limitations under the License.
 */
 
 import React from 'react';
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper, HTMLAttributes } from 'enzyme';
 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 SpaceStore from "../../../../src/stores/spaces/SpaceStore";
 import { MetaSpace } from "../../../../src/stores/spaces";
@@ -52,55 +51,53 @@ const setupSpace = (client: MatrixClient): Room => {
     return testSpace;
 };
 
-const setupMainMenu = async (client: MatrixClient, testSpace: Room): Promise<ReactWrapper> => {
+const setupMainMenu = async (client: MatrixClient, testSpace: Room): Promise<RenderResult> => {
     await testUtils.setupAsyncStoreWithClient(SpaceStore.instance, client);
     act(() => {
         SpaceStore.instance.setActiveSpace(testSpace.roomId);
     });
 
-    const wrapper = mount(<RoomListHeader />);
+    const wrapper = render(<RoomListHeader />);
 
-    expect(wrapper.text()).toBe("Test Space");
+    expect(wrapper.container.textContent).toBe("Test Space");
     act(() => {
-        wrapper.find('[aria-label="Test Space menu"]').hostNodes().simulate("click");
+        wrapper.container.querySelector<HTMLElement>('[aria-label="Test Space menu"]').click();
     });
-    wrapper.update();
 
     return wrapper;
 };
 
-const setupPlusMenu = async (client: MatrixClient, testSpace: Room): Promise<ReactWrapper> => {
+const setupPlusMenu = async (client: MatrixClient, testSpace: Room): Promise<RenderResult> => {
     await testUtils.setupAsyncStoreWithClient(SpaceStore.instance, client);
     act(() => {
         SpaceStore.instance.setActiveSpace(testSpace.roomId);
     });
 
-    const wrapper = mount(<RoomListHeader />);
+    const wrapper = render(<RoomListHeader />);
 
-    expect(wrapper.text()).toBe("Test Space");
+    expect(wrapper.container.textContent).toBe("Test Space");
     act(() => {
-        wrapper.find('[aria-label="Add"]').hostNodes().simulate("click");
+        wrapper.container.querySelector<HTMLElement>('[aria-label="Add"]').click();
     });
-    wrapper.update();
 
     return wrapper;
 };
 
-const checkIsDisabled = (menuItem: ReactWrapper<HTMLAttributes>): void => {
+const checkIsDisabled = (menuItem: HTMLElement): void => {
-    expect(menuItem.props().disabled).toBeTruthy();
+    expect(menuItem).toHaveAttribute("disabled");
-    expect(menuItem.props()['aria-disabled']).toBeTruthy();
+    expect(menuItem).toHaveAttribute("aria-disabled", "true");
 };
 
-const checkMenuLabels = (items: ReactWrapper<HTMLAttributes>, labelArray: Array<string>) => {
+const checkMenuLabels = (items: NodeListOf<Element>, labelArray: Array<string>) => {
     expect(items).toHaveLength(labelArray.length);
 
-    const checkLabel = (item: ReactWrapper<HTMLAttributes>, label: string) => {
+    const checkLabel = (item: Element, label: string) => {
-        expect(item.find(".mx_IconizedContextMenu_label").text()).toBe(label);
+        expect(item.querySelector(".mx_IconizedContextMenu_label").textContent).toBe(label);
     };
 
     labelArray.forEach((label, index) => {
         console.log('index', index, 'label', label);
-        checkLabel(items.at(index), label);
+        checkLabel(items[index], label);
     });
 };
 
@@ -125,26 +122,23 @@ describe("RoomListHeader", () => {
             SpaceStore.instance.setActiveSpace(MetaSpace.Home);
         });
 
-        const wrapper = mount(<RoomListHeader />);
+        const { container } = render(<RoomListHeader />);
 
-        expect(wrapper.text()).toBe("Home");
+        expect(container.textContent).toBe("Home");
-        act(() => {
+        fireEvent.click(screen.getByLabelText("Home options"));
-            wrapper.find('[aria-label="Home options"]').hostNodes().simulate("click");
-        });
-        wrapper.update();
 
-        const menu = wrapper.find(".mx_IconizedContextMenu");
+        const menu = screen.getByRole("menu");
-        const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
+        const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
         expect(items).toHaveLength(1);
-        expect(items.at(0).text()).toBe("Show all rooms");
+        expect(items[0].textContent).toBe("Show all rooms");
     });
 
     it("renders a main menu for spaces", async () => {
         const testSpace = setupSpace(client);
-        const wrapper = await setupMainMenu(client, testSpace);
+        await setupMainMenu(client, testSpace);
 
-        const menu = wrapper.find(".mx_IconizedContextMenu");
+        const menu = screen.getByRole("menu");
-        const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
+        const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
 
         checkMenuLabels(items, [
             "Space home",
@@ -158,10 +152,10 @@ describe("RoomListHeader", () => {
 
     it("renders a plus menu for spaces", async () => {
         const testSpace = setupSpace(client);
-        const wrapper = await setupPlusMenu(client, testSpace);
+        await setupPlusMenu(client, testSpace);
 
-        const menu = wrapper.find(".mx_IconizedContextMenu");
+        const menu = screen.getByRole("menu");
-        const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
+        const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
 
         checkMenuLabels(items, [
             "New room",
@@ -178,17 +172,14 @@ describe("RoomListHeader", () => {
         });
 
         const testSpace = setupSpace(client);
-        const wrapper = await setupMainMenu(client, testSpace);
+        await setupMainMenu(client, testSpace);
 
         act(() => {
             SpaceStore.instance.setActiveSpace(MetaSpace.Favourites);
         });
-        wrapper.update();
 
-        expect(wrapper.text()).toBe("Favourites");
+        screen.getByText("Favourites");
-
+        expect(screen.queryByRole("menu")).toBeFalsy();
-        const menu = wrapper.find(".mx_IconizedContextMenu");
-        expect(menu).toHaveLength(0);
     });
 
     describe('UIComponents', () => {
@@ -198,10 +189,10 @@ describe("RoomListHeader", () => {
                 blockUIComponent(UIComponent.CreateSpaces);
 
                 const testSpace = setupSpace(client);
-                const wrapper = await setupMainMenu(client, testSpace);
+                await setupMainMenu(client, testSpace);
 
-                const menu = wrapper.find(".mx_IconizedContextMenu");
+                const menu = screen.getByRole("menu");
-                const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
+                const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
                 checkMenuLabels(items, [
                     "Space home",
                     "Manage & explore rooms",
@@ -217,10 +208,10 @@ describe("RoomListHeader", () => {
                 blockUIComponent(UIComponent.CreateRooms);
 
                 const testSpace = setupSpace(client);
-                const wrapper = await setupMainMenu(client, testSpace);
+                await setupMainMenu(client, testSpace);
 
-                const menu = wrapper.find(".mx_IconizedContextMenu");
+                const menu = screen.getByRole("menu");
-                const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
+                const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
                 checkMenuLabels(items, [
                     "Space home",
                     "Explore rooms", // not Manage & explore rooms
@@ -238,10 +229,10 @@ describe("RoomListHeader", () => {
                 blockUIComponent(UIComponent.CreateSpaces);
 
                 const testSpace = setupSpace(client);
-                const wrapper = await setupPlusMenu(client, testSpace);
+                await setupPlusMenu(client, testSpace);
 
-                const menu = wrapper.find(".mx_IconizedContextMenu");
+                const menu = screen.getByRole("menu");
-                const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
+                const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
 
                 checkMenuLabels(items, [
                     "New room",
@@ -256,10 +247,10 @@ describe("RoomListHeader", () => {
                 blockUIComponent(UIComponent.CreateRooms);
 
                 const testSpace = setupSpace(client);
-                const wrapper = await setupPlusMenu(client, testSpace);
+                await setupPlusMenu(client, testSpace);
 
-                const menu = wrapper.find(".mx_IconizedContextMenu");
+                const menu = screen.getByRole("menu");
-                const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
+                const items = menu.querySelectorAll<HTMLElement>(".mx_IconizedContextMenu_item");
 
                 checkMenuLabels(items, [
                     "New room",
@@ -269,7 +260,7 @@ describe("RoomListHeader", () => {
                 ]);
 
                 // "Add existing room" is disabled
-                checkIsDisabled(items.at(2));
+                checkIsDisabled(items[2]);
             });
         });
     });
@@ -280,10 +271,10 @@ describe("RoomListHeader", () => {
             mocked(testSpace.currentState.maySendStateEvent).mockImplementation(
                 (stateEventType, userId) => stateEventType !== EventType.SpaceChild);
 
-            const wrapper = await setupMainMenu(client, testSpace);
+            await setupMainMenu(client, testSpace);
 
-            const menu = wrapper.find(".mx_IconizedContextMenu");
+            const menu = screen.getByRole("menu");
-            const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
+            const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
             checkMenuLabels(items, [
                 "Space home",
                 "Explore rooms", // not Manage & explore rooms
@@ -299,10 +290,10 @@ describe("RoomListHeader", () => {
             mocked(testSpace.currentState.maySendStateEvent).mockImplementation(
                 (stateEventType, userId) => stateEventType !== EventType.SpaceChild);
 
-            const wrapper = await setupPlusMenu(client, testSpace);
+            await setupPlusMenu(client, testSpace);
 
-            const menu = wrapper.find(".mx_IconizedContextMenu");
+            const menu = screen.getByRole("menu");
-            const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
+            const items = menu.querySelectorAll<HTMLElement>(".mx_IconizedContextMenu_item");
 
             checkMenuLabels(items, [
                 "New room",
@@ -312,9 +303,9 @@ describe("RoomListHeader", () => {
             ]);
 
             // "Add existing room" is disabled
-            checkIsDisabled(items.at(2));
+            checkIsDisabled(items[2]);
             // "Add space" is disabled
-            checkIsDisabled(items.at(3));
+            checkIsDisabled(items[3]);
         });
     });
 });

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

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from "react";
 import { fireEvent, render, RenderResult, waitFor } from "@testing-library/react";
-import "@testing-library/jest-dom";
 
 import PreferencesUserSettingsTab from
     "../../../../../../src/components/views/settings/tabs/user/PreferencesUserSettingsTab";

test/components/views/voip/CallView-test.tsx

@@ -22,7 +22,6 @@ import { MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/client";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
 import { Widget } from "matrix-widget-api";
-import "@testing-library/jest-dom";
 
 import type { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import type { ClientWidgetApi } from "matrix-widget-api";

test/setupTests.js

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import "@testing-library/jest-dom";
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
 // eslint-disable-next-line deprecate/import
 import { configure } from "enzyme";

test/toasts/IncomingCallToast-test.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from "react";
 import { render, screen, cleanup, fireEvent, waitFor } from "@testing-library/react";
-import "@testing-library/jest-dom";
 import { mocked, Mocked } from "jest-mock";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixClient } from "matrix-js-sdk/src/client";