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)
This commit is contained in:
jeffusion
2026-03-05 00:32:40 +08:00
committed by 路遥知码力
parent c45cb34a35
commit bc7616df42
3 changed files with 31 additions and 2 deletions

View File

@@ -7,7 +7,8 @@
"dev": "vite", "dev": "vite",
"build": "tsc -b && vite build", "build": "tsc -b && vite build",
"lint": "eslint .", "lint": "eslint .",
"preview": "vite preview" "preview": "vite preview",
"test": "vitest run"
}, },
"dependencies": { "dependencies": {
"@radix-ui/react-label": "^2.1.7", "@radix-ui/react-label": "^2.1.7",
@@ -31,6 +32,9 @@
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.36.0", "@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/node": "^24.5.2",
"@types/react": "^19.1.13", "@types/react": "^19.1.13",
"@types/react-dom": "^19.1.9", "@types/react-dom": "^19.1.9",
@@ -40,12 +44,14 @@
"eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20", "eslint-plugin-react-refresh": "^0.4.20",
"globals": "^16.4.0", "globals": "^16.4.0",
"happy-dom": "^20.8.3",
"postcss": "^8.5.6", "postcss": "^8.5.6",
"tailwindcss": "^3", "tailwindcss": "^3",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"tw-animate-css": "^1.3.8", "tw-animate-css": "^1.3.8",
"typescript": "~5.8.3", "typescript": "~5.8.3",
"typescript-eslint": "^8.44.0", "typescript-eslint": "^8.44.0",
"vite": "^7.1.7" "vite": "^7.1.7",
"vitest": "^4.0.18"
} }
} }

View File

@@ -0,0 +1,7 @@
import '@testing-library/jest-dom/vitest';
import { cleanup } from '@testing-library/react';
import { afterEach } from 'vitest';
afterEach(() => {
cleanup();
});

16
frontend/vitest.config.ts Normal file
View File

@@ -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'],
},
});