Merge pull request #684 from acelaya-forks/feature/testing-lib

Feature/testing lib

test/common/AppUpdateBanner.test.tsx

@@ -1,6 +1,6 @@
 import { screen } from '@testing-library/react';
 import { AppUpdateBanner } from '../../src/common/AppUpdateBanner';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<AppUpdateBanner />', () => {
   const toggle = jest.fn();

test/common/ErrorHandler.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { ErrorHandler as createErrorHandler } from '../../src/common/ErrorHandler';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 const ComponentWithError = () => {
   throw new Error('Error!!');

test/common/MainHeader.test.tsx

@@ -2,7 +2,7 @@ import { screen, waitFor } from '@testing-library/react';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
 import { MainHeader as createMainHeader } from '../../src/common/MainHeader';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<MainHeader />', () => {
   const MainHeader = createMainHeader(() => <>ServersDropdown</>);

test/domains/DomainSelector.test.tsx

@@ -3,7 +3,7 @@ import { Mock } from 'ts-mockery';
 import { DomainSelector } from '../../src/domains/DomainSelector';
 import { DomainsList } from '../../src/domains/reducers/domainsList';
 import { ShlinkDomain } from '../../src/api/types';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<DomainSelector />', () => {
   const domainsList = Mock.of<DomainsList>({

test/domains/ManageDomains.test.tsx

@@ -4,7 +4,7 @@ import { DomainsList } from '../../src/domains/reducers/domainsList';
 import { ManageDomains } from '../../src/domains/ManageDomains';
 import { ProblemDetailsError, ShlinkDomain } from '../../src/api/types';
 import { SelectedServer } from '../../src/servers/data';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ManageDomains />', () => {
   const listDomains = jest.fn();

test/domains/helpers/DomainDropdown.test.tsx

@@ -5,7 +5,7 @@ import { DomainDropdown } from '../../../src/domains/helpers/DomainDropdown';
 import { Domain } from '../../../src/domains/data';
 import { ReachableServer, SelectedServer } from '../../../src/servers/data';
 import { SemVer } from '../../../src/utils/helpers/version';
-import { renderWithEvents } from '../../__mocks__/setUpTest';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<DomainDropdown />', () => {
   const editDomainRedirects = jest.fn().mockResolvedValue(undefined);

test/domains/helpers/DomainStatusIcon.test.tsx

@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { DomainStatus } from '../../../src/domains/data';
 import { DomainStatusIcon } from '../../../src/domains/helpers/DomainStatusIcon';
-import { renderWithEvents } from '../../__mocks__/setUpTest';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<DomainStatusIcon />', () => {
   const matchMedia = jest.fn().mockReturnValue(Mock.of<MediaQueryList>({ matches: false }));

test/domains/helpers/EditDomainRedirectsModal.test.tsx

@@ -2,7 +2,7 @@ import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { ShlinkDomain } from '../../../src/api/types';
 import { EditDomainRedirectsModal } from '../../../src/domains/helpers/EditDomainRedirectsModal';
-import { renderWithEvents } from '../../__mocks__/setUpTest';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<EditDomainRedirectsModal />', () => {
   const editDomainRedirects = jest.fn().mockResolvedValue(undefined);

test/servers/CreateServer.test.tsx

@@ -3,7 +3,7 @@ import { Mock } from 'ts-mockery';
 import { useNavigate } from 'react-router-dom';
 import { CreateServer as createCreateServer } from '../../src/servers/CreateServer';
 import { ServerWithId } from '../../src/servers/data';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
 

test/servers/DeleteServerButton.test.tsx

@@ -3,7 +3,7 @@ import { screen, waitFor } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { DeleteServerButton as createDeleteServerButton } from '../../src/servers/DeleteServerButton';
 import { ServerWithId } from '../../src/servers/data';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<DeleteServerButton />', () => {
   const DeleteServerButton = createDeleteServerButton(

test/servers/DeleteServerModal.test.tsx

@@ -3,7 +3,7 @@ import { Mock } from 'ts-mockery';
 import { useNavigate } from 'react-router-dom';
 import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
 import { ServerWithId } from '../../src/servers/data';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
 

test/servers/EditServer.test.tsx

@@ -3,7 +3,7 @@ import { Mock } from 'ts-mockery';
 import { useNavigate } from 'react-router-dom';
 import { EditServer as editServerConstruct } from '../../src/servers/EditServer';
 import { ReachableServer, SelectedServer } from '../../src/servers/data';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
 

test/servers/ManageServers.test.tsx

@@ -4,7 +4,7 @@ import { MemoryRouter } from 'react-router-dom';
 import ServersExporter from '../../src/servers/services/ServersExporter';
 import { ManageServers as createManageServers } from '../../src/servers/ManageServers';
 import { ServersMap, ServerWithId } from '../../src/servers/data';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ManageServers />', () => {
   const exportServers = jest.fn();

test/servers/ManageServersRowDropdown.test.tsx

@@ -3,7 +3,7 @@ import { Mock } from 'ts-mockery';
 import { MemoryRouter } from 'react-router-dom';
 import { ServerWithId } from '../../src/servers/data';
 import { ManageServersRowDropdown as createManageServersRowDropdown } from '../../src/servers/ManageServersRowDropdown';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ManageServersRowDropdown />', () => {
   const ManageServersRowDropdown = createManageServersRowDropdown(

test/servers/ServersDropdown.test.tsx

@@ -4,7 +4,7 @@ import { Mock } from 'ts-mockery';
 import { MemoryRouter } from 'react-router-dom';
 import { ServersDropdown } from '../../src/servers/ServersDropdown';
 import { ServersMap, ServerWithId } from '../../src/servers/data';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ServersDropdown />', () => {
   const fallbackServers: ServersMap = {

test/servers/helpers/DuplicatedServersModal.test.tsx

@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal';
 import { ServerData } from '../../../src/servers/data';
-import { renderWithEvents } from '../../__mocks__/setUpTest';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<DuplicatedServersModal />', () => {
   const onDiscard = jest.fn();

test/servers/helpers/ImportServersBtn.test.tsx

@@ -6,7 +6,7 @@ import {
 } from '../../../src/servers/helpers/ImportServersBtn';
 import { ServersImporter } from '../../../src/servers/services/ServersImporter';
 import { ServersMap, ServerWithId } from '../../../src/servers/data';
-import { renderWithEvents } from '../../__mocks__/setUpTest';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<ImportServersBtn />', () => {
   const onImportMock = jest.fn();

test/settings/RealTimeUpdatesSettings.test.tsx

@@ -5,7 +5,7 @@ import {
   Settings,
 } from '../../src/settings/reducers/settings';
 import { RealTimeUpdatesSettings } from '../../src/settings/RealTimeUpdatesSettings';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<RealTimeUpdatesSettings />', () => {
   const toggleRealTimeUpdates = jest.fn();

test/settings/ShortUrlCreationSettings.test.tsx

@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { ShortUrlCreationSettings as ShortUrlsSettings, Settings } from '../../src/settings/reducers/settings';
 import { ShortUrlCreationSettings } from '../../src/settings/ShortUrlCreationSettings';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ShortUrlCreationSettings />', () => {
   const setShortUrlCreationSettings = jest.fn();

test/settings/ShortUrlsListSettings.test.tsx

@@ -3,7 +3,7 @@ import { Mock } from 'ts-mockery';
 import { Settings, ShortUrlsListSettings as ShortUrlsSettings } from '../../src/settings/reducers/settings';
 import { ShortUrlsListSettings } from '../../src/settings/ShortUrlsListSettings';
 import { ShortUrlsOrder } from '../../src/short-urls/data';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ShortUrlsListSettings />', () => {
   const setSettings = jest.fn();

test/settings/TagsSettings.test.tsx

@@ -4,7 +4,7 @@ import { Settings, TagsMode, TagsSettings as TagsSettingsOptions } from '../../s
 import { TagsSettings } from '../../src/settings/TagsSettings';
 import { TagsOrder } from '../../src/tags/data/TagsListChildrenProps';
 import { capitalize } from '../../src/utils/utils';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<TagsSettings />', () => {
   const setTagsSettings = jest.fn();

test/settings/UserInterfaceSettings.test.tsx

@@ -3,7 +3,7 @@ import { Mock } from 'ts-mockery';
 import { Settings, UiSettings } from '../../src/settings/reducers/settings';
 import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings';
 import { Theme } from '../../src/utils/theme';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<UserInterfaceSettings />', () => {
   const setUiSettings = jest.fn();

test/settings/VisitsSettings.test.tsx

@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { Settings } from '../../src/settings/reducers/settings';
 import { VisitsSettings } from '../../src/settings/VisitsSettings';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<VisitsSettings />', () => {
   const setVisitsSettings = jest.fn();

test/short-urls/ShortUrlForm.test.tsx

@@ -6,7 +6,7 @@ import { ShortUrlForm as createShortUrlForm, Mode } from '../../src/short-urls/S
 import { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { parseDate } from '../../src/utils/helpers/date';
 import { OptionalString } from '../../src/utils/utils';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ShortUrlForm />', () => {
   const createShortUrl = jest.fn(async () => Promise.resolve());

test/short-urls/ShortUrlsFilteringBar.test.tsx

@@ -6,7 +6,7 @@ import { ShortUrlsFilteringBar as filteringBarCreator } from '../../src/short-ur
 import { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { DateRange } from '../../src/utils/dates/types';
 import { formatDate } from '../../src/utils/helpers/date';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),

test/short-urls/ShortUrlsList.test.tsx

@@ -9,7 +9,7 @@ import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reduce
 import { ReachableServer } from '../../src/servers/data';
 import { Settings } from '../../src/settings/reducers/settings';
 import { ShortUrlsTableProps } from '../../src/short-urls/ShortUrlsTable';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),

test/short-urls/ShortUrlsTable.test.tsx

@@ -4,7 +4,7 @@ import { ShortUrlsTable as shortUrlsTableCreator } from '../../src/short-urls/Sh
 import { ShortUrlsList } from '../../src/short-urls/reducers/shortUrlsList';
 import { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from '../../src/short-urls/data';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ShortUrlsTable />', () => {
   const shortUrlsList = Mock.all<ShortUrlsList>();

test/short-urls/UseExistingIfFoundInfoIcon.test.tsx

@@ -1,6 +1,6 @@
 import { screen } from '@testing-library/react';
 import { UseExistingIfFoundInfoIcon } from '../../src/short-urls/UseExistingIfFoundInfoIcon';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<UseExistingIfFoundInfoIcon />', () => {
   it('shows modal when icon is clicked', async () => {

test/short-urls/helpers/CreateShortUrlResult.test.tsx

@@ -3,7 +3,7 @@ import { Mock } from 'ts-mockery';
 import { CreateShortUrlResult as createResult } from '../../../src/short-urls/helpers/CreateShortUrlResult';
 import { ShortUrl } from '../../../src/short-urls/data';
 import { TimeoutToggle } from '../../../src/utils/helpers/hooks';
-import { renderWithEvents } from '../../__mocks__/setUpTest';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<CreateShortUrlResult />', () => {
   const copyToClipboard = jest.fn();

test/short-urls/helpers/ExportShortUrlsBtn.test.tsx

@@ -4,7 +4,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { ReportExporter } from '../../../src/common/services/ReportExporter';
 import { ExportShortUrlsBtn as createExportShortUrlsBtn } from '../../../src/short-urls/helpers/ExportShortUrlsBtn';
 import { NotFoundServer, ReachableServer, SelectedServer } from '../../../src/servers/data';
-import { renderWithEvents } from '../../__mocks__/setUpTest';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<ExportShortUrlsBtn />', () => {
   const listShortUrls = jest.fn();

test/short-urls/helpers/ShortUrlDetailLink.test.tsx

@@ -1,15 +1,11 @@
-import { shallow, ShallowWrapper } from 'enzyme';
-import { Link } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
+import { MemoryRouter } from 'react-router-dom';
 import { ShortUrlDetailLink, LinkSuffix } from '../../../src/short-urls/helpers/ShortUrlDetailLink';
 import { NotFoundServer, ReachableServer } from '../../../src/servers/data';
 import { ShortUrl } from '../../../src/short-urls/data';
 
 describe('<ShortUrlDetailLink />', () => {
-  let wrapper: ShallowWrapper;
-
-  afterEach(() => wrapper?.unmount());
-
   it.each([
     [undefined, undefined],
     [null, null],
@@ -19,15 +15,14 @@ describe('<ShortUrlDetailLink />', () => {
     [null, Mock.all<ShortUrl>()],
     [undefined, Mock.all<ShortUrl>()],
   ])('only renders a plain span when either server or short URL are not set', (selectedServer, shortUrl) => {
-    wrapper = shallow(
+    render(
       <ShortUrlDetailLink selectedServer={selectedServer} shortUrl={shortUrl} suffix="visits">
         Something
       </ShortUrlDetailLink>,
     );
-    const link = wrapper.find(Link);
 
-    expect(link).toHaveLength(0);
-    expect(wrapper.html()).toEqual('<span>Something</span>');
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    expect(screen.getByText('Something')).toBeInTheDocument();
   });
 
   it.each([
@@ -56,15 +51,13 @@ describe('<ShortUrlDetailLink />', () => {
       '/server/3/short-code/def456/edit?domain=example.com',
     ],
   ])('renders link with expected query when', (selectedServer, shortUrl, suffix, expectedLink) => {
-    wrapper = shallow(
-      <ShortUrlDetailLink selectedServer={selectedServer} shortUrl={shortUrl} suffix={suffix}>
-        Something
-      </ShortUrlDetailLink>,
+    render(
+      <MemoryRouter>
+        <ShortUrlDetailLink selectedServer={selectedServer} shortUrl={shortUrl} suffix={suffix}>
+          Something
+        </ShortUrlDetailLink>
+      </MemoryRouter>,
     );
-    const link = wrapper.find(Link);
-    const to = link.prop('to');
-
-    expect(link).toHaveLength(1);
-    expect(to).toEqual(expectedLink);
+    expect(screen.getByRole('link')).toHaveProperty('href', expect.stringContaining(expectedLink));
   });
 });

test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx

@@ -1,17 +1,17 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { ShortUrlFormCheckboxGroup } from '../../../src/short-urls/helpers/ShortUrlFormCheckboxGroup';
-import { Checkbox } from '../../../src/utils/Checkbox';
-import { InfoTooltip } from '../../../src/utils/InfoTooltip';
 
 describe('<ShortUrlFormCheckboxGroup />', () => {
   it.each([
     [undefined, '', 0],
     ['This is the tooltip', 'me-2', 1],
   ])('renders tooltip only when provided', (infoTooltip, expectedClassName, expectedAmountOfTooltips) => {
-    const wrapper = shallow(<ShortUrlFormCheckboxGroup infoTooltip={infoTooltip} />);
-    const checkbox = wrapper.find(Checkbox);
+    render(<ShortUrlFormCheckboxGroup infoTooltip={infoTooltip} />);
 
-    expect(checkbox.prop('className')).toEqual(expectedClassName);
-    expect(wrapper.find(InfoTooltip)).toHaveLength(expectedAmountOfTooltips);
+    expect(screen.getByRole('checkbox').parentNode).toHaveAttribute(
+      'class',
+      expect.stringContaining(expectedClassName),
+    );
+    expect(screen.queryAllByRole('img', { hidden: true })).toHaveLength(expectedAmountOfTooltips);
   });
 });

test/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import { QrErrorCorrection } from '../../../../src/utils/helpers/qrCodes';
 import { QrErrorCorrectionDropdown } from '../../../../src/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown';
-import { renderWithEvents } from '../../../__mocks__/setUpTest';
+import { renderWithEvents } from '../../../__helpers__/setUpTest';
 
 describe('<QrErrorCorrectionDropdown />', () => {
   const initialErrorCorrection: QrErrorCorrection = 'Q';

test/short-urls/helpers/qr-codes/QrFormatDropdown.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import { QrCodeFormat } from '../../../../src/utils/helpers/qrCodes';
 import { QrFormatDropdown } from '../../../../src/short-urls/helpers/qr-codes/QrFormatDropdown';
-import { renderWithEvents } from '../../../__mocks__/setUpTest';
+import { renderWithEvents } from '../../../__helpers__/setUpTest';
 
 describe('<QrFormatDropdown />', () => {
   const initialFormat: QrCodeFormat = 'svg';

test/tags/TagCard.test.tsx

@@ -4,7 +4,7 @@ import { Mock } from 'ts-mockery';
 import { TagCard as createTagCard } from '../../src/tags/TagCard';
 import { ColorGenerator } from '../../src/utils/services/ColorGenerator';
 import { ReachableServer } from '../../src/servers/data';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<TagCard />', () => {
   const TagCard = createTagCard(

test/tags/TagsCards.test.tsx

@@ -4,7 +4,7 @@ import { TagsCards as createTagsCards } from '../../src/tags/TagsCards';
 import { SelectedServer } from '../../src/servers/data';
 import { rangeOf } from '../../src/utils/utils';
 import { NormalizedTag } from '../../src/tags/data';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<TagsCards />', () => {
   const amountOfTags = 10;

test/tags/TagsList.test.tsx

@@ -5,7 +5,7 @@ import { TagsList as createTagsList, TagsListProps } from '../../src/tags/TagsLi
 import { TagsList } from '../../src/tags/reducers/tagsList';
 import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 import { Settings } from '../../src/settings/reducers/settings';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<TagsList />', () => {
   const filterTags = jest.fn();

test/tags/TagsModeDropdown.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
 import { TagsMode } from '../../src/settings/reducers/settings';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<TagsModeDropdown />', () => {
   const onChange = jest.fn();

test/tags/helpers/DeleteTagConfirmModal.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import { DeleteTagConfirmModal } from '../../../src/tags/helpers/DeleteTagConfirmModal';
 import { TagDeletion } from '../../../src/tags/reducers/tagDelete';
-import { renderWithEvents } from '../../__mocks__/setUpTest';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<DeleteTagConfirmModal />', () => {
   const tag = 'nodejs';

test/tags/helpers/Tag.test.tsx

@@ -4,7 +4,7 @@ import { ReactNode } from 'react';
 import { ColorGenerator } from '../../../src/utils/services/ColorGenerator';
 import { MAIN_COLOR } from '../../../src/utils/theme';
 import { Tag } from '../../../src/tags/helpers/Tag';
-import { renderWithEvents } from '../../__mocks__/setUpTest';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 const hexToRgb = (hex: string) => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

test/utils/Checkbox.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { Checkbox } from '../../src/utils/Checkbox';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<Checkbox />', () => {
   it.each([['foo'], ['bar'], ['baz']])('includes extra class names when provided', (className) => {

test/utils/CopyToClipboardIcon.test.tsx

@@ -1,5 +1,5 @@
 import { CopyToClipboardIcon } from '../../src/utils/CopyToClipboardIcon';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<CopyToClipboardIcon />', () => {
   const onCopy = jest.fn();

test/utils/DateInput.test.tsx

@@ -1,7 +1,7 @@
 import { screen, waitFor } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { DateInput, DateInputProps } from '../../src/utils/DateInput';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<DateInput />', () => {
   const setUp = (props: Partial<DateInputProps> = {}) => renderWithEvents(

test/utils/DropdownBtn.test.tsx

@@ -1,30 +1,23 @@
-import { shallow, ShallowWrapper } from 'enzyme';
-import { DropdownMenu, DropdownToggle } from 'reactstrap';
+import { screen } from '@testing-library/react';
 import { PropsWithChildren } from 'react';
 import { DropdownBtn, DropdownBtnProps } from '../../src/utils/DropdownBtn';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<DropdownBtn />', () => {
-  let wrapper: ShallowWrapper;
-  const createWrapper = (props: PropsWithChildren<DropdownBtnProps>) => {
-    wrapper = shallow(<DropdownBtn children="foo" {...props} />);
+  const setUp = (props: PropsWithChildren<DropdownBtnProps>) => renderWithEvents(
+    <DropdownBtn children="foo" {...props} />,
+  );
 
-    return wrapper;
-  };
-
-  afterEach(() => wrapper?.unmount());
-
-  it.each([['foo'], ['bar'], ['baz']])('displays provided text', (text) => {
-    const wrapper = createWrapper({ text });
-    const toggle = wrapper.find(DropdownToggle);
-
-    expect(toggle.prop('children')).toContain(text);
+  it.each([['foo'], ['bar'], ['baz']])('displays provided text in button', (text) => {
+    setUp({ text });
+    expect(screen.getByRole('button')).toHaveTextContent(text);
   });
 
-  it.each([['foo'], ['bar'], ['baz']])('displays provided children', (children) => {
-    const wrapper = createWrapper({ text: '', children });
-    const menu = wrapper.find(DropdownMenu);
+  it.each([['foo'], ['bar'], ['baz']])('displays provided children in menu', async (children) => {
+    const { user } = setUp({ text: '', children });
 
-    expect(menu.html()).toContain(children);
+    await user.click(screen.getByRole('button'));
+    expect(screen.getByRole('menu')).toHaveTextContent(children);
   });
 
   it.each([
@@ -33,20 +26,21 @@ describe('<DropdownBtn />', () => {
     ['foo', 'dropdown-btn__toggle btn-block foo'],
     ['bar', 'dropdown-btn__toggle btn-block bar'],
   ])('includes provided classes', (className, expectedClasses) => {
-    const wrapper = createWrapper({ text: '', className });
-    const toggle = wrapper.find(DropdownToggle);
-
-    expect(toggle.prop('className')?.trim()).toEqual(expectedClasses);
+    setUp({ text: '', className });
+    expect(screen.getByRole('button')).toHaveClass(expectedClasses);
   });
 
   it.each([
-    [100, { minWidth: '100px' }],
-    [250, { minWidth: '250px' }],
-    [undefined, {}],
-  ])('renders proper styles when minWidth is provided', (minWidth, expectedStyle) => {
-    const wrapper = createWrapper({ text: '', minWidth });
-    const style = wrapper.find(DropdownMenu).prop('style');
+    [100, 'min-width: 100px; '],
+    [250, 'min-width: 250px; '],
+    [undefined, ''],
+  ])('renders proper styles when minWidth is provided', async (minWidth, expectedStyle) => {
+    const { user } = setUp({ text: '', minWidth });
 
-    expect(style).toEqual(expectedStyle);
+    await user.click(screen.getByRole('button'));
+    expect(screen.getByRole('menu')).toHaveAttribute(
+      'style',
+      `${expectedStyle}position: absolute; left: 0px; top: 0px;`,
+    );
   });
 });

test/utils/InfoTooltip.test.tsx

@@ -1,7 +1,7 @@
 import { screen, waitFor } from '@testing-library/react';
 import { Placement } from '@popperjs/core';
 import { InfoTooltip, InfoTooltipProps } from '../../src/utils/InfoTooltip';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<InfoTooltip />', () => {
   const setUp = (props: Partial<InfoTooltipProps> = {}) => renderWithEvents(

test/utils/Message.test.tsx

@@ -1,28 +1,17 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { PropsWithChildren } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Card } from 'reactstrap';
 import { Message, MessageProps } from '../../src/utils/Message';
 
 describe('<Message />', () => {
-  let wrapper: ShallowWrapper;
-  const createWrapper = (props: PropsWithChildren<MessageProps> = {}) => {
-    wrapper = shallow(<Message {...props} />);
-
-    return wrapper;
-  };
-
-  afterEach(() => wrapper?.unmount());
+  const setUp = (props: PropsWithChildren<MessageProps> = {}) => render(<Message {...props} />);
 
   it.each([
-    [true, 1, 0],
-    [false, 0, 1],
-    [undefined, 0, 1],
-  ])('renders expected classes based on width', (fullWidth, expectedFull, expectedNonFull) => {
-    const wrapper = createWrapper({ fullWidth });
-
-    expect(wrapper.find('.col-md-12')).toHaveLength(expectedFull);
-    expect(wrapper.find('.col-md-10')).toHaveLength(expectedNonFull);
+    [true, 'col-md-12'],
+    [false, 'col-md-10 offset-md-1'],
+    [undefined, 'col-md-10 offset-md-1'],
+  ])('renders expected classes based on width', (fullWidth, expectedClass) => {
+    const { container } = setUp({ fullWidth });
+    expect(container.firstChild?.firstChild).toHaveClass(expectedClass);
   });
 
   it.each([
@@ -31,15 +20,14 @@ describe('<Message />', () => {
     [true, undefined],
     [false, undefined],
   ])('renders expected content', (loading, children) => {
-    const wrapper = createWrapper({ loading, children });
+    setUp({ loading, children });
 
-    expect(wrapper.find(FontAwesomeIcon)).toHaveLength(loading ? 1 : 0);
+    expect(screen.queryAllByRole('img', { hidden: true })).toHaveLength(loading ? 1 : 0);
 
     if (loading) {
-      expect(wrapper.find('span').text()).toContain(children || 'Loading...');
+      expect(screen.getByText(children || 'Loading...')).toHaveClass('ms-2');
     } else {
-      expect(wrapper.find('span')).toHaveLength(0);
-      expect(wrapper.find('h3').text()).toContain(children || '');
+      expect(screen.getByRole('heading')).toHaveTextContent(children || '');
     }
   });
 
@@ -48,17 +36,14 @@ describe('<Message />', () => {
     ['default', '', 'text-muted'],
     [undefined, '', 'text-muted'],
   ])('renders proper classes based on message type', (type, expectedCardClass, expectedH3Class) => {
-    const wrapper = createWrapper({ type: type as 'default' | 'error' | undefined });
-    const card = wrapper.find(Card);
-    const h3 = wrapper.find('h3');
+    const { container } = setUp({ type: type as 'default' | 'error' | undefined });
 
-    expect(card.prop('className')).toEqual(expectedCardClass);
-    expect(h3.prop('className')).toEqual(`text-center mb-0 ${expectedH3Class}`);
+    expect(container.querySelector('.card-body')).toHaveAttribute('class', expect.stringContaining(expectedCardClass));
+    expect(screen.getByRole('heading')).toHaveClass(`text-center mb-0 ${expectedH3Class}`);
   });
 
   it.each([{ className: 'foo' }, { className: 'bar' }, {}])('renders provided classes', ({ className }) => {
-    const wrapper = createWrapper({ className });
-
-    expect(wrapper.prop('className')).toEqual(`g-0${className ? ` ${className}` : ''}`);
+    const { container } = setUp({ className });
+    expect(container.firstChild).toHaveClass(`g-0${className ? ` ${className}` : ''}`);
   });
 });

test/utils/OrderingDropdown.test.tsx

@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import { values } from 'ramda';
 import { OrderingDropdown, OrderingDropdownProps } from '../../src/utils/OrderingDropdown';
 import { OrderDir } from '../../src/utils/helpers/ordering';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<OrderingDropdown />', () => {
   const items = {

test/utils/PaginationDropdown.test.tsx

@@ -1,22 +1,23 @@
-import { shallow, ShallowWrapper } from 'enzyme';
-import { DropdownItem } from 'reactstrap';
+import { screen } from '@testing-library/react';
 import { PaginationDropdown } from '../../src/utils/PaginationDropdown';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<PaginationDropdown />', () => {
   const setValue = jest.fn();
-  let wrapper: ShallowWrapper;
+  const setUp = async () => {
+    const result = renderWithEvents(<PaginationDropdown ranges={[10, 50, 100, 200]} value={50} setValue={setValue} />);
+    const { user } = result;
 
-  beforeEach(() => {
-    wrapper = shallow(<PaginationDropdown ranges={[10, 50, 100, 200]} value={50} setValue={setValue} />);
-  });
+    await user.click(screen.getByRole('button'));
+
+    return result;
+  };
 
   afterEach(jest.clearAllMocks);
-  afterEach(() => wrapper?.unmount());
 
-  it('renders expected amount of items', () => {
-    const items = wrapper.find(DropdownItem);
-
-    expect(items).toHaveLength(6);
+  it('renders expected amount of items', async () => {
+    await setUp();
+    expect(screen.getAllByRole('menuitem')).toHaveLength(5);
   });
 
   it.each([
@@ -24,12 +25,11 @@ describe('<PaginationDropdown />', () => {
     [1, 50],
     [2, 100],
     [3, 200],
-    [5, Infinity],
-  ])('sets expected value when an item is clicked', (index, expectedValue) => {
-    const item = wrapper.find(DropdownItem).at(index);
+  ])('sets expected value when an item is clicked', async (index, expectedValue) => {
+    const { user } = await setUp();
 
     expect(setValue).not.toHaveBeenCalled();
-    item.simulate('click');
+    await user.click(screen.getAllByRole('menuitem')[index]);
     expect(setValue).toHaveBeenCalledWith(expectedValue);
   });
 });

test/utils/dates/DateIntervalDropdownItems.test.tsx

@@ -2,7 +2,7 @@ import { screen, waitFor } from '@testing-library/react';
 import { DateIntervalDropdownItems } from '../../../src/utils/dates/DateIntervalDropdownItems';
 import { DATE_INTERVALS, DateInterval, rangeOrIntervalToString } from '../../../src/utils/dates/types';
 import { DropdownBtn } from '../../../src/utils/DropdownBtn';
-import { renderWithEvents } from '../../__mocks__/setUpTest';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<DateIntervalDropdownItems />', () => {
   const onChange = jest.fn();

test/utils/dates/DateIntervalSelector.test.tsx

@@ -1,7 +1,7 @@
 import { screen, waitFor } from '@testing-library/react';
 import { DateInterval, rangeOrIntervalToString } from '../../../src/utils/dates/types';
 import { DateIntervalSelector } from '../../../src/utils/dates/DateIntervalSelector';
-import { renderWithEvents } from '../../__mocks__/setUpTest';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<DateIntervalSelector />', () => {
   const activeInterval: DateInterval = 'last7Days';

test/visits/DomainVisits.test.tsx

@@ -9,7 +9,7 @@ import { DomainVisits } from '../../src/visits/reducers/domainVisits';
 import { Settings } from '../../src/settings/reducers/settings';
 import { SelectedServer } from '../../src/servers/data';
 import { Visit } from '../../src/visits/types';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),

test/visits/NonOrphanVisits.test.tsx

@@ -8,7 +8,7 @@ import { Visit, VisitsInfo } from '../../src/visits/types';
 import { Settings } from '../../src/settings/reducers/settings';
 import { ReportExporter } from '../../src/common/services/ReportExporter';
 import { SelectedServer } from '../../src/servers/data';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<NonOrphanVisits />', () => {
   const exportVisits = jest.fn();

test/visits/OrphanVisits.test.tsx

@@ -8,7 +8,7 @@ import { Visit, VisitsInfo } from '../../src/visits/types';
 import { Settings } from '../../src/settings/reducers/settings';
 import { ReportExporter } from '../../src/common/services/ReportExporter';
 import { SelectedServer } from '../../src/servers/data';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<OrphanVisits />', () => {
   const getOrphanVisits = jest.fn();

test/visits/ShortUrlVisits.test.tsx

@@ -10,7 +10,7 @@ import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 import { ReportExporter } from '../../src/common/services/ReportExporter';
 import { Visit } from '../../src/visits/types';
 import { Settings } from '../../src/settings/reducers/settings';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ShortUrlVisits />', () => {
   const getShortUrlVisitsMock = jest.fn();

test/visits/ShortUrlVisitsHeader.test.tsx

@@ -4,7 +4,7 @@ import { formatDistance, parseISO } from 'date-fns';
 import { ShortUrlVisitsHeader } from '../../src/visits/ShortUrlVisitsHeader';
 import { ShortUrlDetail } from '../../src/short-urls/reducers/shortUrlDetail';
 import { ShortUrlVisits } from '../../src/visits/reducers/shortUrlVisits';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ShortUrlVisitsHeader />', () => {
   const dateCreated = '2018-01-01T10:00:00+00:00';

test/visits/TagVisits.test.tsx

@@ -9,7 +9,7 @@ import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 import { ReportExporter } from '../../src/common/services/ReportExporter';
 import { Visit } from '../../src/visits/types';
 import { Settings } from '../../src/settings/reducers/settings';
-import { renderWithEvents } from '../__mocks__/setUpTest';
+import { renderWithEvents } from '../__helpers__/setUpTest';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),

test/visits/charts/DoughnutChart.test.tsx

@@ -1,6 +1,6 @@
 import { screen } from '@testing-library/react';
 import { DoughnutChart } from '../../../src/visits/charts/DoughnutChart';
-import { setUpCanvas } from '../../__mocks__/setUpTest';
+import { setUpCanvas } from '../../__helpers__/setUpTest';
 
 describe('<DoughnutChart />', () => {
   const stats = {

test/visits/charts/HorizontalBarChart.test.tsx

@@ -1,5 +1,5 @@
 import { HorizontalBarChart, HorizontalBarChartProps } from '../../../src/visits/charts/HorizontalBarChart';
-import { setUpCanvas } from '../../__mocks__/setUpTest';
+import { setUpCanvas } from '../../__helpers__/setUpTest';
 
 describe('<HorizontalBarChart />', () => {
   const setUp = (props: HorizontalBarChartProps) => setUpCanvas(<HorizontalBarChart {...props} />);

test/visits/charts/LineChartCard.test.tsx

@@ -4,7 +4,7 @@ import { formatISO, subDays, subMonths, subYears } from 'date-fns';
 import { Mock } from 'ts-mockery';
 import { LineChartCard } from '../../../src/visits/charts/LineChartCard';
 import { NormalizedVisit } from '../../../src/visits/types';
-import { setUpCanvas } from '../../__mocks__/setUpTest';
+import { setUpCanvas } from '../../__helpers__/setUpTest';
 
 describe('<LineChartCard />', () => {
   const setUp = (visits: NormalizedVisit[] = [], highlightedVisits: NormalizedVisit[] = []) => ({

test/visits/helpers/OpenMapModalBtn.test.tsx

@@ -2,7 +2,7 @@ import { screen, waitFor } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { OpenMapModalBtn } from '../../../src/visits/helpers/OpenMapModalBtn';
 import { CityStats } from '../../../src/visits/types';
-import { renderWithEvents } from '../../__mocks__/setUpTest';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<OpenMapModalBtn />', () => {
   const title = 'Foo';

test/visits/helpers/VisitsFilterDropdown.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import { OrphanVisitType, VisitsFilter } from '../../../src/visits/types';
 import { VisitsFilterDropdown } from '../../../src/visits/helpers/VisitsFilterDropdown';
-import { renderWithEvents } from '../../__mocks__/setUpTest';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<VisitsFilterDropdown />', () => {
   const onChange = jest.fn();