Do not inject servers state or actions

test/common/Home.test.tsx

@@ -1,15 +1,19 @@
-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 { Home } from '../../src/common/Home';
 import type { ServersMap, ServerWithId } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
+import { renderWithStore } from '../__helpers__/setUpTest';
 
 describe('<Home />', () => {
-  const setUp = (servers: ServersMap = {}) => render(
+  const setUp = (servers: ServersMap = {}) => renderWithStore(
     <MemoryRouter>
-      <Home servers={servers} />
+      <Home />
     </MemoryRouter>,
+    {
+      initialState: { servers },
+    },
   );
 
   it('passes a11y checks', () => checkAccessibility(

test/common/MainHeader.test.tsx

@@ -1,21 +1,16 @@
 import { screen } from '@testing-library/react';
-import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router';
-import { MainHeaderFactory } from '../../src/common/MainHeader';
+import { MainHeader } from '../../src/common/MainHeader';
 import { checkAccessibility } from '../__helpers__/accessibility';
-import { renderWithEvents } from '../__helpers__/setUpTest';
+import { renderWithStore } from '../__helpers__/setUpTest';
 
 describe('<MainHeader />', () => {
-  const MainHeader = MainHeaderFactory(fromPartial({
-    // Fake this component as a li[role="menuitem"], as it gets rendered inside a ul[role="menu"]
-    ServersDropdown: () => <li role="menuitem">ServersDropdown</li>,
-  }));
   const setUp = (pathname = '') => {
     const history = createMemoryHistory();
     history.push(pathname);
 
-    return renderWithEvents(
+    return renderWithStore(
       <Router location={history.location} navigator={history}>
         <MainHeader />
       </Router>,
@@ -26,7 +21,7 @@ describe('<MainHeader />', () => {
 
   it('renders ServersDropdown', () => {
     setUp();
-    expect(screen.getByText('ServersDropdown')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Servers' })).toBeInTheDocument();
   });
 
   it.each([

test/common/ShlinkWebComponentContainer.test.tsx

@@ -1,5 +1,6 @@
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
+import { MemoryRouter } from 'react-router';
 import { ShlinkWebComponentContainerFactory } from '../../src/common/ShlinkWebComponentContainer';
 import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
@@ -15,12 +16,13 @@ describe('<ShlinkWebComponentContainer />', () => {
   const ShlinkWebComponentContainer = ShlinkWebComponentContainerFactory(fromPartial({
     buildShlinkApiClient: vi.fn().mockReturnValue(fromPartial({})),
     TagColorsStorage: fromPartial({}),
-    ServerError: () => <>ServerError</>,
   }));
   const setUp = (selectedServer: SelectedServer) => renderWithStore(
-    <ShlinkWebComponentContainer settings={{}} />,
+    <MemoryRouter>
+      <ShlinkWebComponentContainer settings={{}} />
+    </MemoryRouter>,
     {
-      initialState: { selectedServer },
+      initialState: { selectedServer, servers: {} },
     },
   );
 
@@ -30,18 +32,20 @@ describe('<ShlinkWebComponentContainer />', () => {
     setUp(null);
 
     expect(screen.getByText('Loading...')).toBeInTheDocument();
-    expect(screen.queryByText('ServerError')).not.toBeInTheDocument();
     expect(screen.queryByText('ShlinkWebComponent')).not.toBeInTheDocument();
   });
 
   it.each([
-    [fromPartial<NotFoundServer>({ serverNotFound: true })],
-    [fromPartial<NonReachableServer>({ serverNotReachable: true })],
-  ])('shows error for non reachable servers', (selectedServer) => {
+    [fromPartial<NotFoundServer>({ serverNotFound: true }), 'Could not find this Shlink server.'],
+    [
+      fromPartial<NonReachableServer>({ id: 'foo', serverNotReachable: true }),
+      /Could not connect to this Shlink server/,
+    ],
+  ])('shows error for non reachable servers', (selectedServer, expectedError) => {
     setUp(selectedServer);
 
     expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-    expect(screen.getByText('ServerError')).toBeInTheDocument();
+    expect(screen.getByText(expectedError)).toBeInTheDocument();
     expect(screen.queryByText('ShlinkWebComponent')).not.toBeInTheDocument();
   });
 
@@ -49,7 +53,6 @@ describe('<ShlinkWebComponentContainer />', () => {
     setUp(fromPartial({ version: '3.0.0' }));
 
     expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-    expect(screen.queryByText('ServerError')).not.toBeInTheDocument();
     expect(screen.getByText('ShlinkWebComponent')).toBeInTheDocument();
   });
 });