test: remove act wrappers for user event actions

.github/contribution/testing-conventions.md

@@ -16,15 +16,15 @@ import Button from "../";
 describe("Button", () => {
   const user = userEvent.setup();
 
-  it("should be accessible", () => {
+  it("should be accessible", async () => {
     render(<Button>Click me</Button>);
     expect(screen.getByRole("button", { name: "Click me" })).toBeInTheDocument();
   });
   it("should trigger the click handler", () => {
     const onClick = jest.fn();
     render(<Button onClick={onClick}>Click me</Button>);
 
-    act(() => user.click(screen.getByRole("button", { name: "Click me" })));
+    await user.click(screen.getByRole("button", { name: "Click me" }));
     expect(onClick).toHaveBeenCalled();
   });
   describe("when disabled", () => {
@@ -36,7 +36,7 @@ describe("Button", () => {
         </Button>,
       );
 
-      act(() => user.click(screen.getByRole("button", { name: "Click me" })));
+      await user.click(screen.getByRole("button", { name: "Click me" }));
       expect(onClick).not.toHaveBeenCalled();
     });
   });
@@ -58,7 +58,7 @@ import userEvent from "@testing-library/user-event";
 
 import Button from "../";
 
-describe("Button", () => {
+describe("Button", async () => {
   const user = userEvent.setup();
 
   it("default", () => {
@@ -70,7 +70,7 @@ describe("Button", () => {
     );
 
     const button = screen.getByRole("button");
-    act(() => user.click(button));
+    await user.click(button);
     expect(button).toHaveTextContent("Click me"); // you can just repeat it
     expect(onClick).toHaveBeenCalled();
   });

docs/src/components/ComponentStructure/__tests__/index.test.tsx

@@ -57,7 +57,7 @@ describe("ComponentStructure", () => {
       />,
     );
 
-    await act(() => user.click(screen.getByRole("tab", { name: "iOS" })));
+    await user.click(screen.getByRole("tab", { name: "iOS" }));
     screen.getByText(/iOSOne/);
   });
 
@@ -75,7 +75,7 @@ describe("ComponentStructure", () => {
     const tabIOS = screen.getByRole("tab", { name: "iOS" });
     const tabAndroid = screen.getByRole("tab", { name: "Android" });
 
-    await act(() => user.tab());
+    await user.tab();
     expect(tabWeb).toHaveFocus();
 
     await act(async () => {

packages/orbit-components/src/Card/__tests__/index.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import userEvent from "@testing-library/user-event";
 
-import { render, screen, act } from "../../test-utils";
+import { render, screen } from "../../test-utils";
 import Card, { CardSection } from "..";
 import Button from "../../Button";
 
@@ -103,7 +103,7 @@ describe("Card", () => {
       );
       const content = document.querySelector("[aria-hidden]");
       expect(content).toHaveAttribute("aria-hidden", "true");
-      await act(() => user.click(screen.getByText("kek")));
+      await user.click(screen.getByText("kek"));
       expect(content).toHaveAttribute("aria-hidden", "false");
     });
   });

packages/orbit-components/src/Collapse/__tests__/index.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import userEvent from "@testing-library/user-event";
 
-import { render, screen, act } from "../../test-utils";
+import { render, screen } from "../../test-utils";
 import Collapse from "..";
 
 const toggleButtons = [
@@ -39,25 +39,29 @@ describe("Collapse", () => {
       </Collapse>,
     );
     const toggleButton = screen.getAllByRole("button", { name: "Collapse" })[buttonIndex];
-    await act(() => user.click(toggleButton));
+    await user.click(toggleButton);
     expect(onClick).toHaveBeenCalled();
   });
 
   describe("uncontrolled", () => {
-    it.each(toggleButtons)("should expand/collapse when clicking on %s", async buttonIndex => {
-      render(
-        <Collapse label="Collapse">
-          <article>children</article>
-        </Collapse>,
-      );
-      const toggleButton = screen.getAllByRole("button", { name: "Collapse" })[buttonIndex];
-      // with ByRole we can test whether the content is visible because of aria-hidden
-      expect(screen.queryByRole("article")).not.toBeInTheDocument();
-      await act(() => user.click(toggleButton));
-      expect(screen.getByRole("article")).toBeInTheDocument();
-      await act(() => user.click(toggleButton));
-      expect(screen.queryByRole("article")).not.toBeInTheDocument();
-    });
+    it.each(toggleButtons)(
+      "should expand/collapse when clicking on %s",
+      async buttonIndex => {
+        render(
+          <Collapse label="Collapse">
+            <article>children</article>
+          </Collapse>,
+        );
+        const toggleButton = screen.getAllByRole("button", { name: "Collapse" })[buttonIndex];
+        // with ByRole we can test whether the content is visible because of aria-hidden
+        expect(screen.queryByRole("article")).not.toBeInTheDocument();
+        await user.click(toggleButton);
+        expect(screen.getByRole("article")).toBeInTheDocument();
+        await user.click(toggleButton);
+        expect(screen.queryByRole("article")).not.toBeInTheDocument();
+      },
+      10000,
+    );
   });
 
   describe("controlled", () => {

packages/orbit-components/src/ErrorFormTooltip/__tests__/index.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import userEvent from "@testing-library/user-event";
 
-import { render, screen, act } from "../../test-utils";
+import { render, screen } from "../../test-utils";
 import ErrorFormTooltip from "..";
 
 describe("ErrorFormTooltip", () => {
@@ -15,7 +15,7 @@ describe("ErrorFormTooltip", () => {
 
     expect(screen.getByTestId("test")).toBeInTheDocument();
     expect(screen.getByText("error")).toBeInTheDocument();
-    await act(() => user.click(container));
+    await user.click(container);
     expect(onShown).toHaveBeenCalled();
   });
 
@@ -26,7 +26,7 @@ describe("ErrorFormTooltip", () => {
     expect(screen.getByTestId("test")).toBeInTheDocument();
     expect(screen.getByText("help")).toBeInTheDocument();
 
-    await act(() => user.click(screen.getByLabelText("close")));
+    await user.click(screen.getByLabelText("close"));
     expect(onShown).toHaveBeenCalled();
   });
 });

packages/orbit-components/src/InputField/__tests__/index.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import userEvent from "@testing-library/user-event";
 
-import { render, screen, act } from "../../test-utils";
+import { render, screen } from "../../test-utils";
 import InputField from "..";
 import ButtonLink from "../../ButtonLink";
 import TextLink from "../../TextLink";
@@ -64,7 +64,7 @@ describe("InputField", () => {
     expect(screen.getByTestId("test")).toBeInTheDocument();
     expect(screen.getByTestId("prefix")).toBeInTheDocument();
     expect(screen.getByTestId("suffix")).toBeInTheDocument();
-    await act(() => user.tab());
+    await user.tab();
     expect(screen.getByTestId("help")).toBeInTheDocument();
     expect(container.firstChild).toHaveStyle({ marginBottom: defaultTheme.orbit.spaceSmall });
   });
@@ -142,7 +142,7 @@ describe("InputField", () => {
       expect(input).toHaveAttribute("data-state", "error");
       expect(input).toBeInvalid();
 
-      await act(() => user.tab());
+      await user.tab();
       expect(screen.queryByTestId("help")).not.toBeInTheDocument();
       expect(screen.getByTestId("error")).toBeInTheDocument();
     });
@@ -158,23 +158,23 @@ describe("InputField", () => {
       );
 
       expect(screen.queryByText("First")).not.toBeInTheDocument();
-      await act(() => user.tab());
+      await user.tab();
       expect(screen.getByText("First")).toBeVisible();
-      await act(() => user.tab());
+      await user.tab();
       expect(screen.queryByText("First")).not.toBeInTheDocument();
       expect(screen.getByText("Second")).toBeVisible();
     });
 
     it("should close tooltip when tabbing away from its content", async () => {
       render(<InputField error={<a href="/">Second</a>} />);
 
-      await act(() => user.tab());
+      await user.tab();
       expect(screen.getByText("Second")).toBeVisible();
 
       screen.getByRole("link").focus();
       expect(screen.getByRole("link")).toHaveFocus();
 
-      await act(() => user.tab());
+      await user.tab();
       expect(screen.queryByText("Second")).not.toBeInTheDocument();
     });
   });

packages/orbit-components/src/InputFile/__tests__/index.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import userEvent, { PointerEventsCheckLevel } from "@testing-library/user-event";
 
-import { render, screen, act } from "../../test-utils";
+import { render, screen } from "../../test-utils";
 import InputFile from "..";
 import SPACINGS_AFTER from "../../common/getSpacingToken/consts";
 
@@ -92,12 +92,12 @@ describe("InputFile", () => {
       />,
     );
 
-    await act(() => user.tab());
+    await user.tab();
     expect(onFocus).toHaveBeenCalled();
 
     expect(screen.getByText("chuck norris counted to infinity twice")).toBeInTheDocument();
 
-    await act(() => user.tab());
+    await user.tab();
     expect(onBlur).toHaveBeenCalled();
   });
 });

packages/orbit-components/src/InputGroup/__tests__/index.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import userEvent from "@testing-library/user-event";
 
-import { render, screen, act } from "../../test-utils";
+import { render, screen } from "../../test-utils";
 import InputGroup from "..";
 import InputField from "../../InputField";
 import defaultTheme from "../../defaultTheme";
@@ -40,7 +40,7 @@ describe("InputGroup", () => {
       </InputGroup>,
     );
 
-    await act(() => user.tab());
+    await user.tab();
     expect(screen.getByText("help message")).toBeInTheDocument();
   });
   it("should render error message", async () => {
@@ -50,7 +50,7 @@ describe("InputGroup", () => {
       </InputGroup>,
     );
 
-    await act(() => user.tab());
+    await user.tab();
     expect(screen.getByText("error message")).toBeInTheDocument();
   });
 
@@ -64,10 +64,10 @@ describe("InputGroup", () => {
       </InputGroup>,
     );
     const input = screen.getByRole("textbox");
-    await act(() => user.type(input, "text"));
+    await user.type(input, "text");
     expect(onChange).toHaveBeenCalled();
     expect(onFocus).toHaveBeenCalled();
-    await act(() => user.tab());
+    await user.tab();
     expect(onBlur).toHaveBeenCalled();
   });
   it("should be able to disable children", () => {

packages/orbit-components/src/InputSelect/__tests__/index.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import userEvent from "@testing-library/user-event";
 
-import { render, screen, fireEvent, act } from "../../test-utils";
+import { render, screen, fireEvent } from "../../test-utils";
 import InputSelect from "..";
 
 const jetLiOption = {
@@ -63,7 +63,7 @@ describe("InputSelect", () => {
       />,
     );
 
-    await act(() => user.tab());
+    await user.tab();
 
     const input = screen.getByRole("combobox");
     const dropdown = screen.getByRole("listbox");
@@ -87,15 +87,15 @@ describe("InputSelect", () => {
     expect(input).toHaveAttribute("id", id);
 
     // clear current value
-    await act(() => user.clear(input));
+    await user.clear(input);
 
     // test empty message
-    await act(() => user.type(input, "Arnold"));
+    await user.type(input, "Arnold");
     expect(screen.getByText(emptyMessage)).toBeInTheDocument();
 
     // test dropdown result filtering
-    await act(() => user.clear(input));
-    await act(() => user.type(input, "J"));
+    await user.clear(input);
+    await user.type(input, "J");
     expect(onChange).toHaveBeenCalled();
 
     expect(screen.getAllByRole("option")).toHaveLength(2);
@@ -108,7 +108,7 @@ describe("InputSelect", () => {
     expect(onKeyDown).toHaveBeenCalled();
 
     // should select by click
-    await act(() => user.click(screen.getByText("Jet Li")));
+    await user.click(screen.getByText("Jet Li"));
 
     expect(onOptionSelect).toHaveBeenCalledWith(jetLiOption);
 
@@ -125,8 +125,8 @@ describe("InputSelect", () => {
     expect(onClose).toHaveBeenCalledWith(jetLiOption);
 
     // test clear of the input by button and reset of filtered options
-    await act(() => user.tab());
-    await act(() => user.click(screen.getByLabelText("Clear")));
+    await user.tab();
+    await user.click(screen.getByLabelText("Clear"));
     expect(onOptionSelect).toBeCalledWith(null);
     expect(screen.getByRole("textbox")).toHaveValue("");
     expect(screen.getAllByRole("option")).toHaveLength(totalOptions);
@@ -148,7 +148,7 @@ describe("InputSelect", () => {
       />,
     );
 
-    await act(() => user.tab());
+    await user.tab();
 
     const input = screen.getByRole("combobox");
 
@@ -159,7 +159,7 @@ describe("InputSelect", () => {
     expect(onClose).toHaveBeenCalledWith(jetLiOption);
 
     // Simulate changing the input without selecting anything to assert the previous selected option remains selected
-    await act(() => user.type(input, "Random unexisting option"));
+    await user.type(input, "Random unexisting option");
     fireEvent.keyDown(input, { key: "Escape" });
     expect(onClose).toHaveBeenLastCalledWith(jetLiOption);
     expect(onOptionSelect).not.toHaveBeenCalled();
@@ -182,11 +182,11 @@ describe("InputSelect", () => {
       />,
     );
 
-    await act(() => user.tab());
+    await user.tab();
 
     const input = screen.getByRole("combobox");
 
-    user.clear(input);
+    await user.clear(input);
     fireEvent.keyDown(input, { key: "Escape" });
     expect(onClose).toHaveBeenCalledWith(null);
     expect(onOptionSelect).toHaveBeenCalledWith(null);
@@ -206,7 +206,7 @@ describe("InputSelect", () => {
       />,
     );
 
-    await act(() => user.tab());
+    await user.tab();
 
     expect(screen.queryByText("Previously selected")).not.toBeInTheDocument();
     expect(screen.queryByText(prevSelectedLabel)).toBeInTheDocument();
@@ -217,7 +217,7 @@ describe("InputSelect", () => {
     it("should not render repeated options", async () => {
       const showAllLabel = "Those without a group";
       render(<InputSelect options={options} showAll={false} showAllLabel={showAllLabel} />);
-      await act(() => user.tab());
+      await user.tab();
 
       // after focus dropdown should have all options grouped and then show only the ones without a group
       expect(screen.getAllByRole("option")).toHaveLength(2 + 1 + 1); // (2 asian, 1 american, 1 ungrouped)