Suppress JSDOM errors

test/(main)/quiz/practice/page.test.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, act } from '@testing-library/react';
 import '@testing-library/jest-dom'; // Import jest-dom matchers
 import Page from '../../../../app/(main)/quiz/practice/page';
 import { useRouter } from 'next/navigation';
 import { QuizService } from '../../../../service/QuizService';
-import { QuestionsService } from '../../../../service/QuestionsService';
 
 // Mock the useRouter hook
 vi.mock('next/navigation', () => ({
@@ -45,8 +44,10 @@ describe('Page', () => {
             })
         ) as jest.Mock;
 
-        // Render the page
-        render(<Page />);
+        // Wrap the rendering and state updates in act()
+        await act(async () => {
+            render(<Page />);
+        });
 
         // Simulate loading the URL
         const response = await fetch('http://localhost:3000/quiz/practice');

vitest.config.ts

@@ -1,17 +1,17 @@
 import { defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
 
 export default defineConfig({
     resolve: {
         alias: {
-            '@': '/',
+            '@': resolve(__dirname, './'),
         },
     },
     test: {
-        globals: true, // Enable global APIs
-        environment: 'jsdom', // Use jsdom environment for browser-like testing
-        css: false,
-        setupFiles: './vitest.setup.ts', // Optional setup file
+        globals: true,
+        environment: 'jsdom',
+        setupFiles: './vitest.setup.ts',
     },
-    plugins: [react()], // Add the React plugin
-});
+    plugins: [react()],
+});

vitest.setup.ts

@@ -1,2 +1,15 @@
 // vitest.setup.ts
-import '@testing-library/jest-dom'; // Import this to use jest-dom matchers
+import '@testing-library/jest-dom'; // Import this to use jest-dom matchers
+
+// Suppress jsdom CSS parsing errors
+const suppressedErrors = /(Could not parse CSS stylesheet)/;
+
+const originalConsoleError = console.error;
+console.error = (...args) => {
+    if (args[0] && suppressedErrors.test(args[0])) {
+        // Suppress the specific jsdom CSS error
+        return;
+    }
+    // Call the original console.error for other errors
+    originalConsoleError(...args);
+};