Set everything up to use hooks for reduc actions and state

test/__helpers__/setUpTest.ts

@@ -1,8 +0,0 @@
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import type { ReactElement } from 'react';
-
-export const renderWithEvents = (element: ReactElement) => ({
-  user: userEvent.setup(),
-  ...render(element),
-});

test/__helpers__/setUpTest.tsx

@@ -0,0 +1,28 @@
+import type { RenderOptions } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { PropsWithChildren, ReactElement } from 'react';
+import { Provider } from 'react-redux';
+import { setUpStore } from '../../src/container/store';
+import type { ShlinkState } from '../../src/container/types';
+
+export const renderWithEvents = (element: ReactElement, options?: RenderOptions) => ({
+  user: userEvent.setup(),
+  ...render(element, options),
+});
+
+export type RenderOptionsWithState = Omit<RenderOptions, 'wrapper'> & {
+  initialState?: Partial<ShlinkState>;
+};
+
+export const renderWithStore = (
+  element: ReactElement,
+  { initialState = {}, ...options }: RenderOptionsWithState = {},
+) => {
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <Provider store={setUpStore(initialState)}>
+      {children}
+    </Provider>
+  );
+  return renderWithEvents(element, { ...options, wrapper: Wrapper });
+};

test/app/App.test.tsx

@@ -1,8 +1,9 @@
-import { act, render, screen } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
 import { AppFactory } from '../../src/app/App';
 import { checkAccessibility } from '../__helpers__/accessibility';
+import { renderWithStore } from '../__helpers__/setUpTest';
 
 describe('<App />', () => {
   const App = AppFactory(
@@ -12,12 +13,11 @@ describe('<App />', () => {
       ShlinkWebComponentContainer: () => <>ShlinkWebComponentContainer</>,
       CreateServer: () => <>CreateServer</>,
       EditServer: () => <>EditServer</>,
-      Settings: () => <>SettingsComp</>,
       ManageServers: () => <>ManageServers</>,
       ShlinkVersionsContainer: () => <>ShlinkVersions</>,
     }),
   );
-  const setUp = async (activeRoute = '/') => act(() => render(
+  const setUp = async (activeRoute = '/') => act(() => renderWithStore(
     <MemoryRouter initialEntries={[{ pathname: activeRoute }]}>
       <App
         fetchServers={() => {}}
@@ -39,8 +39,8 @@ describe('<App />', () => {
   });
 
   it.each([
-    ['/settings/foo', 'SettingsComp'],
-    ['/settings/bar', 'SettingsComp'],
+    ['/settings/general', 'User interface'],
+    ['/settings/short-urls', 'Short URLs form'],
     ['/manage-servers', 'ManageServers'],
     ['/server/create', 'CreateServer'],
     ['/server/abc123/edit', 'EditServer'],

test/servers/reducers/selectedServer.test.ts

@@ -6,7 +6,7 @@ import {
   MAX_FALLBACK_VERSION,
   MIN_FALLBACK_VERSION,
   resetSelectedServer,
-  selectedServerReducerCreator,
+  selectedServerReducer as reducer,
   selectServer as selectServerCreator,
 } from '../../../src/servers/reducers/selectedServer';
 
@@ -15,7 +15,6 @@ describe('selectedServerReducer', () => {
   const health = vi.fn();
   const buildApiClient = vi.fn().mockReturnValue(fromPartial<ShlinkApiClient>({ health }));
   const selectServer = selectServerCreator(buildApiClient);
-  const { reducer } = selectedServerReducerCreator(selectServer);
 
   describe('reducer', () => {
     it('returns default when action is RESET_SELECTED_SERVER', () =>

test/settings/Settings.test.tsx

@@ -1,12 +1,12 @@
-import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router';
 import { Settings } from '../../src/settings/Settings';
 import { checkAccessibility } from '../__helpers__/accessibility';
+import { renderWithStore } from '../__helpers__/setUpTest';
 
 describe('<Settings />', () => {
-  const setUp = () => render(
+  const setUp = () => renderWithStore(
     <MemoryRouter>
-      <Settings settings={{}} setSettings={vi.fn()} />
+      <Settings />
     </MemoryRouter>,
   );