Fixed most tests using react-router-dom hooks

test/short-urls/EditShortUrl.test.tsx

@@ -1,7 +1,6 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
-import { History, Location } from 'history';
-import { match } from 'react-router'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import { useLocation, useParams } from 'react-router-dom';
 import { EditShortUrl as createEditShortUrl } from '../../src/short-urls/EditShortUrl';
 import { Settings } from '../../src/settings/reducers/settings';
 import { ShortUrlDetail } from '../../src/short-urls/reducers/shortUrlDetail';
@@ -9,29 +8,32 @@ import { ShortUrlEdition } from '../../src/short-urls/reducers/shortUrlEdition';
 import { ShlinkApiError } from '../../src/api/ShlinkApiError';
 import { ShortUrl } from '../../src/short-urls/data';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn().mockReturnValue(jest.fn()),
+  useParams: jest.fn().mockReturnValue({}),
+  useLocation: jest.fn().mockReturnValue({}),
+}));
+
 describe('<EditShortUrl />', () => {
   let wrapper: ShallowWrapper;
   const ShortUrlForm = () => null;
-  const goBack = jest.fn();
   const getShortUrlDetail = jest.fn();
   const editShortUrl = jest.fn(async () => Promise.resolve());
   const shortUrlCreation = { validateUrls: true };
+  const EditShortUrl = createEditShortUrl(ShortUrlForm);
   const createWrapper = (detail: Partial<ShortUrlDetail> = {}, edition: Partial<ShortUrlEdition> = {}) => {
-    const EditSHortUrl = createEditShortUrl(ShortUrlForm);
+    (useParams as any).mockReturnValue({ shortCode: 'the_base_url' });
+    (useLocation as any).mockReturnValue({ search: '' });
 
     wrapper = shallow(
-      <EditSHortUrl
+      <EditShortUrl
         settings={Mock.of<Settings>({ shortUrlCreation })}
         selectedServer={null}
         shortUrlDetail={Mock.of<ShortUrlDetail>(detail)}
         shortUrlEdition={Mock.of<ShortUrlEdition>(edition)}
         getShortUrlDetail={getShortUrlDetail}
         editShortUrl={editShortUrl}
-        history={Mock.of<History>({ goBack })}
-        location={Mock.all<Location>()}
-        match={Mock.of<match<{ shortCode: string }>>({
-          params: { shortCode: 'the_base_url' },
-        })}
       />,
     );
 

test/short-urls/SearchBar.test.tsx

@@ -1,29 +1,30 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
-import { History, Location } from 'history';
-import { match } from 'react-router';
 import { formatISO } from 'date-fns';
-import filteringBarCreator, { ShortUrlsFilteringProps } from '../../src/short-urls/ShortUrlsFilteringBar';
+import { useLocation, useNavigate } from 'react-router-dom';
+import filteringBarCreator from '../../src/short-urls/ShortUrlsFilteringBar';
 import SearchField from '../../src/utils/SearchField';
 import Tag from '../../src/tags/helpers/Tag';
 import { DateRangeSelector } from '../../src/utils/dates/DateRangeSelector';
 import ColorGenerator from '../../src/utils/services/ColorGenerator';
-import { ShortUrlListRouteParams } from '../../src/short-urls/helpers/hooks';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+  useParams: jest.fn().mockReturnValue({ serverId: '1' }),
+  useLocation: jest.fn().mockReturnValue({}),
+}));
 
 describe('<ShortUrlsFilteringBar />', () => {
   let wrapper: ShallowWrapper;
   const ShortUrlsFilteringBar = filteringBarCreator(Mock.all<ColorGenerator>());
-  const push = jest.fn();
+  const navigate = jest.fn();
   const now = new Date();
-  const createWrapper = (props: Partial<ShortUrlsFilteringProps> = {}) => {
-    wrapper = shallow(
-      <ShortUrlsFilteringBar
-        history={Mock.of<History>({ push })}
-        location={Mock.of<Location>({ search: '' })}
-        match={Mock.of<match<ShortUrlListRouteParams>>({ params: { serverId: '1' } })}
-        {...props}
-      />,
-    );
+  const createWrapper = (search = '') => {
+    (useLocation as any).mockReturnValue({ search });
+    (useNavigate as any).mockReturnValue(navigate);
+
+    wrapper = shallow(<ShortUrlsFilteringBar />);
 
     return wrapper;
   };
@@ -44,7 +45,7 @@ describe('<ShortUrlsFilteringBar />', () => {
     [ '', 0 ],
     [ 'foo=bar', 0 ],
   ])('renders the proper amount of tags', (search, expectedTagComps) => {
-    const wrapper = createWrapper({ location: Mock.of<Location>({ search }) });
+    const wrapper = createWrapper(search);
 
     expect(wrapper.find(Tag)).toHaveLength(expectedTagComps);
   });
@@ -53,18 +54,18 @@ describe('<ShortUrlsFilteringBar />', () => {
     const wrapper = createWrapper();
     const searchField = wrapper.find(SearchField);
 
-    expect(push).not.toHaveBeenCalled();
+    expect(navigate).not.toHaveBeenCalled();
     searchField.simulate('change', 'search-term');
-    expect(push).toHaveBeenCalledWith('/server/1/list-short-urls/1?search=search-term');
+    expect(navigate).toHaveBeenCalledWith('/server/1/list-short-urls/1?search=search-term');
   });
 
   it('redirects to first page when a tag is removed', () => {
-    const wrapper = createWrapper({ location: Mock.of<Location>({ search: 'tags=foo,bar' }) });
+    const wrapper = createWrapper('tags=foo,bar');
     const tag = wrapper.find(Tag).first();
 
-    expect(push).not.toHaveBeenCalled();
+    expect(navigate).not.toHaveBeenCalled();
     tag.simulate('close');
-    expect(push).toHaveBeenCalledWith('/server/1/list-short-urls/1?tags=bar');
+    expect(navigate).toHaveBeenCalledWith('/server/1/list-short-urls/1?tags=bar');
   });
 
   it.each([
@@ -78,8 +79,8 @@ describe('<ShortUrlsFilteringBar />', () => {
     const wrapper = createWrapper();
     const dateRange = wrapper.find(DateRangeSelector);
 
-    expect(push).not.toHaveBeenCalled();
+    expect(navigate).not.toHaveBeenCalled();
     dateRange.simulate('datesChange', dates);
-    expect(push).toHaveBeenCalledWith(`/server/1/list-short-urls/1?${expectedQuery}`);
+    expect(navigate).toHaveBeenCalledWith(`/server/1/list-short-urls/1?${expectedQuery}`);
   });
 });

test/short-urls/ShortUrlsList.test.tsx

@@ -1,8 +1,7 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { ReactElement } from 'react';
 import { Mock } from 'ts-mockery';
-import { History, Location } from 'history';
-import { match } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import shortUrlsListCreator from '../../src/short-urls/ShortUrlsList';
 import { ShortUrlsOrderableFields, ShortUrl, ShortUrlsOrder } from '../../src/short-urls/data';
 import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
@@ -10,15 +9,21 @@ import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reduce
 import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
 import Paginator from '../../src/short-urls/Paginator';
 import { ReachableServer } from '../../src/servers/data';
-import { ShortUrlListRouteParams } from '../../src/short-urls/helpers/hooks';
 import { Settings } from '../../src/settings/reducers/settings';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn().mockReturnValue(jest.fn()),
+  useParams: jest.fn().mockReturnValue({}),
+  useLocation: jest.fn().mockReturnValue({ search: '?tags=test%20tag&search=example.com' }),
+}));
+
 describe('<ShortUrlsList />', () => {
   let wrapper: ShallowWrapper;
   const ShortUrlsTable = () => null;
   const ShortUrlsFilteringBar = () => null;
   const listShortUrlsMock = jest.fn();
-  const push = jest.fn();
+  const navigate = jest.fn();
   const shortUrlsList = Mock.of<ShortUrlsListModel>({
     shortUrls: {
       data: [
@@ -36,20 +41,19 @@ describe('<ShortUrlsList />', () => {
     <ShortUrlsList
       {...Mock.of<MercureBoundProps>({ mercureInfo: { loading: true } })}
       listShortUrls={listShortUrlsMock}
-      match={Mock.of<match<ShortUrlListRouteParams>>({ params: {} })}
-      location={Mock.of<Location>({ search: '?tags=test%20tag&search=example.com' })}
       shortUrlsList={shortUrlsList}
-      history={Mock.of<History>({ push })}
       selectedServer={Mock.of<ReachableServer>({ id: '1' })}
       settings={Mock.of<Settings>({ shortUrlsList: { defaultOrdering } })}
     />,
   ).dive(); // Dive is needed as this component is wrapped in a HOC
 
   beforeEach(() => {
+    (useNavigate as any).mockReturnValue(navigate);
+
     wrapper = createWrapper();
   });
 
-  afterEach(jest.resetAllMocks);
+  afterEach(jest.clearAllMocks);
   afterEach(() => wrapper?.unmount());
 
   it('wraps expected components', () => {
@@ -68,10 +72,10 @@ describe('<ShortUrlsList />', () => {
     wrapper.find(ShortUrlsTable).simulate('tagClick', 'bar');
     wrapper.find(ShortUrlsTable).simulate('tagClick', 'baz');
 
-    expect(push).toHaveBeenCalledTimes(3);
-    expect(push).toHaveBeenNthCalledWith(1, expect.stringContaining(`tags=${encodeURIComponent('test tag,foo')}`));
-    expect(push).toHaveBeenNthCalledWith(2, expect.stringContaining(`tags=${encodeURIComponent('test tag,bar')}`));
-    expect(push).toHaveBeenNthCalledWith(3, expect.stringContaining(`tags=${encodeURIComponent('test tag,baz')}`));
+    expect(navigate).toHaveBeenCalledTimes(3);
+    expect(navigate).toHaveBeenNthCalledWith(1, expect.stringContaining(`tags=${encodeURIComponent('test tag,foo')}`));
+    expect(navigate).toHaveBeenNthCalledWith(2, expect.stringContaining(`tags=${encodeURIComponent('test tag,bar')}`));
+    expect(navigate).toHaveBeenNthCalledWith(3, expect.stringContaining(`tags=${encodeURIComponent('test tag,baz')}`));
   });
 
   it('invokes order icon rendering', () => {