Migrate some enzyme tests to RTL (#9383)

matrix-org · Oct 10, 2022 · 6b30a5e · 6b30a5e
1 parent c795ada
commit 6b30a5e
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 163 deletions.
diff --git a/test/components/views/elements/Linkify-test.tsx b/test/components/views/elements/Linkify-test.tsx
@@ -12,29 +12,28 @@ 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>",
         );
     });
 
     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" +

diff --git a/test/components/views/messages/CallEvent-test.tsx b/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";

diff --git a/test/components/views/messages/DateSeparator-test.tsx b/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} />, {
-            wrappingComponent: MatrixClientContext.Provider,
-            wrappingComponentProps: { value: mockClient },
-        });
+        render((
+            <MatrixClientContext.Provider 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();
-        expect(component).toMatchSnapshot();
+        const { asFragment } = getComponent();
+        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();
-            expect(component).toMatchSnapshot();
+            const { asFragment } = getComponent();
+            expect(asFragment()).toMatchSnapshot();
         });
     });
 });
diff --git a/test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap b/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
-  now="2021-12-17T08:09:00.000Z"
-  roomId="!unused:example.org"
-  ts={1639728540000}
->
+<DocumentFragment>
   <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
-  now="2021-12-17T08:09:00.000Z"
-  roomId="!unused:example.org"
-  ts={1639728540000}
->
+<DocumentFragment>
   <div
     aria-label="Fri, Dec 17 2021"
-    className="mx_DateSeparator"
+    class="mx_DateSeparator"
     role="separator"
-    tabIndex={-1}
+    tabindex="-1"
   >
     <hr
       role="none"
     />
-    <ContextMenuTooltipButton
-      className="mx_DateSeparator_jumpToDateMenu"
-      isExpanded={false}
-      onClick={[Function]}
-      title="Jump to date"
+    <div
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Jump to date"
+      class="mx_AccessibleButton mx_DateSeparator_jumpToDateMenu"
+      role="button"
+      tabindex="0"
     >
-      <AccessibleTooltipButton
-        aria-expanded={false}
-        aria-haspopup={true}
-        className="mx_DateSeparator_jumpToDateMenu"
-        forceHide={false}
-        onClick={[Function]}
-        onContextMenu={[Function]}
-        title="Jump to date"
+      <h2
+        aria-hidden="true"
       >
-        <AccessibleButton
-          aria-expanded={false}
-          aria-haspopup={true}
-          aria-label="Jump to date"
-          className="mx_DateSeparator_jumpToDateMenu"
-          element="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>
+        Fri, Dec 17 2021
+      </h2>
+      <div
+        class="mx_DateSeparator_chevron"
+      />
+    </div>
     <hr
       role="none"
     />
   </div>
-</DateSeparator>
+</DocumentFragment>
 `;
diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/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";