diff --git a/autogpt_platform/frontend/.env.default b/autogpt_platform/frontend/.env.default
index 73310d23db..197a37e8bb 100644
--- a/autogpt_platform/frontend/.env.default
+++ b/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
diff --git a/autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainMarketplacePage/MainMarketplacePage.test.tsx b/autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainMarketplacePage/MainMarketplacePage.test.tsx
index 07fece5b1a..299f699abc 100644
--- a/autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainMarketplacePage/MainMarketplacePage.test.tsx
+++ b/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()
- expect(screen.getByText('Featured Agents')).toBeDefined()
-})
\ No newline at end of file
+import { expect, test } from "vitest";
+import { render, screen } from "@/tests/test-utils";
+import { MainMarkeplacePage } from "./MainMarketplacePage";
+
+test("MainMarketplacePage", () => {
+ render();
+ expect(screen.getByText("Featured Agents")).toBeDefined();
+});
\ No newline at end of file
diff --git a/autogpt_platform/frontend/src/app/layout.tsx b/autogpt_platform/frontend/src/app/layout.tsx
index 06e04ae6cb..1836b1d4f2 100644
--- a/autogpt_platform/frontend/src/app/layout.tsx
+++ b/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") || "";
diff --git a/autogpt_platform/frontend/src/components/atoms/Badge/Badge.test.tsx b/autogpt_platform/frontend/src/components/atoms/Badge/Badge.test.tsx
deleted file mode 100644
index cd8531375b..0000000000
--- a/autogpt_platform/frontend/src/components/atoms/Badge/Badge.test.tsx
+++ /dev/null
@@ -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(Success);
-
-// expect(screen.getByText("Success")).toBeInTheDocument();
-// });
-
-// it("applies correct variant styles", () => {
-// const { rerender } = render(Success);
-// let badge = screen.getByText("Success");
-// expect(badge).toHaveClass("bg-green-100", "text-green-800");
-
-// rerender(Error);
-// badge = screen.getByText("Error");
-// expect(badge).toHaveClass("bg-red-100", "text-red-800");
-
-// rerender(Info);
-// badge = screen.getByText("Info");
-// expect(badge).toHaveClass("bg-slate-100", "text-slate-800");
-// });
-
-// it("applies custom className", () => {
-// render(
-//
-// Success
-// ,
-// );
-
-// const badge = screen.getByText("Success");
-// expect(badge).toHaveClass("custom-class");
-// });
-
-// it("renders as span element", () => {
-// render(Success);
-
-// const badge = screen.getByText("Success");
-// expect(badge.tagName).toBe("SPAN");
-// });
-
-// it("renders children correctly", () => {
-// render(
-//
-// Custom Content
-// ,
-// );
-
-// 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(
-//
-// {variant}
-// ,
-// );
-
-// expect(screen.getByTestId(`badge-${variant}`)).toBeInTheDocument();
-// unmount();
-// });
-// });
-
-// it("handles long text content", () => {
-// render(
-//
-// Very long text that should be handled properly by the component
-// ,
-// );
-
-// const badge = screen.getByText(/Very long text/);
-// expect(badge).toBeInTheDocument();
-// expect(badge).toHaveClass("overflow-hidden", "text-ellipsis");
-// });
-// });
diff --git a/autogpt_platform/frontend/src/mocks/index.ts b/autogpt_platform/frontend/src/mocks/index.ts
index 5fb6db5eb2..f11c1fb398 100644
--- a/autogpt_platform/frontend/src/mocks/index.ts
+++ b/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");
diff --git a/autogpt_platform/frontend/src/services/environment/index.ts b/autogpt_platform/frontend/src/services/environment/index.ts
index 98ac792fa1..cdd5b421b5 100644
--- a/autogpt_platform/frontend/src/services/environment/index.ts
+++ b/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,
};
diff --git a/autogpt_platform/frontend/src/tests/test-utils.tsx b/autogpt_platform/frontend/src/tests/test-utils.tsx
new file mode 100644
index 0000000000..a71583a98c
--- /dev/null
+++ b/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 (
+ {children}
+ );
+}
+
+function customRender(
+ ui: ReactElement,
+ options?: Omit,
+) {
+ return render(ui, { wrapper: TestProviders, ...options });
+}
+
+export * from "@testing-library/react";
+export { customRender as render };
diff --git a/autogpt_platform/frontend/src/tests/vitest.setup.ts b/autogpt_platform/frontend/src/tests/vitest.setup.ts
new file mode 100644
index 0000000000..bb7a57ae01
--- /dev/null
+++ b/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());
diff --git a/autogpt_platform/frontend/vitest.config.mts b/autogpt_platform/frontend/vitest.config.mts
index b1d7f45b4f..9778273630 100644
--- a/autogpt_platform/frontend/vitest.config.mts
+++ b/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'],
},
})
\ No newline at end of file