From ab992c23557fbe53aa275532833f6fb51e260803 Mon Sep 17 00:00:00 2001
From: andrewjtgh <andrew_tan2000@hotmail.com>
Date: Wed, 16 Oct 2024 14:11:52 +0800
Subject: [PATCH] Suppress JSDOM errors

---
 __mocks__/styleMock.ts                  |  1 -
 test/(main)/quiz/practice/page.test.tsx |  9 +++++----
 vitest.config.ts                        | 14 +++++++-------
 vitest.setup.ts                         | 15 ++++++++++++++-
 4 files changed, 26 insertions(+), 13 deletions(-)
 delete mode 100644 __mocks__/styleMock.ts

diff --git a/__mocks__/styleMock.ts b/__mocks__/styleMock.ts
deleted file mode 100644
index a099545..0000000
--- a/__mocks__/styleMock.ts
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = {};
\ No newline at end of file
diff --git a/test/(main)/quiz/practice/page.test.tsx b/test/(main)/quiz/practice/page.test.tsx
index 0778ac6..816e087 100644
--- a/test/(main)/quiz/practice/page.test.tsx
+++ b/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');
diff --git a/vitest.config.ts b/vitest.config.ts
index ff09493..9fe72a6 100644
--- a/vitest.config.ts
+++ b/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
-});
\ No newline at end of file
+    plugins: [react()],
+});
diff --git a/vitest.setup.ts b/vitest.setup.ts
index bf14a40..5467221 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1,2 +1,15 @@
 // vitest.setup.ts
-import '@testing-library/jest-dom'; // Import this to use jest-dom matchers
\ No newline at end of file
+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);
+};
\ No newline at end of file