Convert DataLoader test to use React Testing Library

src/components/data-loader/DataLoader.test.tsx

@@ -0,0 +1,25 @@
+import { render, waitFor } from "@testing-library/react";
+import React from "react";
+import { MockAdminClient } from "../../stories/MockAdminClient";
+import { DataLoader } from "./DataLoader";
+
+describe("DataLoader", () => {
+  it("loads the data and renders the result", async () => {
+    const loader = () => Promise.resolve(["a", "b"]);
+    const { container } = render(
+      <MockAdminClient>
+        <DataLoader loader={loader}>
+          {(result) => (
+            <div>
+              {result.map((value) => (
+                <i key={value}>{value}</i>
+              ))}
+            </div>
+          )}
+        </DataLoader>
+      </MockAdminClient>
+    );
+
+    await waitFor(() => expect(container.textContent).toEqual("ab"));
+  });
+});

src/components/data-loader/__tests__/DataLoader.test.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import { DataLoader } from "../DataLoader";
-import { act } from "@testing-library/react";
-import { render, unmountComponentAtNode } from "react-dom";
-import { MockAdminClient } from "../../../stories/MockAdminClient";
-
-let container: HTMLDivElement;
-beforeEach(() => {
-  container = document.createElement("div");
-  document.body.appendChild(container);
-});
-
-afterEach(() => {
-  unmountComponentAtNode(container);
-  container.remove();
-});
-
-describe("<DataLoader />", () => {
-  it("render", async () => {
-    const loader = () => Promise.resolve(["a", "b"]);
-    await act(async () => {
-      render(
-        <MockAdminClient>
-          <DataLoader loader={loader}>
-            {(result) => (
-              <div>
-                {result.map((d, i) => (
-                  <i key={i}>{d}</i>
-                ))}
-              </div>
-            )}
-          </DataLoader>
-        </MockAdminClient>,
-        container
-      );
-    });
-    expect(container.textContent).toBe("ab");
-  });
-});