Update tests to prefer RTL over Enzyme (#10247

* Update tests to prefer RTL over Enzyme

* Strict types

Author: t3chguy

src/components/views/audio_messages/PlayPauseButton.tsx

@@ -60,7 +60,7 @@ export default class PlayPauseButton extends React.PureComponent<IProps> {
 
         return (
             <AccessibleTooltipButton
-                data-test-id="play-pause-button"
+                data-testid="play-pause-button"
                 className={classes}
                 title={isPlaying ? _t("Pause") : _t("Play")}
                 onClick={this.onClick}

test/components/views/audio_messages/RecordingPlayback-test.tsx

@@ -15,20 +15,16 @@ limitations under the License.
 */
 
 import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
 import { mocked } from "jest-mock";
 import { logger } from "matrix-js-sdk/src/logger";
-import { act } from "react-dom/test-utils";
+import { fireEvent, render, RenderResult } from "@testing-library/react";
 
 import RecordingPlayback, { PlaybackLayout } from "../../../../src/components/views/audio_messages/RecordingPlayback";
 import { Playback } from "../../../../src/audio/Playback";
 import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext";
 import { createAudioContext } from "../../../../src/audio/compat";
-import { findByTestId, flushPromises } from "../../../test-utils";
-import PlaybackWaveform from "../../../../src/components/views/audio_messages/PlaybackWaveform";
-import SeekBar from "../../../../src/components/views/audio_messages/SeekBar";
-import PlaybackClock from "../../../../src/components/views/audio_messages/PlaybackClock";
+import { flushPromises } from "../../../test-utils";
+import { IRoomState } from "../../../../src/components/structures/RoomView";
 
 jest.mock("../../../../src/audio/compat", () => ({
     createAudioContext: jest.fn(),
@@ -57,12 +53,13 @@ describe("<RecordingPlayback />", () => {
 
     const mockChannelData = new Float32Array();
 
-    const defaultRoom = { roomId: "!room:server.org", timelineRenderingType: TimelineRenderingType.File };
+    const defaultRoom = { roomId: "!room:server.org", timelineRenderingType: TimelineRenderingType.File } as IRoomState;
     const getComponent = (props: React.ComponentProps<typeof RecordingPlayback>, room = defaultRoom) =>
-        mount(<RecordingPlayback {...props} />, {
-            wrappingComponent: RoomContext.Provider,
-            wrappingComponentProps: { value: room },
-        });
+        render(
+            <RoomContext.Provider value={room}>
+                <RecordingPlayback {...props} />
+            </RoomContext.Provider>,
+        );
 
     beforeEach(() => {
         jest.spyOn(logger, "error").mockRestore();
@@ -71,7 +68,7 @@ describe("<RecordingPlayback />", () => {
         mocked(createAudioContext).mockReturnValue(mockAudioContext as unknown as AudioContext);
     });
 
-    const getPlayButton = (component: ReactWrapper) => findByTestId(component, "play-pause-button").at(0);
+    const getPlayButton = (component: RenderResult) => component.getByTestId("play-pause-button");
 
     it("renders recording playback", () => {
         const playback = new Playback(new ArrayBuffer(8));
@@ -82,15 +79,16 @@ describe("<RecordingPlayback />", () => {
     it("disables play button while playback is decoding", async () => {
         const playback = new Playback(new ArrayBuffer(8));
         const component = getComponent({ playback });
-        expect(getPlayButton(component).props().disabled).toBeTruthy();
+        expect(getPlayButton(component)).toHaveAttribute("disabled");
+        expect(getPlayButton(component)).toHaveAttribute("aria-disabled", "true");
     });
 
     it("enables play button when playback is finished decoding", async () => {
         const playback = new Playback(new ArrayBuffer(8));
         const component = getComponent({ playback });
         await flushPromises();
-        component.setProps({});
-        expect(getPlayButton(component).props().disabled).toBeFalsy();
+        expect(getPlayButton(component)).not.toHaveAttribute("disabled");
+        expect(getPlayButton(component)).not.toHaveAttribute("aria-disabled", "true");
     });
 
     it("displays error when playback decoding fails", async () => {
@@ -101,16 +99,17 @@ describe("<RecordingPlayback />", () => {
         const playback = new Playback(new ArrayBuffer(8));
         const component = getComponent({ playback });
         await flushPromises();
-        expect(component.find(".text-warning").length).toBeFalsy();
+        expect(component.container.querySelector(".text-warning")).toBeDefined();
     });
 
     it("displays pre-prepared playback with correct playback phase", async () => {
         const playback = new Playback(new ArrayBuffer(8));
         await playback.prepare();
         const component = getComponent({ playback });
         // playback already decoded, button is not disabled
-        expect(getPlayButton(component).props().disabled).toBeFalsy();
-        expect(component.find(".text-warning").length).toBeFalsy();
+        expect(getPlayButton(component)).not.toHaveAttribute("disabled");
+        expect(getPlayButton(component)).not.toHaveAttribute("aria-disabled", "true");
+        expect(component.container.querySelector(".text-warning")).toBeFalsy();
     });
 
     it("toggles playback on play pause button click", async () => {
@@ -119,9 +118,7 @@ describe("<RecordingPlayback />", () => {
         await playback.prepare();
         const component = getComponent({ playback });
 
-        act(() => {
-            getPlayButton(component).simulate("click");
-        });
+        fireEvent.click(getPlayButton(component));
 
         expect(playback.toggle).toHaveBeenCalled();
     });
@@ -131,9 +128,9 @@ describe("<RecordingPlayback />", () => {
             const playback = new Playback(new ArrayBuffer(8));
             const component = getComponent({ playback, layout: PlaybackLayout.Composer });
 
-            expect(component.find(PlaybackClock).length).toBeTruthy();
-            expect(component.find(PlaybackWaveform).length).toBeTruthy();
-            expect(component.find(SeekBar).length).toBeFalsy();
+            expect(component.container.querySelector(".mx_Clock")).toBeDefined();
+            expect(component.container.querySelector(".mx_Waveform")).toBeDefined();
+            expect(component.container.querySelector(".mx_SeekBar")).toBeFalsy();
         });
     });
 
@@ -142,18 +139,18 @@ describe("<RecordingPlayback />", () => {
             const playback = new Playback(new ArrayBuffer(8));
             const component = getComponent({ playback, layout: PlaybackLayout.Timeline });
 
-            expect(component.find(PlaybackClock).length).toBeTruthy();
-            expect(component.find(PlaybackWaveform).length).toBeTruthy();
-            expect(component.find(SeekBar).length).toBeTruthy();
+            expect(component.container.querySelector(".mx_Clock")).toBeDefined();
+            expect(component.container.querySelector(".mx_Waveform")).toBeDefined();
+            expect(component.container.querySelector(".mx_SeekBar")).toBeDefined();
         });
 
         it("should be the default", () => {
             const playback = new Playback(new ArrayBuffer(8));
             const component = getComponent({ playback }); // no layout set for test
 
-            expect(component.find(PlaybackClock).length).toBeTruthy();
-            expect(component.find(PlaybackWaveform).length).toBeTruthy();
-            expect(component.find(SeekBar).length).toBeTruthy();
+            expect(component.container.querySelector(".mx_Clock")).toBeDefined();
+            expect(component.container.querySelector(".mx_Waveform")).toBeDefined();
+            expect(component.container.querySelector(".mx_SeekBar")).toBeDefined();
         });
     });
 });

test/components/views/auth/RegistrationToken-test.tsx

@@ -17,9 +17,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { act } from "react-dom/test-utils";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
+import { fireEvent, render, RenderResult } from "@testing-library/react";
 
 import InteractiveAuthComponent from "../../../../src/components/structures/InteractiveAuth";
 import { flushPromises, getMockClientWithEventEmitter, unmockClientPeg } from "../../../test-utils";
@@ -34,7 +32,7 @@ describe("InteractiveAuthComponent", function () {
         makeRequest: jest.fn().mockResolvedValue(undefined),
         onAuthFinished: jest.fn(),
     };
-    const getComponent = (props = {}) => mount(<InteractiveAuthComponent {...defaultProps} {...props} />);
+    const getComponent = (props = {}) => render(<InteractiveAuthComponent {...defaultProps} {...props} />);
 
     beforeEach(function () {
         jest.clearAllMocks();
@@ -44,9 +42,10 @@ describe("InteractiveAuthComponent", function () {
         unmockClientPeg();
     });
 
-    const getSubmitButton = (wrapper: ReactWrapper) => wrapper.find('AccessibleButton[kind="primary"]').at(0);
-    const getRegistrationTokenInput = (wrapper: ReactWrapper) =>
-        wrapper.find('input[name="registrationTokenField"]').at(0);
+    const getSubmitButton = ({ container }: RenderResult) =>
+        container.querySelector(".mx_AccessibleButton_kind_primary");
+    const getRegistrationTokenInput = ({ container }: RenderResult) =>
+        container.querySelector('input[name="registrationTokenField"]');
 
     it("Should successfully complete a registration token flow", async () => {
         const onAuthFinished = jest.fn();
@@ -61,28 +60,25 @@ describe("InteractiveAuthComponent", function () {
 
         const registrationTokenNode = getRegistrationTokenInput(wrapper);
         const submitNode = getSubmitButton(wrapper);
-        const formNode = wrapper.find("form").at(0);
+        const formNode = wrapper.container.querySelector("form");
 
         expect(registrationTokenNode).toBeTruthy();
         expect(submitNode).toBeTruthy();
         expect(formNode).toBeTruthy();
 
         // submit should be disabled
-        expect(submitNode.props().disabled).toBe(true);
+        expect(submitNode).toHaveAttribute("disabled");
+        expect(submitNode).toHaveAttribute("aria-disabled", "true");
 
         // put something in the registration token box
-        act(() => {
-            registrationTokenNode.simulate("change", { target: { value: "s3kr3t" } });
-            wrapper.setProps({});
-        });
+        fireEvent.change(registrationTokenNode!, { target: { value: "s3kr3t" } });
 
-        expect(getRegistrationTokenInput(wrapper).props().value).toEqual("s3kr3t");
-        expect(getSubmitButton(wrapper).props().disabled).toBe(false);
+        expect(getRegistrationTokenInput(wrapper)).toHaveValue("s3kr3t");
+        expect(submitNode).not.toHaveAttribute("disabled");
+        expect(submitNode).not.toHaveAttribute("aria-disabled", "true");
 
         // hit enter; that should trigger a request
-        act(() => {
-            formNode.simulate("submit");
-        });
+        fireEvent.submit(formNode!);
 
         // wait for auth request to resolve
         await flushPromises();

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

@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-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 { MatrixClient, MatrixEvent, Room, RoomMember, getBeaconInfoIdentifier } from "matrix-js-sdk/src/matrix";
 import * as maplibregl from "maplibre-gl";
 import { mocked } from "jest-mock";

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

@@ -18,6 +18,7 @@ import React from "react";
 // eslint-disable-next-line deprecate/import
 import { mount, ReactWrapper } from "enzyme";
 import { mocked } from "jest-mock";
+// eslint-disable-next-line deprecate/import
 import { act } from "react-dom/test-utils";
 import { Room } from "matrix-js-sdk/src/matrix";