fix warnings during test runs (#1638)

frontend/src/components/chat/ChatInput.test.tsx

@@ -3,12 +3,6 @@ import userEvent from "@testing-library/user-event";
 import { act, render } from "@testing-library/react";
 import ChatInput from "./ChatInput";
 
-const tMock = vi.fn((key: string) => key);
-
-vi.mock("react-i18next", () => ({
-  useTranslation: () => ({ t: tMock }),
-}));
-
 describe("ChatInput", () => {
   const onSendMessage = vi.fn();
 
@@ -39,14 +33,11 @@ describe("ChatInput", () => {
     expect(onSendMessage).not.toHaveBeenCalled();
   });
 
-  // Note that this test only checks that the placeholder is rendered, not the actual value
   it("should render with a placeholder", () => {
-    tMock.mockReturnValue("value-returned-by-t");
-
     const { getByPlaceholderText } = render(
       <ChatInput onSendMessage={onSendMessage} />,
     );
-    const textarea = getByPlaceholderText("value-returned-by-t");
+    const textarea = getByPlaceholderText(/CHAT_INTERFACE\$INPUT_PLACEHOLDER/i);
     expect(textarea).toBeInTheDocument();
   });
 

frontend/src/components/file-explorer/FileExplorer.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, waitFor } from "@testing-library/react";
+import { render, waitFor, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { act } from "react-dom/test-utils";
 import { describe, it, expect, vi, Mock } from "vitest";
@@ -59,11 +59,13 @@ describe("FileExplorer", () => {
     expect(onFileClickMock).toHaveBeenCalledWith(absPath);
   });
 
-  it("should refetch the workspace when clicking the refresh button", () => {
-    const { getByTestId } = render(<FileExplorer onFileClick={vi.fn} />);
+  it("should refetch the workspace when clicking the refresh button", async () => {
+    const onFileClickMock = vi.fn();
+    render(<FileExplorer onFileClick={onFileClickMock} />);
 
-    act(() => {
-      userEvent.click(getByTestId("refresh"));
+    // The 'await' keyword is required here to avoid a warning during test runs
+    await act(() => {
+      userEvent.click(screen.getByTestId("refresh"));
     });
 
     expect(getWorkspace).toHaveBeenCalledTimes(2); // 1 from initial render, 1 from refresh button
@@ -87,13 +89,14 @@ describe("FileExplorer", () => {
     expect(queryByText("root")).not.toBeVisible();
   });
 
-  it("should upload a file", () => {
+  it("should upload a file", async () => {
     const { getByTestId } = render(<FileExplorer onFileClick={vi.fn} />);
 
     const uploadFileInput = getByTestId("file-input");
     const file = new File([""], "test");
 
-    act(() => {
+    // The 'await' keyword is required here to avoid a warning during test runs
+    await act(() => {
       userEvent.upload(uploadFileInput, file);
     });
 

frontend/src/components/modals/settings/SettingsModal.test.tsx

@@ -80,14 +80,16 @@ describe("SettingsModal", () => {
     expect(onOpenChange).toHaveBeenCalledWith(false);
   });
 
-  it("should disabled the save button if the settings contain a missing value", () => {
+  it("should disabled the save button if the settings contain a missing value", async () => {
     const onOpenChangeMock = vi.fn();
     (getSettings as Mock).mockReturnValueOnce({
       LLM_MODEL: "gpt-3.5-turbo",
       AGENT: "",
     });
-    renderWithProviders(
-      <SettingsModal isOpen onOpenChange={onOpenChangeMock} />,
+    await act(async () =>
+      renderWithProviders(
+        <SettingsModal isOpen onOpenChange={onOpenChangeMock} />,
+      ),
     );
 
     const saveButton = screen.getByRole("button", { name: /save/i });

frontend/vitest.setup.ts

@@ -1,3 +1,12 @@
 // learn more: https://github.com/testing-library/jest-dom
 // eslint-disable-next-line import/no-extraneous-dependencies
 import "@testing-library/jest-dom";
+
+// @ts-expect-error - Mock for Terminal tests
+HTMLCanvasElement.prototype.getContext = vi.fn();
+
+// Mock the i18n provider
+vi.mock("react-i18next", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-i18next")>()),
+  useTranslation: () => ({ t: (key: string) => key }),
+}));