test(ui): add test coverage for ui components

d4f81b746

package.json

@@ -33,6 +33,10 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jsdom": "^28.0.3",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "eslint": "^10.2.1",
@@ -40,6 +44,7 @@
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.5.0",
     "husky": "^9.1.7",
+    "jsdom": "^29.1.1",
     "lint-staged": "^16.4.0",
     "prettier": "^3.8.3",
     "typescript-eslint": "^8.58.2",

src/components/ui/Button.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import { Button } from './Button';
+import { describe, it, expect } from 'vitest';
+
+describe('Button component', () => {
+  it('renders children correctly', () => {
+    render(<Button>Click Me</Button>);
+    expect(screen.getByText('Click Me')).toBeInTheDocument();
+  });
+
+  it('shows loading state when loading prop is true', () => {
+    render(<Button loading>Submit</Button>);
+    expect(screen.getByText('⏳')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+});

src/test/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite';
+import { defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 import tailwindcss from '@tailwindcss/vite';
 import path from 'path';
@@ -14,4 +14,9 @@ export default defineConfig({
     port: 5173,
     open: true,
   },
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    globals: true,
+  },
 });