Replace react-dom tests with react testing-library tests (#10260)

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

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { act, renderIntoDocument, Simulate } from "react-dom/test-utils";
+import { fireEvent, render } from "@testing-library/react";
 
 import { Alignment } from "../../../../src/components/views/elements/Tooltip";
 import TooltipTarget from "../../../../src/components/views/elements/TooltipTarget";
@@ -28,27 +28,19 @@ describe("<TooltipTarget />", () => {
         "label": "test label",
         "alignment": Alignment.Left,
         "id": "test id",
-        "data-test-id": "test",
+        "data-testid": "test",
     };
 
-    afterEach(() => {
-        // clean up renderer tooltips
-        const wrapper = document.querySelector(".mx_Tooltip_wrapper");
-        while (wrapper?.firstChild) {
-            wrapper.removeChild(wrapper.lastChild!);
-        }
-    });
-
     const getComponent = (props = {}) => {
-        const wrapper = renderIntoDocument<HTMLSpanElement>(
+        const wrapper = render(
             // wrap in element so renderIntoDocument can render functional component
             <span>
                 <TooltipTarget {...defaultProps} {...props}>
                     <span>child</span>
                 </TooltipTarget>
             </span>,
-        ) as HTMLSpanElement;
-        return wrapper.querySelector("[data-test-id=test]");
+        );
+        return wrapper.getByTestId("test");
     };
 
     const getVisibleTooltip = () => document.querySelector(".mx_Tooltip.mx_Tooltip_visible");
@@ -62,41 +54,29 @@ describe("<TooltipTarget />", () => {
     const alignmentKeys = Object.keys(Alignment).filter((o: any) => isNaN(o));
     it.each(alignmentKeys)("displays %s aligned tooltip on mouseover", async (alignment: any) => {
         const wrapper = getComponent({ alignment: Alignment[alignment] })!;
-        act(() => {
-            Simulate.mouseOver(wrapper);
-        });
+        fireEvent.mouseOver(wrapper);
         expect(getVisibleTooltip()).toMatchSnapshot();
     });
 
     it("hides tooltip on mouseleave", () => {
         const wrapper = getComponent()!;
-        act(() => {
-            Simulate.mouseOver(wrapper);
-        });
+        fireEvent.mouseOver(wrapper);
         expect(getVisibleTooltip()).toBeTruthy();
-        act(() => {
-            Simulate.mouseLeave(wrapper);
-        });
+        fireEvent.mouseLeave(wrapper);
         expect(getVisibleTooltip()).toBeFalsy();
     });
 
     it("displays tooltip on focus", () => {
         const wrapper = getComponent()!;
-        act(() => {
-            Simulate.focus(wrapper);
-        });
+        fireEvent.focus(wrapper);
         expect(getVisibleTooltip()).toBeTruthy();
     });
 
     it("hides tooltip on blur", async () => {
         const wrapper = getComponent()!;
-        act(() => {
-            Simulate.focus(wrapper);
-        });
+        fireEvent.focus(wrapper);
         expect(getVisibleTooltip()).toBeTruthy();
-        act(() => {
-            Simulate.blur(wrapper);
-        });
+        fireEvent.blur(wrapper);
         expect(getVisibleTooltip()).toBeFalsy();
     });
 });

test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap

@@ -95,7 +95,7 @@ exports[`<TooltipTarget /> renders container 1`] = `
 <div
   aria-describedby="test id"
   class="test tooltipTargetClassName"
-  data-test-id="test"
+  data-testid="test"
   tabindex="0"
 >
   <span>