Migrate `ZoomButtons-test` to react-testing-library (#10104)

src/components/views/location/ZoomButtons.tsx

@@ -39,7 +39,7 @@ const ZoomButtons: React.FC<Props> = ({ map }) => {
         <div className="mx_ZoomButtons">
             <AccessibleButton
                 onClick={onZoomIn}
-                data-test-id="map-zoom-in-button"
+                data-testid="map-zoom-in-button"
                 title={_t("Zoom in")}
                 className="mx_ZoomButtons_button"
             >
@@ -47,7 +47,7 @@ const ZoomButtons: React.FC<Props> = ({ map }) => {
             </AccessibleButton>
             <AccessibleButton
                 onClick={onZoomOut}
-                data-test-id="map-zoom-out-button"
+                data-testid="map-zoom-out-button"
                 title={_t("Zoom out")}
                 className="mx_ZoomButtons_button"
             >

test/components/views/location/ZoomButtons-test.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 The Matrix.org Foundation C.I.C.
+Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,13 +15,10 @@ limitations under the License.
 */
 
 import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount } from "enzyme";
 import * as maplibregl from "maplibre-gl";
-import { act } from "react-dom/test-utils";
+import { render, screen } from "@testing-library/react";
 
 import ZoomButtons from "../../../../src/components/views/location/ZoomButtons";
-import { findByTestId } from "../../../test-utils";
 
 describe("<ZoomButtons />", () => {
     const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
@@ -29,7 +26,7 @@ describe("<ZoomButtons />", () => {
     const defaultProps = {
         map: mockMap,
     };
-    const getComponent = (props = {}) => mount(<ZoomButtons {...defaultProps} {...props} />);
+    const getComponent = (props = {}) => render(<ZoomButtons {...defaultProps} {...props} />);
 
     beforeEach(() => {
         jest.clearAllMocks();
@@ -37,15 +34,12 @@ describe("<ZoomButtons />", () => {
 
     it("renders buttons", () => {
         const component = getComponent();
-        expect(component).toMatchSnapshot();
+        expect(component.asFragment()).toMatchSnapshot();
     });
 
     it("calls map zoom in on zoom in click", () => {
         const component = getComponent();
-
+        screen.getByTestId("map-zoom-in-button").click();
-        act(() => {
-            findByTestId(component, "map-zoom-in-button").at(0).simulate("click");
-        });
 
         expect(mockMap.zoomIn).toHaveBeenCalled();
         expect(component).toBeTruthy();
@@ -53,10 +47,7 @@ describe("<ZoomButtons />", () => {
 
     it("calls map zoom out on zoom out click", () => {
         const component = getComponent();
-
+        screen.getByTestId("map-zoom-out-button").click();
-        act(() => {
-            findByTestId(component, "map-zoom-out-button").at(0).simulate("click");
-        });
 
         expect(mockMap.zoomOut).toHaveBeenCalled();
         expect(component).toBeTruthy();

test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap

@@ -135,7 +135,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
       >
         <AccessibleButton
           className="mx_ZoomButtons_button"
-          data-test-id="map-zoom-in-button"
+          data-testid="map-zoom-in-button"
           element="div"
           onClick={[Function]}
           role="button"
@@ -144,7 +144,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
         >
           <div
             className="mx_AccessibleButton mx_ZoomButtons_button"
-            data-test-id="map-zoom-in-button"
+            data-testid="map-zoom-in-button"
             onClick={[Function]}
             onKeyDown={[Function]}
             onKeyUp={[Function]}
@@ -159,7 +159,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
         </AccessibleButton>
         <AccessibleButton
           className="mx_ZoomButtons_button"
-          data-test-id="map-zoom-out-button"
+          data-testid="map-zoom-out-button"
           element="div"
           onClick={[Function]}
           role="button"
@@ -168,7 +168,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
         >
           <div
             className="mx_AccessibleButton mx_ZoomButtons_button"
-            data-test-id="map-zoom-out-button"
+            data-testid="map-zoom-out-button"
             onClick={[Function]}
             onKeyDown={[Function]}
             onKeyUp={[Function]}

test/components/views/location/__snapshots__/ZoomButtons-test.tsx.snap

@@ -1,74 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ZoomButtons /> renders buttons 1`] = `
-<ZoomButtons
+<DocumentFragment>
-  map={
-    MockMap {
-      "_events": {},
-      "_eventsCount": 0,
-      "_maxListeners": undefined,
-      "addControl": [MockFunction],
-      "fitBounds": [MockFunction],
-      "removeControl": [MockFunction],
-      "setCenter": [MockFunction],
-      "setStyle": [MockFunction],
-      "zoomIn": [MockFunction],
-      "zoomOut": [MockFunction],
-      Symbol(kCapture): false,
-    }
-  }
->
   <div
-    className="mx_ZoomButtons"
+    class="mx_ZoomButtons"
   >
-    <AccessibleButton
+    <div
-      className="mx_ZoomButtons_button"
+      class="mx_AccessibleButton mx_ZoomButtons_button"
-      data-test-id="map-zoom-in-button"
+      data-testid="map-zoom-in-button"
-      element="div"
-      onClick={[Function]}
       role="button"
-      tabIndex={0}
+      tabindex="0"
       title="Zoom in"
     >
       <div
-        className="mx_AccessibleButton mx_ZoomButtons_button"
+        class="mx_ZoomButtons_icon"
-        data-test-id="map-zoom-in-button"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        role="button"
-        tabIndex={0}
-        title="Zoom in"
-      >
-        <div
-          className="mx_ZoomButtons_icon"
       />
     </div>
-    </AccessibleButton>
+    <div
-    <AccessibleButton
+      class="mx_AccessibleButton mx_ZoomButtons_button"
-      className="mx_ZoomButtons_button"
+      data-testid="map-zoom-out-button"
-      data-test-id="map-zoom-out-button"
-      element="div"
-      onClick={[Function]}
       role="button"
-      tabIndex={0}
+      tabindex="0"
       title="Zoom out"
     >
       <div
-        className="mx_AccessibleButton mx_ZoomButtons_button"
+        class="mx_ZoomButtons_icon"
-        data-test-id="map-zoom-out-button"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        role="button"
-        tabIndex={0}
-        title="Zoom out"
-      >
-        <div
-          className="mx_ZoomButtons_icon"
       />
     </div>
-    </AccessibleButton>
   </div>
-</ZoomButtons>
+</DocumentFragment>
 `;