Replace usage of injected selectedServer with useSelectedServer

test/__helpers__/MemoryRouterWithParams.tsx

@@ -1,23 +0,0 @@
-import type { FC, PropsWithChildren } from 'react';
-import { useMemo } from 'react';
-import { MemoryRouter, Route, Routes } from 'react-router';
-
-export type MemoryRouterWithParamsProps = PropsWithChildren<{
-  params: Record<string, string>;
-}>;
-
-/**
- * Wrap any component using useParams() with MemoryRouterWithParams, in order to determine wat the hook should return
- */
-export const MemoryRouterWithParams: FC<MemoryRouterWithParamsProps> = ({ children, params }) => {
-  const pathname = useMemo(() => `/${Object.values(params).join('/')}`, [params]);
-  const pathPattern = useMemo(() => `/:${Object.keys(params).join('/:')}`, [params]);
-
-  return (
-    <MemoryRouter>
-      <Routes location={{ pathname }}>
-        <Route path={pathPattern} element={children} />
-      </Routes>
-    </MemoryRouter>
-  );
-};

test/common/ShlinkVersionsContainer.test.tsx

@@ -1,12 +1,15 @@
-import { render } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { ShlinkVersionsContainer } from '../../src/common/ShlinkVersionsContainer';
 import type { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
+import { renderWithStore } from '../__helpers__/setUpTest';
 
 describe('<ShlinkVersionsContainer />', () => {
-  const setUp = (selectedServer: SelectedServer = null) => render(
-    <ShlinkVersionsContainer selectedServer={selectedServer} />,
+  const setUp = (selectedServer: SelectedServer = null) => renderWithStore(
+    <ShlinkVersionsContainer />,
+    {
+      initialState: { selectedServer },
+    },
   );
 
   it.each([

test/common/ShlinkWebComponentContainer.test.tsx

@@ -1,9 +1,9 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { ShlinkWebComponentContainerFactory } from '../../src/common/ShlinkWebComponentContainer';
 import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
-import { MemoryRouterWithParams } from '../__helpers__/MemoryRouterWithParams';
+import { renderWithStore } from '../__helpers__/setUpTest';
 
 vi.mock('@shlinkio/shlink-web-component', () => ({
   ShlinkSidebarVisibilityProvider: ({ children }: any) => children,
@@ -17,10 +17,11 @@ describe('<ShlinkWebComponentContainer />', () => {
     TagColorsStorage: fromPartial({}),
     ServerError: () => <>ServerError</>,
   }));
-  const setUp = (selectedServer: SelectedServer) => render(
-    <MemoryRouterWithParams params={{ serverId: 'abc123' }}>
-      <ShlinkWebComponentContainer selectServer={vi.fn()} selectedServer={selectedServer} settings={{}} />
-    </MemoryRouterWithParams>,
+  const setUp = (selectedServer: SelectedServer) => renderWithStore(
+    <ShlinkWebComponentContainer settings={{}} />,
+    {
+      initialState: { selectedServer },
+    },
   );
 
   it('passes a11y checks', () => checkAccessibility(setUp(fromPartial({ version: '3.0.0' }))));

test/servers/EditServer.test.tsx

@@ -5,7 +5,7 @@ import { Router } from 'react-router';
 import type { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { EditServerFactory } from '../../src/servers/EditServer';
 import { checkAccessibility } from '../__helpers__/accessibility';
-import { renderWithEvents } from '../__helpers__/setUpTest';
+import { renderWithStore } from '../__helpers__/setUpTest';
 
 describe('<EditServer />', () => {
   const ServerError = vi.fn();
@@ -21,10 +21,13 @@ describe('<EditServer />', () => {
     const history = createMemoryHistory({ initialEntries: ['/foo', '/bar'] });
     return {
       history,
-      ...renderWithEvents(
+      ...renderWithStore(
         <Router location={history.location} navigator={history}>
-          <EditServer editServer={editServerMock} selectedServer={selectedServer} selectServer={vi.fn()} />
+          <EditServer editServer={editServerMock} />
         </Router>,
+        {
+          initialState: { selectedServer },
+        },
       ),
     };
   };

test/servers/ServersDropdown.test.tsx

@@ -4,7 +4,7 @@ import { MemoryRouter } from 'react-router';
 import type { ServersMap } from '../../src/servers/data';
 import { ServersDropdown } from '../../src/servers/ServersDropdown';
 import { checkAccessibility } from '../__helpers__/accessibility';
-import { renderWithEvents } from '../__helpers__/setUpTest';
+import { renderWithStore } from '../__helpers__/setUpTest';
 
 describe('<ServersDropdown />', () => {
   const fallbackServers: ServersMap = {
@@ -12,12 +12,15 @@ describe('<ServersDropdown />', () => {
     '2b': fromPartial({ name: 'bar', id: '2b' }),
     '3c': fromPartial({ name: 'baz', id: '3c' }),
   };
-  const setUp = (servers: ServersMap = fallbackServers) => renderWithEvents(
+  const setUp = (servers: ServersMap = fallbackServers) => renderWithStore(
     <MemoryRouter>
       <ul role="menu">
-        <ServersDropdown servers={servers} selectedServer={null} />
+        <ServersDropdown servers={servers} />
       </ul>
     </MemoryRouter>,
+    {
+      initialState: { selectedServer: null },
+    },
   );
 
   it('passes a11y checks', async () => {

test/servers/helpers/ServerError.test.tsx

@@ -1,16 +1,20 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
 import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../../src/servers/data';
 import { ServerErrorFactory } from '../../../src/servers/helpers/ServerError';
 import { checkAccessibility } from '../../__helpers__/accessibility';
+import { renderWithStore } from '../../__helpers__/setUpTest';
 
 describe('<ServerError />', () => {
   const ServerError = ServerErrorFactory(fromPartial({ DeleteServerButton: () => null }));
-  const setUp = (selectedServer: SelectedServer) => render(
+  const setUp = (selectedServer: SelectedServer) => renderWithStore(
     <MemoryRouter>
-      <ServerError servers={{}} selectedServer={selectedServer} />
+      <ServerError servers={{}} />
     </MemoryRouter>,
+    {
+      initialState: { selectedServer },
+    },
   );
 
   it.each([