test: data router, one render helper, fetchRoutes in every test

src/test/renderWithProviders.jsx

@@ -0,0 +1,28 @@
+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};
+}