refactor(session): one session store for login, logout and 401

src/components/DeleteAccountCard.test.jsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
 import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
-import {MemoryRouter, Route, Routes} from 'react-router-dom';
+import {createMemoryRouter, RouterProvider} from 'react-router-dom';
 import RequireSession from './RequireSession.jsx';
 import {toast} from 'sonner';
 import DeleteAccountCard from './DeleteAccountCard.jsx';
@@ -14,14 +14,12 @@ const EMAIL = 'player@example.com';
 
 const deleteAnswers = (answer, routes = {}) => fetchRoutes({'DELETE /api/users/me': answer, ...routes});
 
-const renderCard = () => render(
-    <MemoryRouter initialEntries={['/settings']}>
-        <Routes>
-            <Route element={<RequireSession/>}><Route path="/settings" element={<DeleteAccountCard email={EMAIL}/>}/></Route>
-            <Route path="/" element={<p>landing</p>}/>
-            <Route path="/login" element={<p>login</p>}/>
-        </Routes>
-    </MemoryRouter>);
+// A data router like main.jsx, without the providers: their /me load would change the request order.
+const renderCard = () => render(<RouterProvider router={createMemoryRouter([
+    {element: <RequireSession/>, children: [{path: '/settings', element: <DeleteAccountCard email={EMAIL}/>}]},
+    {path: '/', element: <p>landing</p>},
+    {path: '/login', element: <p>login</p>},
+], {initialEntries: ['/settings']})}/>);
 
 const openAndFill = (email, password) => {
     fireEvent.click(screen.getByRole('button', {name: 'SETTINGS.DELETE_ACCOUNT.BUTTON'}));