Fixed most tests using react-router-dom hooks

test/common/AsideMenu.test.tsx

@@ -3,6 +3,11 @@ import { Mock } from 'ts-mockery';
 import asideMenuCreator from '../../src/common/AsideMenu';
 import { ReachableServer } from '../../src/servers/data';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: jest.fn().mockReturnValue({ pathname: '' }),
+}));
+
 describe('<AsideMenu />', () => {
   let wrapped: ShallowWrapper;
   const DeleteServerButton = () => null;

test/common/Home.test.tsx

@@ -1,19 +1,18 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
-import { RouteChildrenProps } from 'react-router-dom';
 import Home, { HomeProps } from '../../src/common/Home';
 import { ServerWithId } from '../../src/servers/data';
 import { ShlinkLogo } from '../../src/common/img/ShlinkLogo';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn().mockReturnValue(jest.fn()),
+}));
+
 describe('<Home />', () => {
   let wrapped: ShallowWrapper;
-  const defaultProps = {
-    ...Mock.all<RouteChildrenProps>(),
-    resetSelectedServer: jest.fn(),
-    servers: {},
-  };
   const createComponent = (props: Partial<HomeProps> = {}) => {
-    const actualProps = { ...defaultProps, ...props };
+    const actualProps = { resetSelectedServer: jest.fn(), servers: {}, ...props };
 
     wrapped = shallow(<Home {...actualProps} />);
 

test/common/MainHeader.test.tsx

@@ -1,24 +1,28 @@
 import { shallow, ShallowWrapper } from 'enzyme';
-import { Mock } from 'ts-mockery';
-import { match } from 'react-router';
-import { History, Location } from 'history';
+import { useLocation } from 'react-router-dom';
 import { Collapse, NavbarToggler, NavLink } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import createMainHeader from '../../src/common/MainHeader';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: jest.fn().mockReturnValue({}),
+}));
+
 describe('<MainHeader />', () => {
   const ServersDropdown = () => null;
   const MainHeader = createMainHeader(ServersDropdown);
   let wrapper: ShallowWrapper;
 
   const createWrapper = (pathname = '') => {
-    const location = Mock.of<Location>({ pathname });
+    (useLocation as any).mockReturnValue({ pathname });
 
-    wrapper = shallow(<MainHeader history={Mock.all<History>()} location={location} match={Mock.all<match>()} />);
+    wrapper = shallow(<MainHeader />);
 
     return wrapper;
   };
 
+  afterEach(jest.clearAllMocks);
   afterEach(() => wrapper?.unmount());
 
   it('renders ServersDropdown', () => {

test/common/MenuLayout.test.tsx

@@ -1,34 +1,31 @@
 import { shallow, ShallowWrapper } from 'enzyme';
-import { History, Location } from 'history';
-import { match } from 'react-router'; // eslint-disable-line @typescript-eslint/no-unused-vars
-import { Route } from 'react-router-dom';
+import { Route, useParams } from 'react-router-dom';
 import { Mock } from 'ts-mockery';
 import createMenuLayout from '../../src/common/MenuLayout';
 import { NonReachableServer, NotFoundServer, ReachableServer, SelectedServer } from '../../src/servers/data';
 import { NoMenuLayout } from '../../src/common/NoMenuLayout';
 import { SemVer } from '../../src/utils/helpers/version';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: jest.fn().mockReturnValue({}),
+  useLocation: jest.fn().mockReturnValue({}),
+}));
+
 describe('<MenuLayout />', () => {
   const ServerError = jest.fn();
   const C = jest.fn();
   const MenuLayout = createMenuLayout(C, C, C, C, C, C, C, C, ServerError, C, C, C);
   let wrapper: ShallowWrapper;
   const createWrapper = (selectedServer: SelectedServer) => {
-    wrapper = shallow(
-      <MenuLayout
-        selectServer={jest.fn()}
-        selectedServer={selectedServer}
-        history={Mock.all<History>()}
-        location={Mock.all<Location>()}
-        match={Mock.of<match<{ serverId: string }>>({
-          params: { serverId: 'abc123' },
-        })}
-      />,
-    );
+    (useParams as any).mockReturnValue({ serverId: 'abc123' });
+
+    wrapper = shallow(<MenuLayout selectServer={jest.fn()} selectedServer={selectedServer} />);
 
     return wrapper;
   };
 
+  afterEach(jest.clearAllMocks);
   afterEach(() => wrapper?.unmount());
 
   it.each([
@@ -49,17 +46,18 @@ describe('<MenuLayout />', () => {
   });
 
   it.each([
-    [ '2.5.0' as SemVer, 8 ],
-    [ '2.6.0' as SemVer, 9 ],
-    [ '2.7.0' as SemVer, 9 ],
-    [ '2.8.0' as SemVer, 10 ],
-    [ '2.10.0' as SemVer, 10 ],
-    [ '3.0.0' as SemVer, 11 ],
+    [ '2.5.0' as SemVer, 9 ],
+    [ '2.6.0' as SemVer, 10 ],
+    [ '2.7.0' as SemVer, 10 ],
+    [ '2.8.0' as SemVer, 11 ],
+    [ '2.10.0' as SemVer, 11 ],
+    [ '3.0.0' as SemVer, 12 ],
   ])('has expected amount of routes based on selected server\'s version', (version, expectedAmountOfRoutes) => {
     const selectedServer = Mock.of<ReachableServer>({ version });
     const wrapper = createWrapper(selectedServer).dive();
     const routes = wrapper.find(Route);
 
     expect(routes).toHaveLength(expectedAmountOfRoutes);
+    expect(routes.findWhere((element) => element.prop('index'))).toHaveLength(1);
   });
 });

test/common/ScrollToTop.test.tsx

@@ -1,15 +1,18 @@
 import { shallow, ShallowWrapper } from 'enzyme';
-import { Mock } from 'ts-mockery';
-import { RouteComponentProps } from 'react-router';
 import createScrollToTop from '../../src/common/ScrollToTop';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: jest.fn().mockReturnValue({}),
+}));
+
 describe('<ScrollToTop />', () => {
   let wrapper: ShallowWrapper;
 
   beforeEach(() => {
     const ScrollToTop = createScrollToTop();
 
-    wrapper = shallow(<ScrollToTop {...Mock.all<RouteComponentProps>()}>Foobar</ScrollToTop>);
+    wrapper = shallow(<ScrollToTop>Foobar</ScrollToTop>);
   });
 
   afterEach(() => wrapper.unmount());