refactor: clean up testing environment configuration and enhance test setup

- Removed `NEXT_PUBLIC_IS_TESTING_ENVIRONMENT` variable from `.env.default` as it is no longer needed.
- Updated Vitest configuration to include a setup file for tests.
- Cleaned up `layout.tsx` by removing the testing environment check and mock initialization.
- Updated `MainMarketplacePage.test.tsx` to use a custom render utility for better test isolation.
- Deleted unused `Badge.test.tsx` file to streamline test suite.
- Added comments in `mocks/index.ts` to clarify usage context for mocks.

autogpt_platform/frontend/.env.default

@@ -30,5 +30,3 @@ NEXT_PUBLIC_TURNSTILE=disabled
 
 # PR previews
 NEXT_PUBLIC_PREVIEW_STEALING_DEV=
-# Testing
-NEXT_PUBLIC_IS_TESTING_ENVIRONMENT=false

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainMarketplacePage/MainMarketplacePage.test.tsx

@@ -1,8 +1,8 @@
-import { expect, test } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { MainMarkeplacePage } from './MainMarketplacePage'
- 
-test('MainMarketplacePage', () => {
-  render(<MainMarkeplacePage />)
-  expect(screen.getByText('Featured Agents')).toBeDefined()
-})
+import { expect, test } from "vitest";
+import { render, screen } from "@/tests/test-utils";
+import { MainMarkeplacePage } from "./MainMarketplacePage";
+
+test("MainMarketplacePage", () => {
+  render(<MainMarkeplacePage />);
+  expect(screen.getByText("Featured Agents")).toBeDefined();
+});

autogpt_platform/frontend/src/app/layout.tsx

@@ -37,11 +37,6 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  if (environment.isTestingEnvironment()) {
-    const { initMocks } = await import("@/mocks");
-    await initMocks();
-  }
-
   const headersList = await headers();
   const host = headersList.get("host") || "";
 

autogpt_platform/frontend/src/components/atoms/Badge/Badge.test.tsx

@@ -1,81 +0,0 @@
-// import { render, screen } from "@testing-library/react";
-// import { describe, expect, it } from "vitest";
-// import { Badge } from "./Badge";
-
-// describe("Badge Component", () => {
-//   it("renders badge with content", () => {
-//     render(<Badge variant="success">Success</Badge>);
-
-//     expect(screen.getByText("Success")).toBeInTheDocument();
-//   });
-
-//   it("applies correct variant styles", () => {
-//     const { rerender } = render(<Badge variant="success">Success</Badge>);
-//     let badge = screen.getByText("Success");
-//     expect(badge).toHaveClass("bg-green-100", "text-green-800");
-
-//     rerender(<Badge variant="error">Error</Badge>);
-//     badge = screen.getByText("Error");
-//     expect(badge).toHaveClass("bg-red-100", "text-red-800");
-
-//     rerender(<Badge variant="info">Info</Badge>);
-//     badge = screen.getByText("Info");
-//     expect(badge).toHaveClass("bg-slate-100", "text-slate-800");
-//   });
-
-//   it("applies custom className", () => {
-//     render(
-//       <Badge variant="success" className="custom-class">
-//         Success
-//       </Badge>,
-//     );
-
-//     const badge = screen.getByText("Success");
-//     expect(badge).toHaveClass("custom-class");
-//   });
-
-//   it("renders as span element", () => {
-//     render(<Badge variant="success">Success</Badge>);
-
-//     const badge = screen.getByText("Success");
-//     expect(badge.tagName).toBe("SPAN");
-//   });
-
-//   it("renders children correctly", () => {
-//     render(
-//       <Badge variant="success">
-//         <span>Custom</span> Content
-//       </Badge>,
-//     );
-
-//     expect(screen.getByText("Custom")).toBeInTheDocument();
-//     expect(screen.getByText("Content")).toBeInTheDocument();
-//   });
-
-//   it("supports all badge variants", () => {
-//     const variants = ["success", "error", "info"] as const;
-
-//     variants.forEach((variant) => {
-//       const { unmount } = render(
-//         <Badge variant={variant} data-testid={`badge-${variant}`}>
-//           {variant}
-//         </Badge>,
-//       );
-
-//       expect(screen.getByTestId(`badge-${variant}`)).toBeInTheDocument();
-//       unmount();
-//     });
-//   });
-
-//   it("handles long text content", () => {
-//     render(
-//       <Badge variant="info">
-//         Very long text that should be handled properly by the component
-//       </Badge>,
-//     );
-
-//     const badge = screen.getByText(/Very long text/);
-//     expect(badge).toBeInTheDocument();
-//     expect(badge).toHaveClass("overflow-hidden", "text-ellipsis");
-//   });
-// });

autogpt_platform/frontend/src/mocks/index.ts

@@ -1,3 +1,5 @@
+// We are not using this for tests because Vitest runs our tests in a Node.js environment.
+// However, we can use it for development purposes to test our UI in the browser with fake data.
 export async function initMocks() {
   if (typeof window === "undefined") {
     const { server } = await import("./mock-server");

autogpt_platform/frontend/src/services/environment/index.ts

@@ -116,10 +116,6 @@ function areFeatureFlagsEnabled() {
   return process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "enabled";
 }
 
-function isTestingEnvironment() {
-  return process.env.NEXT_PUBLIC_IS_TESTING_ENVIRONMENT === "true";
-}
-
 export const environment = {
   // Generic
   getEnvironmentStr,
@@ -143,5 +139,4 @@ export const environment = {
   isLocal,
   isVercelPreview,
   areFeatureFlagsEnabled,
-  isTestingEnvironment,
 };

autogpt_platform/frontend/src/tests/test-utils.tsx

@@ -0,0 +1,30 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, RenderOptions } from "@testing-library/react";
+import { ReactElement, ReactNode } from "react";
+
+function createTestQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+}
+
+function TestProviders({ children }: { children: ReactNode }) {
+  const queryClient = createTestQueryClient();
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
+
+function customRender(
+  ui: ReactElement,
+  options?: Omit<RenderOptions, "wrapper">,
+) {
+  return render(ui, { wrapper: TestProviders, ...options });
+}
+
+export * from "@testing-library/react";
+export { customRender as render };

autogpt_platform/frontend/src/tests/vitest.setup.ts

@@ -0,0 +1,6 @@
+import { beforeAll, afterAll, afterEach } from "vitest";
+import { server } from "@/mocks/mock-server";
+
+beforeAll(() => server.listen({ onUnhandledRequest: "bypass" }));
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());

autogpt_platform/frontend/vitest.config.mts

@@ -7,5 +7,6 @@ export default defineConfig({
     test: {
         environment: 'jsdom',
         include: ['src/**/*.test.tsx'],
+        setupFiles: ['./src/tests/vitest.setup.ts'],
     },
 })