test(admin): add component test harness

apps/admin/package.json

@@ -10,7 +10,9 @@
     "preview": "vite preview",
     "lint": "oxlint --fix .",
     "format": "oxfmt src/",
-    "test": "node --test src/app/route-manifest.test.mjs src/store/storage-import.test.mjs src/utils/*.test.js src/layout/components/*.test.js"
+    "test": "node --test src/app/route-manifest.test.mjs src/store/storage-import.test.mjs src/utils/*.test.js src/layout/components/*.test.js",
+    "test:unit": "vitest",
+    "test:unit:watch": "vitest --watch"
   },
   "dependencies": {
     "@ant-design/icons": "^5.4.0",
@@ -50,16 +52,21 @@
     "zustand": "^4.5.5"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^18.3.7",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^6.0.3",
+    "jsdom": "^29.1.1",
     "less": "^4.2.0",
     "oxfmt": "^0.59.0",
     "oxlint": "^1.74.0",
     "react-router": "^7.18.1",
     "typescript": "^7.0.2",
     "vite": "^8.1.5",
-    "vite-plugin-mkcert": "^1.17.10"
+    "vite-plugin-mkcert": "^1.17.10",
+    "vitest": "^4.1.10"
   },
   "browserslist": [
     "> 1%",

apps/admin/src/test/setup.ts

+import '@testing-library/jest-dom/vitest'

apps/admin/src/test/smoke.test.tsx

+import { useState } from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+
+function ClickCounter() {
+  const [count, setCount] = useState(0)
+
+  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
+}
+
+describe('component test harness', () => {
+  it('renders a button and updates it after a click', async () => {
+    const user = userEvent.setup()
+
+    render(<ClickCounter />)
+    await user.click(screen.getByRole('button', { name: 'Clicked 0 times' }))
+
+    expect(screen.getByRole('button', { name: 'Clicked 1 times' })).toBeInTheDocument()
+  })
+})

apps/admin/vitest.config.ts

+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  test: {
+    css: true,
+    environment: 'jsdom',
+    include: ['src/test/**/*.test.{ts,tsx}'],
+    setupFiles: ['./src/test/setup.ts'],
+  },
+})

pnpm-lock.yaml

@@ -116,6 +116,15 @@ importers:
         specifier: ^4.5.5
         version: 4.5.7(@types/react@18.3.31)(immer@9.0.21)(react@18.3.1)
     devDependencies:
+      '@testing-library/jest-dom':
+        specifier: ^6.9.1
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: ^16.3.2
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.1)
       '@types/react':
         specifier: ^18.3.7
         version: 18.3.31
@@ -125,6 +134,9 @@ importers:
       '@vitejs/plugin-react':
         specifier: ^6.0.3
         version: 6.0.3(vite@8.1.5(@types/node@22.20.1)(esbuild@0.28.1)(less@4.6.7))
+      jsdom:
+        specifier: ^29.1.1
+        version: 29.1.1
       less:
         specifier: ^4.2.0
         version: 4.6.7
@@ -146,6 +158,9 @@ importers:
       vite-plugin-mkcert:
         specifier: ^1.17.10
         version: 1.17.12(vite@8.1.5(@types/node@22.20.1)(esbuild@0.28.1)(less@4.6.7))
+      vitest:
+        specifier: ^4.1.10
+        version: 4.1.10(@types/node@22.20.1)(jsdom@29.1.1)(vite@8.1.5(@types/node@22.20.1)(esbuild@0.28.1)(less@4.6.7))
 
   apps/learning:
     dependencies:
@@ -4863,6 +4878,16 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
 
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@testing-library/dom': 10.4.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.31
+      '@types/react-dom': 18.3.7(@types/react@18.3.31)
+
   '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@babel/runtime': 7.29.7