Fix act warnings

element-hq · Nov 20, 2024 · b504449 · b504449
1 parent 7fadc86
commit b504449
Showing 1 changed file with 24 additions and 36 deletions.
diff --git a/src/components/Dropdown/Dropdown.test.tsx b/src/components/Dropdown/Dropdown.test.tsx
@@ -17,10 +17,10 @@ limitations under the License.
 import { describe, expect, it } from "vitest";
 import { composeStories } from "@storybook/react";
 import * as stories from "./Dropdown.stories";
-import { act, render, screen, waitFor } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import React, { FC, useMemo, useState } from "react";
-import { userEvent } from "@storybook/test";
 import { Dropdown } from "./Dropdown";
+import userEvent from "@testing-library/user-event";
 
 const { Default, WithHelpLabel, WithError, WithDefaultValue } =
   composeStories(stories);
@@ -63,62 +63,52 @@ describe("Dropdown", () => {
     expect(container).toMatchSnapshot();
   });
   it("can be opened", async () => {
+    const user = userEvent.setup();
     const { getByRole, container } = render(<Default />);
-    await act(async () => {
-      await userEvent.click(getByRole("combobox"));
-    });
+    await user.click(getByRole("combobox"));
     expect(container).toMatchSnapshot();
   });
   it("can select a value", async () => {
+    const user = userEvent.setup();
     const { getByRole, container } = render(<Default />);
-    await act(async () => {
-      await userEvent.click(getByRole("combobox"));
-    });
+    await user.click(getByRole("combobox"));
 
-    await waitFor(() =>
-      expect(getByRole("option", { name: "Option 2" })).toBeVisible(),
-    );
+    expect(getByRole("option", { name: "Option 2" })).toBeVisible();
 
-    await act(async () => {
-      await userEvent.click(getByRole("option", { name: "Option 2" }));
-    });
+    await user.click(getByRole("option", { name: "Option 2" }));
 
     expect(getByRole("combobox")).toHaveTextContent("Option 2");
 
-    await act(async () => {
-      await userEvent.click(getByRole("combobox"));
-    });
+    await user.click(getByRole("combobox"));
 
-    await waitFor(() =>
-      expect(getByRole("option", { name: "Option 2" })).toHaveAttribute(
-        "aria-selected",
-        "true",
-      ),
+    expect(getByRole("option", { name: "Option 2" })).toHaveAttribute(
+      "aria-selected",
+      "true",
     );
 
     // Option 2 should be selected
     expect(container).toMatchSnapshot();
   });
   it("can use keyboard shortcuts", async () => {
+    const user = userEvent.setup();
     const { getByRole } = render(<Default />);
 
-    await act(async () => userEvent.type(getByRole("combobox"), "{arrowdown}"));
-    await waitFor(() =>
-      expect(getByRole("combobox")).toHaveAttribute("aria-expanded", "true"),
-    );
+    // arrowdown seems to already select Option 1... in real browsers this
+    // doesn't happen. Maybe it's a user-event thing? arrowup just opens the
+    // dropdown as we would expect.
+    await user.type(getByRole("combobox"), "{arrowup}");
+    expect(getByRole("combobox")).toHaveAttribute("aria-expanded", "true");
 
-    await act(async () => userEvent.keyboard("{arrowdown}"));
+    await user.keyboard("{arrowdown}");
     expect(getByRole("option", { name: "Option 1" })).toHaveFocus();
 
-    await act(async () => userEvent.keyboard("{End}"));
+    await user.keyboard("{End}");
     expect(getByRole("option", { name: "Option 3" })).toHaveFocus();
 
-    await act(async () => userEvent.keyboard("{Enter}"));
+    await user.keyboard("{Enter}");
 
-    await waitFor(() => {
-      expect(getByRole("combobox")).toHaveTextContent("Option 3");
-      expect(getByRole("combobox")).toHaveAttribute("aria-expanded", "false");
-    });
+    expect(getByRole("combobox")).toHaveTextContent("Option 3");
+    expect(getByRole("combobox")).toHaveAttribute("aria-expanded", "false");
   });
   it("supports controlled operation", async () => {
     const user = userEvent.setup();
@@ -128,9 +118,7 @@ describe("Dropdown", () => {
       "aria-selected",
       "true",
     );
-    await act(() =>
-      user.click(screen.getByRole("option", { name: "Option 2" })),
-    );
+    await user.click(screen.getByRole("option", { name: "Option 2" }));
     expect(screen.getByRole("option", { name: "Option 2" })).toHaveAttribute(
       "aria-selected",
       "true",