Remove act warnings (•̀o•́)ง

apps/web-remix/app/components/pages/auth/login/__tests__/login.test.tsx

@@ -85,7 +85,7 @@ class LoginObject {
   async submit() {
     const { button } = await this.getElements();
 
-    await act(() => button.click());
+    await button.click();
 
     return this;
   }

apps/web-remix/app/components/pages/auth/register/__tests__/register.test.tsx

@@ -23,16 +23,16 @@ describe(RegisterPage.name, () => {
 
     await page.submit();
 
-    await waitFor(() => screen.findByText(/Homepage/i));
+    await screen.findByText(/Homepage/i);
   });
 
   test("should display error if fields not filled in", async () => {
     const page = new RegisterObject().render({ initialEntries: ["/register"] });
 
     await page.submit();
 
-    await waitFor(() => screen.findByText(/Invalid email/i));
-    await waitFor(() => screen.findByText(/String must contain at least 2/i));
+    await screen.findByText(/Invalid email/i);
+    await screen.findByText(/String must contain at least 2/i);
   });
 
   test("should display error if email already taken", async () => {
@@ -43,7 +43,7 @@ describe(RegisterPage.name, () => {
 
     await page.submit();
 
-    await waitFor(() => screen.findByText(/email has already been taken/i));
+    await screen.findByText(/email has already been taken/i);
   });
 });
 
@@ -74,7 +74,7 @@ class RegisterObject {
   async submit() {
     const { button } = await this.getElements();
 
-    await act(() => button.click());
+    await button.click();
 
     return this;
   }

apps/web-remix/app/components/pages/knowledgeBase/__tests__/knowledgeBase.test.tsx

@@ -6,7 +6,7 @@ import {
   RoutesProps,
   setupRoutes,
 } from "~/tests/setup.tests";
-import { render, screen, waitFor, act } from "~/tests/render";
+import { render, screen, waitFor } from "~/tests/render";
 import { server } from "~/tests/server.mock";
 import { loader as listLoader } from "../list/loader.server";
 import { action as listAction } from "../list/action.server";
@@ -66,9 +66,7 @@ describe("KnowledgeBase", () => {
       /Remove collection: super-collection/i
     );
 
-    await act(async () => {
-      await button.click();
-    });
+    await button.click();
 
     await page.confirmDelete();
 
@@ -102,7 +100,7 @@ describe("KnowledgeBase", () => {
 
     await page.submitCollection();
 
-    await screen.getByRole("heading", { name: /test collection database/i });
+    screen.getByRole("heading", { name: /test collection database/i });
   });
 });
 
@@ -145,9 +143,7 @@ class KnowledgeBaseObject {
       ButtonHandle.fromRole("Delete collection")
     );
 
-    await act(async () => {
-      await confirmButton.click();
-    });
+    await confirmButton.click();
 
     return this;
   }

apps/web-remix/app/components/pages/pipelines/__tests__/build.test.tsx

@@ -5,7 +5,6 @@ import {
   screen,
   waitFor,
   fireEvent,
-  act,
   Matcher,
   findByText,
 } from "~/tests/render";
@@ -129,9 +128,7 @@ describe(PipelineBuilder.name, () => {
 
     const addButton = blockTypes[0].querySelector("button");
 
-    await act(async () => {
-      await userEvent.click(addButton!);
-    });
+    await userEvent.click(addButton!);
 
     const blocks = await page.getBlocks();
 
@@ -147,9 +144,7 @@ describe(PipelineBuilder.name, () => {
       /Delete block: text_input_1/i
     );
 
-    act(() => {
-      page.fireBlockOnClick(deleteButton.buttonElement);
-    });
+    await page.fireBlockOnClick(deleteButton.buttonElement);
 
     await page.confirmAction();
 
@@ -167,9 +162,7 @@ describe(PipelineBuilder.name, () => {
       /Edit block: text_output_1/i
     );
 
-    act(() => {
-      page.fireBlockOnClick(editButton.buttonElement);
-    });
+    await page.fireBlockOnClick(editButton.buttonElement);
 
     await screen.findByText(/Text Output 1/i);
 
@@ -181,9 +174,7 @@ describe(PipelineBuilder.name, () => {
 
     const submit = await ButtonHandle.fromRole("Save changes");
 
-    await act(async () => {
-      await submit.click();
-    });
+    await submit.click();
 
     await waitFor(() => screen.findByText(/super_output/i));
   });
@@ -310,9 +301,7 @@ describe(PipelineBuilder.name, () => {
 
     const submit = await ButtonHandle.fromRole("Save changes");
 
-    await act(async () => {
-      await submit.click();
-    });
+    await submit.click();
 
     expect(
       screen.queryByText(/This block contains problems to fix./i)
@@ -409,7 +398,7 @@ describe(PipelineBuilder.name, () => {
 
     // --------
 
-    await submitKnowledgeBase.click();
+    await waitFor(() => submitKnowledgeBase.click());
 
     expect(knowledgeSelect.value).toBe("NEW_NEW");
   });
@@ -481,7 +470,7 @@ class PipelineObject {
   }
 
   async hoverOverBlockGroup(element: Element) {
-    await act(() => userEvent.hover(element));
+    await userEvent.hover(element);
 
     return this;
   }
@@ -496,9 +485,7 @@ class PipelineObject {
       `Edit block: ${blockName}`
     );
 
-    act(() => {
-      this.fireBlockOnClick(editButton.buttonElement);
-    });
+    await this.fireBlockOnClick(editButton.buttonElement);
 
     return this;
   }
@@ -519,39 +506,31 @@ class PipelineObject {
   async openAliasDropdown() {
     const aliasDropdown = await ButtonHandle.fromLabelText(/Select aliases/i);
 
-    await act(async () => {
-      await aliasDropdown.click();
-    });
+    await aliasDropdown.click();
 
     return this;
   }
 
   async restore() {
     const restore = await ButtonHandle.fromRole("Restore");
 
-    await act(async () => {
-      await restore.click();
-    });
+    await restore.click();
 
     return this;
   }
 
   async createAlias() {
     const create = await ButtonHandle.fromTestId("create-alias");
 
-    await act(async () => {
-      await create.click();
-    });
+    await create.click();
 
     return this;
   }
 
   async selectAlias(name: Matcher) {
     const aliasLink = await ButtonHandle.fromLabelText(name);
 
-    await act(async () => {
-      await aliasLink.click();
-    });
+    await aliasLink.click();
 
     return this;
   }
@@ -563,19 +542,15 @@ class PipelineObject {
   async deleteAlias(label: Matcher) {
     const deleteButton = await ButtonHandle.fromLabelText(label);
 
-    await act(async () => {
-      await deleteButton.click();
-    });
+    await deleteButton.click();
 
     return this;
   }
 
   async confirmAction() {
     const confirmButton = await ButtonHandle.fromRole("Confirm");
 
-    await act(async () => {
-      await confirmButton.click();
-    });
+    await confirmButton.click();
 
     return this;
   }

apps/web-remix/app/components/pages/pipelines/__tests__/pipelines.test.tsx

@@ -65,17 +65,13 @@ describe(PipelinesPage.name, () => {
       /Remove workflow: AI Chat/i
     );
 
-    await act(async () => {
-      await button.click();
-    });
+    await button.click();
 
     const confirmButton = await waitFor(() =>
       ButtonHandle.fromRole("Delete workflow")
     );
 
-    await act(async () => {
-      await confirmButton.click();
-    });
+    await confirmButton.click();
 
     const workflowList = await ListHandle.fromLabelText(/Workflows list/i);
 
@@ -91,11 +87,9 @@ describe(PipelinesPage.name, () => {
       /Duplicate workflow: sample-workflow/i
     );
 
-    await act(async () => {
-      await button.click();
-    });
+    await button.click();
 
-    const text = screen.findByText(/pipeline/i);
+    const text = await screen.findByText(/pipeline/i);
 
     expect(text).toBeTruthy();
   });
@@ -109,11 +103,9 @@ describe(PipelinesPage.name, () => {
       /Create workflow: Speech To Text/i
     );
 
-    await act(async () => {
-      await button.click();
-    });
+    await button.click();
 
-    const text = screen.findByText(/pipeline/i);
+    const text = await screen.findByText(/pipeline/i);
     expect(text).toBeTruthy();
   });
 
@@ -123,20 +115,17 @@ describe(PipelinesPage.name, () => {
     });
 
     const link = await LinkHandle.fromLabelText(/Create new workflow/i);
-    await act(async () => {
-      await link.click();
-    });
+
+    await link.click();
 
     const input = await InputHandle.fromLabelText(/Name/i);
     await input.type("LALALA");
 
     const submit = await ButtonHandle.fromRole("Create workflow");
 
-    await act(async () => {
-      await submit.click();
-    });
+    await submit.click();
 
-    const text = screen.findByText(/pipeline/i);
+    const text = await screen.findByText(/pipeline/i);
     expect(text).toBeTruthy();
   });
 });

apps/web-remix/app/tests/handles/Button.handle.ts

@@ -32,8 +32,6 @@ export class ButtonHandle {
       throw new Error(`(${this.buttonElement.name}) button is disabled!`);
     }
 
-    await act(async () => {
-      await userEvent.click(this.buttonElement);
-    });
+    await userEvent.click(this.buttonElement);
   }
 }

apps/web-remix/app/tests/handles/Radio.handle.ts

@@ -26,8 +26,6 @@ export class RadioHandle {
       throw new Error(`(${this.radioElement.name}) is disabled!`);
     }
 
-    await act(async () => {
-      await userEvent.click(this.radioElement);
-    });
+    await userEvent.click(this.radioElement);
   }
 }

apps/web-remix/app/tests/handles/SelectHandle.ts

@@ -1,6 +1,5 @@
 import userEvent from "@testing-library/user-event";
 import { screen } from "../render";
-import { act } from "~/tests/render";
 import { ButtonHandle } from "~/tests/handles/Button.handle";
 
 export class SelectHandle {
@@ -22,9 +21,7 @@ export class SelectHandle {
 
     if (!input) throw new Error(`Input in ${this.id} select does not exist`);
 
-    await act(async () => {
-      await userEvent.click(input);
-    });
+    await userEvent.click(input);
 
     return this;
   }
@@ -40,9 +37,7 @@ export class SelectHandle {
       throw new Error(`There is not ${value} in ${this.id} select`);
     }
 
-    await act(async () => {
-      await userEvent.click(option);
-    });
+    await userEvent.click(option);
 
     return option;
   }

apps/web-remix/app/tests/render.tsx

@@ -1,8 +1,10 @@
 import React, { ReactElement } from "react";
 import { render, RenderOptions } from "@testing-library/react";
 import { NavSidebarContext } from "~/components/sidebar/NavSidebar";
+import Modal from "react-modal";
 
 const AllTheProviders = ({ children }: { children: React.ReactNode }) => {
+  Modal.setAppElement("div");
   return (
     <div id="_root">
       <NavSidebarContext.Provider

apps/web-remix/app/tests/setupFiles.ts

@@ -1,5 +1,10 @@
-import { vi } from "vitest";
+import { afterEach, vi } from "vitest";
 import { WebSocketMock } from "./WebSocket.mock";
+import { cleanup } from "@testing-library/react";
+
+afterEach(() => {
+  cleanup();
+});
 
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
   observe: vi.fn(),