feat: Set up Vitest and React Testing Library for frontend testing and document testing rules.

autogpt_platform/frontend/package.json

@@ -127,6 +127,8 @@
     "@storybook/nextjs": "9.1.5",
     "@tanstack/eslint-plugin-query": "5.91.2",
     "@tanstack/react-query-devtools": "5.90.2",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/react": "16.3.2",
     "@types/canvas-confetti": "1.9.0",
     "@types/lodash": "4.17.20",
     "@types/negotiator": "0.6.4",
@@ -135,6 +137,7 @@
     "@types/react-dom": "18.3.5",
     "@types/react-modal": "3.16.3",
     "@types/react-window": "1.8.8",
+    "@vitejs/plugin-react": "5.1.2",
     "axe-playwright": "2.2.2",
     "chromatic": "13.3.3",
     "concurrently": "9.2.1",
@@ -143,6 +146,7 @@
     "eslint-config-next": "15.5.7",
     "eslint-plugin-storybook": "9.1.5",
     "import-in-the-middle": "2.0.2",
+    "jsdom": "27.4.0",
     "msw": "2.11.6",
     "msw-storybook-addon": "2.0.6",
     "orval": "7.13.0",
@@ -153,7 +157,9 @@
     "require-in-the-middle": "8.0.1",
     "storybook": "9.1.5",
     "tailwindcss": "3.4.17",
-    "typescript": "5.9.3"
+    "typescript": "5.9.3",
+    "vite-tsconfig-paths": "6.0.4",
+    "vitest": "4.0.17"
   },
   "msw": {
     "workerDirectory": [

autogpt_platform/frontend/src/tests/TESTING_RULES.md

@@ -0,0 +1,141 @@
+# Frontend Testing Rules 🧪
+
+## Testing Types Overview
+
+| Type | Tool | Speed | Purpose |
+|------|------|-------|---------|
+| **E2E** | Playwright | Slow (~5s/test) | Real browser, full user journeys |
+| **Integration** | Vitest + RTL | Fast (~100ms) | Component + mocked API |
+| **Unit** | Vitest + RTL | Fastest (~10ms) | Individual functions/components |
+| **Visual** | Storybook + Chromatic | N/A | UI appearance, design system |
+
+---
+
+## When to Use Each
+
+### ✅ E2E Tests (Playwright)
+**Use for:** Critical user journeys that MUST work in a real browser.
+
+- Authentication flows (login, signup, logout)
+- Payment or sensitive transactions
+- Flows requiring real browser APIs (clipboard, downloads)
+- Cross-page navigation that must work end-to-end
+
+**Location:** `src/tests/*.spec.ts`
+
+### ✅ Integration Tests (Vitest + RTL)
+**Use for:** Testing components with their dependencies (API calls, state).
+
+- Page-level behavior with mocked API responses
+- Components that fetch data
+- User interactions that trigger API calls
+- Feature flows within a single page
+
+**Location:** `src/app/**/page.test.tsx` or `src/components/**/Component.test.tsx`
+
+```tsx
+// Example: Test page renders data from API
+render(<MarketplacePage />, { wrapper: MockProviders });
+await screen.findByText('Featured Agents');
+expect(screen.getByRole('list')).toHaveLength(3);
+```
+
+### ✅ Unit Tests (Vitest + RTL)
+**Use for:** Testing isolated components and utility functions.
+
+- Pure utility functions (`lib/utils.ts`)
+- Component rendering with various props
+- Component state changes
+- Custom hooks
+
+**Location:** Co-located with the file: `Component.test.tsx` next to `Component.tsx`
+
+```tsx
+// Example: Test component renders correctly
+render(<AgentCard title="My Agent" />);
+expect(screen.getByText('My Agent')).toBeInTheDocument();
+```
+
+### ✅ Storybook Tests (Visual)
+**Use for:** Design system, visual appearance, component documentation.
+
+- Atoms (Button, Input, Badge)
+- Molecules (Dialog, Card)
+- Visual states (hover, disabled, loading)
+- Responsive layouts
+
+**Location:** Co-located: `Component.stories.tsx` next to `Component.tsx`
+
+---
+
+## Decision Flowchart
+
+```
+Does it need a REAL browser/backend?
+├─ YES → E2E (Playwright)
+└─ NO
+   └─ Does it involve API calls or complex state?
+      ├─ YES → Integration (Vitest + RTL)
+      └─ NO
+         └─ Is it about visual appearance?
+            ├─ YES → Storybook
+            └─ NO → Unit (Vitest + RTL)
+```
+
+---
+
+## What NOT to Test
+
+❌ Third-party library internals (Radix UI, React Query)  
+❌ CSS styling details (use Storybook)  
+❌ Simple prop-passing components with no logic  
+❌ TypeScript types  
+
+---
+
+## File Organization
+
+```
+src/
+├── components/
+│   └── atoms/
+│       └── Button/
+│           ├── Button.tsx
+│           ├── Button.test.tsx      # Unit test
+│           └── Button.stories.tsx   # Visual test
+├── app/
+│   └── (platform)/
+│       └── marketplace/
+│           ├── page.tsx
+│           └── page.test.tsx        # Integration test
+├── lib/
+│   ├── utils.ts
+│   └── utils.test.ts                # Unit test
+└── tests/
+    └── *.spec.ts                    # E2E tests (Playwright)
+```
+
+---
+
+## Priority Matrix
+
+| Component Type | Test Priority | Recommended Test |
+|----------------|---------------|------------------|
+| Pages/Features | **Highest** | Integration |
+| Custom Hooks | High | Unit |
+| Utility Functions | High | Unit |
+| Organisms (complex) | High | Integration |
+| Molecules | Medium | Unit + Storybook |
+| Atoms | Medium | Storybook only* |
+
+*Atoms are typically simple enough that Storybook visual tests suffice.
+
+---
+
+## Golden Rules
+
+1. **Test behavior, not implementation** - Query by role/text, not class names
+2. **One assertion per concept** - Tests should be focused
+3. **Mock at boundaries** - Mock API calls, not internal functions
+4. **Co-locate tests** - Keep `.test.tsx` next to the component
+5. **E2E is expensive** - Only for critical journeys; prefer integration tests

autogpt_platform/frontend/vitest.config.mts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+    plugins: [tsconfigPaths(), react()],
+    test: {
+        environment: 'jsdom',
+    },
+})