From bc7616df424e26d6b20105f6401329e63e9013ef Mon Sep 17 00:00:00 2001
From: jeffusion <admin@jeffusion.cc>
Date: Thu, 5 Mar 2026 00:32:40 +0800
Subject: [PATCH] feat(ui): add frontend test infrastructure with vitest

Install vitest, @testing-library/react, @testing-library/jest-dom,
@testing-library/user-event, and happy-dom as dev dependencies. Configure
vitest with happy-dom environment, path aliases, and test setup file.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)
---
 frontend/package.json      | 10 ++++++++--
 frontend/src/test-setup.ts |  7 +++++++
 frontend/vitest.config.ts  | 16 ++++++++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/test-setup.ts
 create mode 100644 frontend/vitest.config.ts

diff --git a/frontend/package.json b/frontend/package.json
index 4b9f534..d1a581e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run"
   },
   "dependencies": {
     "@radix-ui/react-label": "^2.1.7",
@@ -31,6 +32,9 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.5.2",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
@@ -40,12 +44,14 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.4.0",
+    "happy-dom": "^20.8.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^3",
     "tailwindcss-animate": "^1.0.7",
     "tw-animate-css": "^1.3.8",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.44.0",
-    "vite": "^7.1.7"
+    "vite": "^7.1.7",
+    "vitest": "^4.0.18"
   }
 }
diff --git a/frontend/src/test-setup.ts b/frontend/src/test-setup.ts
new file mode 100644
index 0000000..0d74b73
--- /dev/null
+++ b/frontend/src/test-setup.ts
@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+afterEach(() => {
+  cleanup();
+});
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
new file mode 100644
index 0000000..5428571
--- /dev/null
+++ b/frontend/vitest.config.ts
@@ -0,0 +1,16 @@
+import path from 'path';
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  test: {
+    environment: 'happy-dom',
+    setupFiles: ['./src/test-setup.ts'],
+  },
+});