Fixed most tests using react-router-dom hooks

test/visits/NonOrphanVisits.test.tsx

@@ -1,7 +1,5 @@
 import { shallow } from 'enzyme';
 import { Mock } from 'ts-mockery';
-import { History, Location } from 'history';
-import { match } from 'react-router';
 import { NonOrphanVisits as createNonOrphanVisits } from '../../src/visits/NonOrphanVisits';
 import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 import { VisitsInfo } from '../../src/visits/types';
@@ -11,9 +9,14 @@ import { Settings } from '../../src/settings/reducers/settings';
 import { VisitsExporter } from '../../src/visits/services/VisitsExporter';
 import { SelectedServer } from '../../src/servers/data';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn().mockReturnValue(jest.fn()),
+  useParams: jest.fn().mockReturnValue({}),
+}));
+
 describe('<NonOrphanVisits />', () => {
   it('wraps visits stats and header', () => {
-    const goBack = jest.fn();
     const getNonOrphanVisits = jest.fn();
     const cancelGetNonOrphanVisits = jest.fn();
     const nonOrphanVisits = Mock.all<VisitsInfo>();
@@ -25,9 +28,6 @@ describe('<NonOrphanVisits />', () => {
         getNonOrphanVisits={getNonOrphanVisits}
         nonOrphanVisits={nonOrphanVisits}
         cancelGetNonOrphanVisits={cancelGetNonOrphanVisits}
-        history={Mock.of<History>({ goBack })}
-        location={Mock.all<Location>()}
-        match={Mock.of<match>({ url: 'the_base_url' })}
         settings={Mock.all<Settings>()}
         selectedServer={Mock.all<SelectedServer>()}
       />,
@@ -39,9 +39,8 @@ describe('<NonOrphanVisits />', () => {
     expect(header).toHaveLength(1);
     expect(stats.prop('cancelGetVisits')).toEqual(cancelGetNonOrphanVisits);
     expect(stats.prop('visitsInfo')).toEqual(nonOrphanVisits);
-    expect(stats.prop('baseUrl')).toEqual('the_base_url');
     expect(stats.prop('isOrphanVisits')).not.toBeDefined();
     expect(header.prop('nonOrphanVisits')).toEqual(nonOrphanVisits);
-    expect(header.prop('goBack')).toEqual(goBack);
+    expect(header.prop('goBack')).toEqual(expect.any(Function));
   });
 });

test/visits/OrphanVisits.test.tsx

@@ -1,7 +1,5 @@
 import { shallow } from 'enzyme';
 import { Mock } from 'ts-mockery';
-import { History, Location } from 'history';
-import { match } from 'react-router';
 import { OrphanVisits as createOrphanVisits } from '../../src/visits/OrphanVisits';
 import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 import { VisitsInfo } from '../../src/visits/types';
@@ -11,9 +9,14 @@ import { Settings } from '../../src/settings/reducers/settings';
 import { VisitsExporter } from '../../src/visits/services/VisitsExporter';
 import { SelectedServer } from '../../src/servers/data';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn().mockReturnValue(jest.fn()),
+  useParams: jest.fn().mockReturnValue({}),
+}));
+
 describe('<OrphanVisits />', () => {
   it('wraps visits stats and header', () => {
-    const goBack = jest.fn();
     const getOrphanVisits = jest.fn();
     const cancelGetOrphanVisits = jest.fn();
     const orphanVisits = Mock.all<VisitsInfo>();
@@ -25,9 +28,6 @@ describe('<OrphanVisits />', () => {
         getOrphanVisits={getOrphanVisits}
         orphanVisits={orphanVisits}
         cancelGetOrphanVisits={cancelGetOrphanVisits}
-        history={Mock.of<History>({ goBack })}
-        location={Mock.all<Location>()}
-        match={Mock.of<match>({ url: 'the_base_url' })}
         settings={Mock.all<Settings>()}
         selectedServer={Mock.all<SelectedServer>()}
       />,
@@ -39,9 +39,8 @@ describe('<OrphanVisits />', () => {
     expect(header).toHaveLength(1);
     expect(stats.prop('cancelGetVisits')).toEqual(cancelGetOrphanVisits);
     expect(stats.prop('visitsInfo')).toEqual(orphanVisits);
-    expect(stats.prop('baseUrl')).toEqual('the_base_url');
     expect(stats.prop('isOrphanVisits')).toEqual(true);
     expect(header.prop('orphanVisits')).toEqual(orphanVisits);
-    expect(header.prop('goBack')).toEqual(goBack);
+    expect(header.prop('goBack')).toEqual(expect.any(Function));
   });
 });

test/visits/ShortUrlVisits.test.tsx

@@ -1,8 +1,6 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { identity } from 'ramda';
 import { Mock } from 'ts-mockery';
-import { History, Location } from 'history';
-import { match } from 'react-router'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import createShortUrlVisits, { ShortUrlVisitsProps } from '../../src/visits/ShortUrlVisits';
 import ShortUrlVisitsHeader from '../../src/visits/ShortUrlVisitsHeader';
 import { ShortUrlVisits as ShortUrlVisitsState } from '../../src/visits/reducers/shortUrlVisits';
@@ -11,16 +9,16 @@ import VisitsStats from '../../src/visits/VisitsStats';
 import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 import { VisitsExporter } from '../../src/visits/services/VisitsExporter';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn().mockReturnValue(jest.fn()),
+  useLocation: jest.fn().mockReturnValue({ search: '' }),
+  useParams: jest.fn().mockReturnValue({ shortCode: 'abc123' }),
+}));
+
 describe('<ShortUrlVisits />', () => {
   let wrapper: ShallowWrapper;
   const getShortUrlVisitsMock = jest.fn();
-  const match = Mock.of<match<{ shortCode: string }>>({
-    params: { shortCode: 'abc123' },
-  });
-  const location = Mock.of<Location>({ search: '' });
-  const history = Mock.of<History>({
-    goBack: jest.fn(),
-  });
   const ShortUrlVisits = createShortUrlVisits(Mock.all<VisitsExporter>());
 
   beforeEach(() => {
@@ -30,9 +28,6 @@ describe('<ShortUrlVisits />', () => {
         {...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
         getShortUrlDetail={identity}
         getShortUrlVisits={getShortUrlVisitsMock}
-        match={match}
-        location={location}
-        history={history}
         shortUrlVisits={Mock.of<ShortUrlVisitsState>({ loading: true, visits: [] })}
         shortUrlDetail={Mock.all<ShortUrlDetail>()}
         cancelGetShortUrlVisits={() => {}}
@@ -40,8 +35,8 @@ describe('<ShortUrlVisits />', () => {
     ).dive(); // Dive is needed as this component is wrapped in a HOC
   });
 
+  afterEach(jest.clearAllMocks);
   afterEach(() => wrapper.unmount());
-  afterEach(jest.resetAllMocks);
 
   it('renders visit stats and visits header', () => {
     const visitStats = wrapper.find(VisitsStats);

test/visits/TagVisits.test.tsx

@@ -1,7 +1,5 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
-import { History } from 'history';
-import { match } from 'react-router'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import createTagVisits, { TagVisitsProps } from '../../src/visits/TagVisits';
 import TagVisitsHeader from '../../src/visits/TagVisitsHeader';
 import ColorGenerator from '../../src/utils/services/ColorGenerator';
@@ -10,15 +8,16 @@ import VisitsStats from '../../src/visits/VisitsStats';
 import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 import { VisitsExporter } from '../../src/visits/services/VisitsExporter';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn().mockReturnValue(jest.fn()),
+  useLocation: jest.fn().mockReturnValue({}),
+  useParams: jest.fn().mockReturnValue({ tag: 'foo' }),
+}));
+
 describe('<TagVisits />', () => {
   let wrapper: ShallowWrapper;
   const getTagVisitsMock = jest.fn();
-  const match = Mock.of<match<{ tag: string }>>({
-    params: { tag: 'foo' },
-  });
-  const history = Mock.of<History>({
-    goBack: jest.fn(),
-  });
 
   beforeEach(() => {
     const TagVisits = createTagVisits(Mock.all<ColorGenerator>(), Mock.all<VisitsExporter>());
@@ -28,8 +27,6 @@ describe('<TagVisits />', () => {
         {...Mock.all<TagVisitsProps>()}
         {...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
         getTagVisits={getTagVisitsMock}
-        match={match}
-        history={history}
         tagVisits={Mock.of<TagVisitsStats>({ loading: true, visits: [] })}
         cancelGetTagVisits={() => {}}
       />,

test/visits/VisitsStats.test.tsx

@@ -12,7 +12,7 @@ import { SelectedServer } from '../../src/servers/data';
 import { SortableBarChartCard } from '../../src/visits/charts/SortableBarChartCard';
 import { DoughnutChartCard } from '../../src/visits/charts/DoughnutChartCard';
 
-describe('<VisitStats />', () => {
+describe('<VisitsStats />', () => {
   const visits = [ Mock.all<Visit>(), Mock.all<Visit>(), Mock.all<Visit>() ];
 
   let wrapper: ShallowWrapper;
@@ -25,7 +25,6 @@ describe('<VisitStats />', () => {
         getVisits={getVisitsMock}
         visitsInfo={Mock.of<VisitsInfo>(visitsInfo)}
         cancelGetVisits={() => {}}
-        baseUrl={''}
         settings={Mock.all<Settings>()}
         exportCsv={exportCsv}
         selectedServer={Mock.all<SelectedServer>()}