test: improve coverage for main.tsx (#370)

Author: Sparshagarwal29

frontend/src/__tests__/main.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-
 jest.mock('../App.tsx', () => ({
   __esModule: true,
   default: () => <div data-testid="app">App</div>,
@@ -12,37 +11,28 @@ jest.mock('@/components/utils/ThemeProvider.tsx', () => ({
   ),
 }));
 
-describe('main.tsx', () => {
-  beforeEach(() => {
-    document.body.innerHTML = '<div id="root"></div>';
-  });
+describe('main.tsx bootstrap', () => {
+  const renderMock = jest.fn();
 
-  it('has root element available for React app', () => {
-    const rootElement = document.getElementById('root');
-    expect(rootElement).toBeInTheDocument();
-    expect(rootElement).not.toBeNull();
-  });
+  beforeEach(() => {
+    jest.spyOn(ReactDOM, 'createRoot').mockReturnValue({
+      render: renderMock,
+    } as any);
 
-  it('can create React root without errors', () => {
-    const rootElement = document.getElementById('root');
-    expect(() => {
-      ReactDOM.createRoot(rootElement!);
-    }).not.toThrow();
+    document.body.innerHTML = '<div id="root"></div>';
   });
 
-  it('imports required React dependencies', () => {
-    expect(React).toBeDefined();
-    expect(ReactDOM).toBeDefined();
-    expect(React.StrictMode).toBeDefined();
+  afterEach(() => {
+    jest.restoreAllMocks();
+    document.body.innerHTML = '';
   });
 
-  it('verifies App and ThemeProvider components are available', () => {
-    const App = require('../App.tsx').default;
-    const { ThemeProvider } = require('@/components/utils/ThemeProvider.tsx');
+  it('creates React root and renders the app', async () => {
+    await import('../main.tsx');
 
-    expect(App).toBeDefined();
-    expect(ThemeProvider).toBeDefined();
-    expect(typeof App).toBe('function');
-    expect(typeof ThemeProvider).toBe('function');
+    expect(ReactDOM.createRoot).toHaveBeenCalledWith(
+      document.getElementById('root')
+    );
+    expect(renderMock).toHaveBeenCalled();
   });
 });