Update usages of test utilities preferring RTL (#10203)

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

@@ -12,8 +12,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { render } from "@testing-library/react";
 import React from "react";
-import { renderIntoDocument } from "react-dom/test-utils";
 
 import ExternalLink from "../../../../src/components/views/elements/ExternalLink";
 
@@ -22,15 +22,10 @@ describe("<ExternalLink />", () => {
         "href": "test.com",
         "onClick": jest.fn(),
         "className": "myCustomClass",
-        "data-test-id": "test",
+        "data-testid": "test",
     };
     const getComponent = (props = {}) => {
-        const wrapper = renderIntoDocument<HTMLDivElement>(
-            <div>
-                <ExternalLink {...defaultProps} {...props} />
-            </div>,
-        ) as HTMLDivElement;
-        return wrapper.children[0];
+        return render(<ExternalLink {...defaultProps} {...props} />);
     };
 
     it("renders link correctly", () => {
@@ -39,18 +34,19 @@ describe("<ExternalLink />", () => {
                 react element <b>children</b>
             </span>
         );
-        expect(getComponent({ children, target: "_self", rel: "noopener" })).toMatchSnapshot();
+        expect(getComponent({ children, target: "_self", rel: "noopener" }).asFragment()).toMatchSnapshot();
     });
 
     it("defaults target and rel", () => {
         const children = "test";
-        const component = getComponent({ children });
-        expect(component.getAttribute("rel")).toEqual("noreferrer noopener");
-        expect(component.getAttribute("target")).toEqual("_blank");
+        const { getByTestId } = getComponent({ children });
+        const container = getByTestId("test");
+        expect(container.getAttribute("rel")).toEqual("noreferrer noopener");
+        expect(container.getAttribute("target")).toEqual("_blank");
     });
 
     it("renders plain text link correctly", () => {
         const children = "test";
-        expect(getComponent({ children })).toMatchSnapshot();
+        expect(getComponent({ children }).asFragment()).toMatchSnapshot();
     });
 });

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

@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { renderIntoDocument, Simulate } from "react-dom/test-utils";
-import { act } from "react-dom/test-utils";
+import { act, renderIntoDocument, Simulate } from "react-dom/test-utils";
 
 import { Alignment } from "../../../../src/components/views/elements/Tooltip";
 import TooltipTarget from "../../../../src/components/views/elements/TooltipTarget";

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

@@ -1,36 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ExternalLink /> renders link correctly 1`] = `
-<a
-  class="mx_ExternalLink myCustomClass"
-  data-test-id="test"
-  href="test.com"
-  rel="noopener"
-  target="_self"
->
-  <span>
-    react element 
-    <b>
-      children
-    </b>
-  </span>
-  <i
-    class="mx_ExternalLink_icon"
-  />
-</a>
+<DocumentFragment>
+  <a
+    class="mx_ExternalLink myCustomClass"
+    data-testid="test"
+    href="test.com"
+    rel="noopener"
+    target="_self"
+  >
+    <span>
+      react element 
+      <b>
+        children
+      </b>
+    </span>
+    <i
+      class="mx_ExternalLink_icon"
+    />
+  </a>
+</DocumentFragment>
 `;
 
 exports[`<ExternalLink /> renders plain text link correctly 1`] = `
-<a
-  class="mx_ExternalLink myCustomClass"
-  data-test-id="test"
-  href="test.com"
-  rel="noreferrer noopener"
-  target="_blank"
->
-  test
-  <i
-    class="mx_ExternalLink_icon"
-  />
-</a>
+<DocumentFragment>
+  <a
+    class="mx_ExternalLink myCustomClass"
+    data-testid="test"
+    href="test.com"
+    rel="noreferrer noopener"
+    target="_blank"
+  >
+    test
+    <i
+      class="mx_ExternalLink_icon"
+    />
+  </a>
+</DocumentFragment>
 `;