Kill off enzyme in preference of react testing library (matrix-org#10255)

Author: t3chguy

package.json

@@ -151,7 +151,6 @@
         "@types/counterpart": "^0.18.1",
         "@types/css-font-loading-module": "^0.0.7",
         "@types/diff-match-patch": "^1.0.32",
-        "@types/enzyme": "^3.10.9",
         "@types/escape-html": "^1.0.1",
         "@types/file-saver": "^2.0.3",
         "@types/flux": "^3.1.9",
@@ -177,7 +176,6 @@
         "@types/zxcvbn": "^4.4.0",
         "@typescript-eslint/eslint-plugin": "^5.35.1",
         "@typescript-eslint/parser": "^5.6.0",
-        "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
         "allchange": "^1.1.0",
         "axe-core": "4.4.3",
         "babel-jest": "^29.0.0",
@@ -187,8 +185,6 @@
         "cypress-axe": "^1.0.0",
         "cypress-multi-reporters": "^1.6.1",
         "cypress-real-events": "^1.7.1",
-        "enzyme": "^3.11.0",
-        "enzyme-to-json": "^3.6.2",
         "eslint": "8.28.0",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^8.5.0",
@@ -224,9 +220,6 @@
         "walk": "^2.3.14"
     },
     "jest": {
-        "snapshotSerializers": [
-            "enzyme-to-json/serializer"
-        ],
         "testEnvironment": "jsdom",
         "testMatch": [
             "<rootDir>/test/**/*-test.[jt]s?(x)"

src/components/views/emojipicker/EmojiPicker.tsx

@@ -186,7 +186,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
     private onChangeFilter = (filter: string): void => {
         const lcFilter = filter.toLowerCase().trim(); // filter is case insensitive
         for (const cat of this.categories) {
-            let emojis;
+            let emojis: IEmoji[];
             // If the new filter string includes the old filter string, we don't have to re-filter the whole dataset.
             if (lcFilter.includes(this.state.filter)) {
                 emojis = this.memoizedDataByCategory[cat.id];

src/components/views/messages/MLocationBody.tsx

@@ -43,6 +43,8 @@ interface IState {
 export default class MLocationBody extends React.Component<IBodyProps, IState> {
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
+
+    private unmounted = false;
     private mapId: string;
     private reconnectedListener: ClientEventHandlerMap[ClientEvent.Sync];
 
@@ -80,11 +82,15 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
     };
 
     private onError = (error: Error): void => {
+        if (this.unmounted) return;
         this.setState({ error });
+        // Unregister first in case we already had it registered
+        this.context.off(ClientEvent.Sync, this.reconnectedListener);
         this.context.on(ClientEvent.Sync, this.reconnectedListener);
     };
 
     public componentWillUnmount(): void {
+        this.unmounted = true;
         this.context.off(ClientEvent.Sync, this.reconnectedListener);
     }
 

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

@@ -15,14 +15,11 @@ limitations under the License.
 */
 
 import React, { ComponentProps } from "react";
-// eslint-disable-next-line deprecate/import
-import { mount } from "enzyme";
+import { fireEvent, render } from "@testing-library/react";
 import { LocationAssetType } from "matrix-js-sdk/src/@types/location";
 import { ClientEvent, RoomMember } from "matrix-js-sdk/src/matrix";
 import * as maplibregl from "maplibre-gl";
 import { logger } from "matrix-js-sdk/src/logger";
-// eslint-disable-next-line deprecate/import
-import { act } from "react-dom/test-utils";
 import { SyncState } from "matrix-js-sdk/src/sync";
 
 import MLocationBody from "../../../../src/components/views/messages/MLocationBody";
@@ -35,6 +32,13 @@ import { TILE_SERVER_WK_KEY } from "../../../../src/utils/WellKnownUtils";
 import { makeLocationEvent } from "../../../test-utils/location";
 import { getMockClientWithEventEmitter } from "../../../test-utils";
 
+// Fake random strings to give a predictable snapshot
+jest.mock("matrix-js-sdk/src/randomstring", () => {
+    return {
+        randomString: () => "abdefghi",
+    };
+});
+
 describe("MLocationBody", () => {
     const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
     describe("<MLocationBody>", () => {
@@ -57,10 +61,11 @@ describe("MLocationBody", () => {
             mediaEventHelper: {} as MediaEventHelper,
         };
         const getComponent = (props = {}) =>
-            mount(<MLocationBody {...defaultProps} {...props} />, {
-                wrappingComponent: MatrixClientContext.Provider,
-                wrappingComponentProps: { value: mockClient },
-            });
+            render(
+                <MatrixClientContext.Provider value={mockClient}>
+                    <MLocationBody {...defaultProps} {...props} />
+                </MatrixClientContext.Provider>,
+            );
         const getMapErrorComponent = () => {
             const mockMap = new maplibregl.Map(mapOptions);
             mockClient.getClientWellKnown.mockReturnValue({
@@ -96,20 +101,19 @@ describe("MLocationBody", () => {
 
             it("displays correct fallback content without error style when map_style_url is not configured", () => {
                 const component = getComponent();
-                expect(component.find(".mx_EventTile_body")).toMatchSnapshot();
+                expect(component.container.querySelector(".mx_EventTile_body")).toMatchSnapshot();
             });
 
             it("displays correct fallback content when map_style_url is misconfigured", () => {
                 const component = getMapErrorComponent();
-                component.setProps({});
-                expect(component.find(".mx_EventTile_body")).toMatchSnapshot();
+                expect(component.container.querySelector(".mx_EventTile_body")).toMatchSnapshot();
             });
 
             it("should clear the error on reconnect", () => {
                 const component = getMapErrorComponent();
-                expect((component.state() as React.ComponentState).error).toBeDefined();
+                expect(component.container.querySelector(".mx_EventTile_tileError")).toBeDefined();
                 mockClient.emit(ClientEvent.Sync, SyncState.Reconnecting, SyncState.Error);
-                expect((component.state() as React.ComponentState).error).toBeUndefined();
+                expect(component.container.querySelector(".mx_EventTile_tileError")).toBeFalsy();
             });
         });
 
@@ -132,40 +136,25 @@ describe("MLocationBody", () => {
                 const mockMap = new maplibregl.Map(mapOptions);
                 const component = getComponent();
 
-                expect(component).toMatchSnapshot();
+                expect(component.asFragment()).toMatchSnapshot();
                 // map was centered
                 expect(mockMap.setCenter).toHaveBeenCalledWith({
                     lat: 51.5076,
                     lon: -0.1276,
                 });
             });
 
-            it("opens map dialog on click", () => {
+            it("opens map dialog on click", async () => {
                 const modalSpy = jest
                     .spyOn(Modal, "createDialog")
                     .mockReturnValue({ finished: new Promise(() => {}), close: jest.fn() });
                 const component = getComponent();
 
-                act(() => {
-                    component.find("Map").at(0).simulate("click");
-                });
+                await fireEvent.click(component.container.querySelector(".mx_Map")!);
 
                 expect(modalSpy).toHaveBeenCalled();
             });
 
-            it("renders marker correctly for a non-self share", () => {
-                const mockMap = new maplibregl.Map(mapOptions);
-                const component = getComponent();
-
-                expect(component.find("SmartMarker").at(0).props()).toEqual(
-                    expect.objectContaining({
-                        map: mockMap,
-                        geoUri: "geo:51.5076,-0.1276",
-                        roomMember: undefined,
-                    }),
-                );
-            });
-
             it("renders marker correctly for a self share", () => {
                 const selfShareEvent = makeLocationEvent("geo:51.5076,-0.1276", LocationAssetType.Self);
                 const member = new RoomMember(roomId, userId);
@@ -174,7 +163,7 @@ describe("MLocationBody", () => {
                 const component = getComponent({ mxEvent: selfShareEvent });
 
                 // render self locations with user avatars
-                expect(component.find("SmartMarker").at(0).prop("roomMember")).toEqual(member);
+                expect(component.asFragment()).toMatchSnapshot();
             });
         });
     });