Initial vitest setup

app/package.json

@@ -9,7 +9,9 @@
     "preview": "vite preview",
     "type-check": "tsc --noEmit",
     "lint": "eslint . --ext .ts,.tsx",
-    "lint:fix": "eslint . --ext .ts,.tsx --fix"
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",
@@ -54,6 +56,8 @@
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.9",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^22.14.0",
     "@types/react": "^18.3.20",
@@ -65,13 +69,15 @@
     "eslint": "^9.27.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "jsdom": "^26.1.0",
     "postcss": "^8.4.47",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
     "sass": "^1.80.4",
     "typescript": "^5.8.2",
     "vite": "^6.2.4",
-    "vite-plugin-compression2": "^1.3.0"
+    "vite-plugin-compression2": "^1.3.0",
+    "vitest": "^3.1.4"
   },
   "browserslist": {
     "production": [

app/src/App.test.tsx

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@/test/utils';
+
+describe('Testing Setup Sanity Check', () => {
+  it('should render a basic component', () => {
+    const TestComponent = () => <div>Hello, World!</div>;
+
+    const { getByText } = render(<TestComponent />);
+
+    expect(getByText('Hello, World!')).toBeInTheDocument();
+  });
+
+  it('should have access to global API_BASE_URL', () => {
+    expect(window.API_BASE_URL).toBe('http://localhost:8080/api/v1');
+  });
+});

app/src/test/setup.ts

@@ -0,0 +1,30 @@
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+// Mock window.API_BASE_URL
+Object.defineProperty(window, 'API_BASE_URL', {
+  value: 'http://localhost:8080/api/v1',
+  writable: true,
+});
+
+// Mock matchMedia - required for Mantine components
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+// Mock ResizeObserver - sometimes needed for Mantine components
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));

app/src/test/utils.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, type RenderOptions } from '@testing-library/react';
+import { MantineProvider } from '@mantine/core';
+
+// Create a custom render function that includes Mantine provider
+const AllTheProviders: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <MantineProvider defaultColorScheme="light">{children}</MantineProvider>
+  );
+};
+
+const customRender = (
+  ui: React.ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>
+) => render(ui, { wrapper: AllTheProviders, ...options });
+
+// Re-export everything
+export * from '@testing-library/react';
+export { customRender as render };

app/tsconfig.json

@@ -53,7 +53,7 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "vitest.config.ts"],
   "exclude": ["node_modules", "dist"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

app/vitest.config.ts

@@ -0,0 +1,21 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  define: {
+    'window.API_BASE_URL': JSON.stringify('http://localhost:8080/api/v1'),
+  },
+});