More converting to typescript

frontend/src/App.test.tsx

@@ -1,9 +1,10 @@
-// frontend/src/App.test.jsx
+// frontend/src/App.test.tsx
 
 import { render, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import App from './App';
 
+// Setup mocks
 const localStorageMock = {
     getItem: vi.fn(),
     setItem: vi.fn(),
@@ -11,15 +12,18 @@ const localStorageMock = {
     clear: vi.fn(),
     theme: 'light',
 };
-global.localStorage = localStorageMock;
 
-global.fetch = vi.fn(() =>
+const fetchMock = vi.fn(() =>
     Promise.resolve({
         ok: true,
         json: () => Promise.resolve({}),
     })
 );
 
+// Use Vitest's stubGlobal for type-safe environment mocking
+vi.stubGlobal('localStorage', localStorageMock);
+vi.stubGlobal('fetch', fetchMock);
+
 describe('App Component', () => {
     beforeEach(() => {
         vi.clearAllMocks();
@@ -27,7 +31,6 @@ describe('App Component', () => {
         document.documentElement.style.backgroundColor = '';
     });
 
-    // Notice the "async" keyword added here
     it('renders the App and applies the light theme by default', async () => {
         render(<App />);
 
@@ -38,7 +41,7 @@ describe('App Component', () => {
 
         // 2. Wait for the asynchronous fetch to finish so React doesn't complain
         await waitFor(() => {
-            expect(global.fetch).toHaveBeenCalled();
+            expect(fetchMock).toHaveBeenCalled();
         });
     });
 });

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-// frontend/src/App.jsx
+// frontend/src/App.tsx
 
 import { useEffect, useState } from 'react';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
@@ -8,7 +8,7 @@ import Login from './pages/Login';
 import Tournament from './pages/Tournament';
 
 export default function App() {
-  const [darkMode, setDarkMode] = useState(() => localStorage.theme === 'dark');
+  const [darkMode, setDarkMode] = useState<boolean>(() => localStorage.theme === 'dark');
 
   useEffect(() => {
     const root = window.document.documentElement;

frontend/src/main.jsx

@@ -1,11 +0,0 @@
-// frontend/src/main.jsx
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
-
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

frontend/src/main.tsx

@@ -0,0 +1,12 @@
+// frontend/src/main.tsx
+
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

frontend/src/vite-env.d.ts

@@ -0,0 +1,3 @@
+// frontend/src/vite-env.d.ts
+
+/// <reference types="vite/client" />