test(frontend): update test imports to lib/ path, configure vitest.config.ts and vitest.setup.ts

frontend/application/components/__tests__/CartDrawer.test.tsx

@@ -3,14 +3,14 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 import CartDrawer from '../CartDrawer';
-import { useCartStore } from '../../store/cartStore';
+import { useCartStore } from '../../lib/store/cartStore';
-import { productService } from '../../services/productService';
+import { productService } from '../../lib/services/productService';
 
-vi.mock('../../store/cartStore', () => ({
+vi.mock('../../lib/store/cartStore', () => ({
   useCartStore: vi.fn(),
 }));
 
-vi.mock('../../services/productService', () => ({
+vi.mock('../../lib/services/productService', () => ({
   productService: {
     getProducts: vi.fn(),
   },
@@ -28,7 +28,7 @@ const mockProduct = {
 describe('CartDrawer', () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    vi.mocked(productService.getProducts).mockResolvedValue([]);
+    vi.mocked(productService.getProducts).mockResolvedValue({ data: [] } as any);
   });
 
   it('renders empty cart state when no items in cart', () => {

frontend/application/components/__tests__/FeaturedProducts.test.tsx

@@ -3,16 +3,16 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
 import FeaturedProducts from '../FeaturedProducts';
-import { productService } from '../../services/productService';
+import { productService } from '../../lib/services/productService';
-import { usePetStore } from '../../store/usePetStore';
+import { usePetStore } from '../../lib/store/usePetStore';
 
-vi.mock('../../services/productService', () => ({
+vi.mock('../../lib/services/productService', () => ({
   productService: {
     getFeaturedProducts: vi.fn(),
   },
 }));
 
-vi.mock('../../store/usePetStore', () => ({
+vi.mock('../../lib/store/usePetStore', () => ({
   usePetStore: vi.fn(),
 }));
 

frontend/application/components/__tests__/Header.test.tsx

@@ -3,19 +3,19 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 import Header from '../Header';
-import { useCartStore } from '../../store/cartStore';
+import { useCartStore } from '../../lib/store/cartStore';
-import { usePetStore } from '../../store/usePetStore';
+import { usePetStore } from '../../lib/store/usePetStore';
-import { useUserStore } from '../../store/userStore';
+import { useUserStore } from '../../lib/store/userStore';
 
-vi.mock('../../store/cartStore', () => ({
+vi.mock('../../lib/store/cartStore', () => ({
   useCartStore: vi.fn(),
 }));
 
-vi.mock('../../store/usePetStore', () => ({
+vi.mock('../../lib/store/usePetStore', () => ({
   usePetStore: vi.fn(),
 }));
 
-vi.mock('../../store/userStore', () => ({
+vi.mock('../../lib/store/userStore', () => ({
   useUserStore: vi.fn(),
 }));
 

frontend/application/components/__tests__/Hero.test.tsx

@@ -3,9 +3,9 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 import Hero from '../Hero';
-import { useSettingsStore } from '../../store/settingsStore';
+import { useSettingsStore } from '../../lib/store/settingsStore';
 
-vi.mock('../../store/settingsStore', () => ({
+vi.mock('../../lib/store/settingsStore', () => ({
   useSettingsStore: vi.fn(),
 }));
 

frontend/application/components/__tests__/Tooltip.test.tsx

@@ -3,9 +3,9 @@ import { describe, it, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 import Tooltip from '../Tooltip';
-import { useSettingsStore } from '../../store/settingsStore';
+import { useSettingsStore } from '../../lib/store/settingsStore';
 
-vi.mock('../../store/settingsStore', () => ({
+vi.mock('../../lib/store/settingsStore', () => ({
   useSettingsStore: vi.fn(),
 }));
 

frontend/application/package.json

@@ -20,12 +20,17 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^6.0.5",
     "eslint": "^9",
     "eslint-config-next": "16.2.9",
+    "jsdom": "^29.1.1",
     "tailwindcss": "^4",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^4.1.10"
   }
 }

frontend/application/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./vitest.setup.ts'],
+  },
+});

frontend/application/vitest.setup.ts

@@ -0,0 +1,25 @@
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+class MockIntersectionObserver {
+  observe = vi.fn();
+  disconnect = vi.fn();
+  unobserve = vi.fn();
+}
+
+Object.defineProperty(window, 'IntersectionObserver', {
+  writable: true,
+  configurable: true,
+  value: MockIntersectionObserver,
+});
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+    back: vi.fn(),
+  }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}));