ToBePlayed-Frontend/src/test/renderWithProviders.jsx

import {render} from '@testing-library/react';
import {createMemoryRouter, Route, RouterProvider, Routes} from 'react-router-dom';
import {PreferencesProvider} from '../context/PreferencesContext.jsx';
import {CurrentUserProvider} from '../context/CurrentUserContext.jsx';
import RequireSession from '../components/RequireSession.jsx';

/**
 * Renders `ui` at `path` like main.jsx does: in a data router with both providers. `guarded` puts it under
 * RequireSession, as in App. `routes` adds other pages, e.g. `{'/login': <p>login</p>}`. The result has `router`,
 * so a test reads `router.state.location`.
 */
export function renderWithProviders(ui, {path = '*', entries = ['/'], routes = {}, guarded = false} = {}) {
    const page = <Route path={path} element={ui}/>;
    const router = createMemoryRouter([{
        path: '*',
        element: (
            <PreferencesProvider>
                <CurrentUserProvider>
                    <Routes>
                        {guarded ? <Route element={<RequireSession/>}>{page}</Route> : page}
                        {Object.entries(routes).map(([at, element]) => <Route key={at} path={at} element={element}/>)}
                    </Routes>
                </CurrentUserProvider>
            </PreferencesProvider>
        ),
    }], {initialEntries: entries});
    return {...render(<RouterProvider router={router}/>), router};
}