### src/setupTests.ts

```typescript
import '@testing-library/jest-dom';
import { vi } from 'vitest';

/**
 * Mock firebase/functions
 */
vi.mock('firebase/functions', async (importOriginal) => {
    const actual = await importOriginal();
    return {
        ...actual,
        getFunctions: vi.fn(() => {
            return {};
        }),
        httpsCallable: vi.fn(() => {
            return vi.fn();
        }),
        connectFunctionsEmulator: vi.fn(),
    };
});

/**
 * Mock firebase/auth
 */
vi.mock('firebase/auth', async (importOriginal) => {
    const actual = await importOriginal();
    return {
        ...actual,
        getAuth: vi.fn(() => {
            return {
                currentUser: null,
                onAuthStateChanged: vi.fn(),
            };
        }),
        signInAnonymously: vi.fn(),
        connectAuthEmulator: vi.fn(),
    };
});

/**
 * Mock firebase/firestore
 */
vi.mock('firebase/firestore', async (importOriginal) => {
    const actual = await importOriginal();
    return {
        ...actual,
        getFirestore: vi.fn(() => {
            return {};
        }),
        connectFirestoreEmulator: vi.fn(),
    };
});

// Mock useNavigate from react-router-dom
const mockNavigate = vi.fn();
vi.mock('react-router-dom', async (importOriginal) => {
    const actual = await importOriginal();
    return {
        ...actual,
        useNavigate: () => mockNavigate,
    };
});
```

### src/pages/lobbyScreen/LobbyScreen.tsx

```typescript
import { useParams } from 'react-router-dom';
import PlayerList from './PLayerList';
import TeamManagement from './TeamManagement';
import GameSettings from './GameSettings';
import useLobbyData from './useLobbyData';

const LobbyScreen: React.FC = () => {
    const { gameId } = useParams<{ gameId: string }>();

    const { game, players, isHost, updatePlayerStatus, leaveGame, startGame } = useLobbyData(gameId);

    if (!game) {
        return <div>Loading...</div>;
    }

    return (
        <div className="container mx-auto p-4">
            <h1 className="text-2xl font-bold mb-4">Game Lobby</h1>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <PlayerList players={players} updatePlayerStatus={updatePlayerStatus} />
                <TeamManagement teams={game.teams} />
            </div>
            {isHost && <GameSettings game={game} handleStartGame={startGame} />}
            <button
                onClick={leaveGame}
                className="mt-4 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
            >
                Leave Game
            </button>
        </div>
    );
};

export default LobbyScreen;
```

### src/pages/lobbyScreen/LobbyScreen.test.tsx

```typescript
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import { vi } from 'vitest';
import LobbyScreen from './LobbyScreen';
import useLobbyData from './useLobbyData';

// Mock the useLobbyData hook
vi.mock('./useLobbyData');

// Mock useParams
vi.mock('react-router-dom', async () => {
    const actual = await vi.importActual('react-router-dom');
    return {
        ...actual,
        useParams: () => ({ gameId: 'testGameId' }),
        useNavigate: () => vi.fn(),
    };
});

describe('LobbyScreen Component', () => {
    const mockLeaveGame = vi.fn();
    const mockUpdatePlayerStatus = vi.fn();
    const mockStartGame = vi.fn();

    beforeEach(() => {
        vi.clearAllMocks();
        (useLobbyData as vi.Mock).mockReturnValue({
            game: {
                id: 'testGameId',
                teams: [{ teamName: 'Team 1', players: [{ name: 'Player 1', isReady: false }] }],
                numberOfTeams: 2,
                playersPerTeam: 2,
                numberOfRounds: 3,
                jokerUsage: true,
            },
            players: [{ name: 'Player 1', isReady: false }],
            isHost: true,
            updatePlayerStatus: mockUpdatePlayerStatus,
            leaveGame: mockLeaveGame,
            startGame: mockStartGame,
        });
    });

    it('renders lobby screen correctly', () => {
        render(
            <BrowserRouter>
                <LobbyScreen />
            </BrowserRouter>
        );

        expect(screen.getByText('Game Lobby')).toBeInTheDocument();
        expect(screen.getByText('Players (1)')).toBeInTheDocument();
        expect(screen.getByText('Teams')).toBeInTheDocument();
        expect(screen.getByText('Game Settings')).toBeInTheDocument();
        expect(screen.getByText('Leave Game')).toBeInTheDocument();
    });

    it('calls leaveGame function when Leave Game button is clicked', async () => {
        render(
            <BrowserRouter>
                <LobbyScreen />
            </BrowserRouter>
        );

        const leaveButton = screen.getByText('Leave Game');
        fireEvent.click(leaveButton);

        await waitFor(() => {
            expect(mockLeaveGame).toHaveBeenCalledTimes(1);
        });
    });

    it('does not render Game Settings for non-host players', () => {
        (useLobbyData as vi.Mock).mockReturnValue({
            game: {
                id: 'testGameId',
                teams: [{ teamName: 'Team 1', players: [{ name: 'Player 1', isReady: false }] }],
            },
            players: [{ name: 'Player 1', isReady: false }],
            isHost: false,
            updatePlayerStatus: mockUpdatePlayerStatus,
            leaveGame: mockLeaveGame,
            startGame: mockStartGame,
        });

        render(
            <BrowserRouter>
                <LobbyScreen />
            </BrowserRouter>
        );

        expect(screen.queryByText('Game Settings')).not.toBeInTheDocument();
    });

    it('displays loading state when game data is not available', () => {
        (useLobbyData as vi.Mock).mockReturnValue({
            game: null,
            players: [],
            isHost: false,
            updatePlayerStatus: mockUpdatePlayerStatus,
            leaveGame: mockLeaveGame,
            startGame: mockStartGame,
        });

        render(
            <BrowserRouter>
                <LobbyScreen />
            </BrowserRouter>
        );

        expect(screen.getByText('Loading...')).toBeInTheDocument();
    });

    it('calls startGame function when Start Game button is clicked by host', async () => {
        render(
            <BrowserRouter>
                <LobbyScreen />
            </BrowserRouter>
        );

        const startButton = screen.getByText('Start Game');
        fireEvent.click(startButton);

        await waitFor(() => {
            expect(mockStartGame).toHaveBeenCalledTimes(1);
        });
    });

    it('updates player status when ready button is clicked', async () => {
        render(
            <BrowserRouter>
                <LobbyScreen />
            </BrowserRouter>
        );

        const readyButton = screen.getByText('Are you Ready?');
        fireEvent.click(readyButton);

        await waitFor(() => {
            expect(mockUpdatePlayerStatus).toHaveBeenCalledWith('Player 1', true);
        });
    });

    it('renders correct number of players and teams', () => {
        (useLobbyData as vi.Mock).mockReturnValue({
            game: {
                id: 'testGameId',
                teams: [
                    { teamName: 'Team 1', players: [{ name: 'Player 1', isReady: false }] },
                    { teamName: 'Team 2', players: [{ name: 'Player 2', isReady: true }] },
                ],
                numberOfTeams: 2,
                playersPerTeam: 2,
                numberOfRounds: 3,
                jokerUsage: true,
            },
            players: [
                { name: 'Player 1', isReady: false },
                { name: 'Player 2', isReady: true },
            ],
            isHost: true,
            updatePlayerStatus: mockUpdatePlayerStatus,
            leaveGame: mockLeaveGame,
            startGame: mockStartGame,
        });

        render(
            <BrowserRouter>
                <LobbyScreen />
            </BrowserRouter>
        );

        expect(screen.getByText('Players (2)')).toBeInTheDocument();
        expect(screen.getAllByRole('listitem')).toHaveLength(4); // 2 in PlayerList + 2 in TeamManagement
        expect(screen.getByText('Team 1')).toBeInTheDocument();
        expect(screen.getByText('Team 2')).toBeInTheDocument();
    });
});
```

----

fix the test files. it is failling