52 - Set up Vitest + RTL + MSW frontend test harness

frontend/package.json

@@ -9,6 +9,8 @@
     "lint": "oxlint",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -17,14 +19,20 @@
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.13.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.2",
+    "jsdom": "^29.1.1",
+    "msw": "^2.14.6",
     "oxlint": "^1.69.0",
     "prettier": "^3.9.1",
     "tailwindcss": "^4.3.1",
     "typescript": "~6.0.2",
-    "vite": "^8.1.0"
+    "vite": "^8.1.0",
+    "vitest": "^4.1.9"
   }
 }

frontend/src/components/ui/Button.test.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import Button from './Button'
+
+describe('Button', () => {
+  it('renders its children as a button', () => {
+    render(<Button>Add Bucket</Button>)
+
+    expect(
+      screen.getByRole('button', { name: 'Add Bucket' }),
+    ).toBeInTheDocument()
+  })
+})

frontend/src/test/server.ts

@@ -0,0 +1,7 @@
+import { setupServer } from 'msw/node'
+
+/**
+ * Shared MSW server for component/unit tests. Handlers are registered per-test
+ * via `server.use(...)`; the global setup resets them after each test.
+ */
+export const server = setupServer()

frontend/src/test/setup.ts

@@ -0,0 +1,9 @@
+import '@testing-library/jest-dom/vitest'
+import { afterAll, afterEach, beforeAll } from 'vitest'
+import { server } from './server'
+
+// Start the MSW server before all tests, reset handlers between tests so
+// per-test overrides don't leak, and close it when the run finishes.
+beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
+afterEach(() => server.resetHandlers())
+afterAll(() => server.close())

frontend/vite.config.ts

@@ -1,3 +1,4 @@
+/// <reference types="vitest/config" />
 import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
@@ -5,6 +6,16 @@ import { defineConfig } from 'vite'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), tailwindcss()],
+  test: {
+    environment: 'jsdom',
+    // Give jsdom a real origin so the client's relative `/api/...` fetches
+    // resolve to an absolute URL MSW can intercept.
+    environmentOptions: { jsdom: { url: 'http://localhost' } },
+    globals: true,
+    setupFiles: ['./src/test/setup.ts'],
+    // Keep the future Playwright e2e suite out of the Vitest run.
+    exclude: ['**/node_modules/**', '**/dist/**', 'e2e/**'],
+  },
   server: {
     host: '0.0.0.0',
     port: 5173,