Update tests to use vi instead of jest

test/utils/Checkbox.test.tsx

@@ -24,7 +24,7 @@ describe('<Checkbox />', () => {
   });
 
   it.each([[true], [false]])('changes checked status on input change', async (checked) => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     const { user } = renderWithEvents(<Checkbox onChange={onChange} checked={checked}>Foo</Checkbox>);
 
     expect(onChange).not.toHaveBeenCalled();

test/utils/CopyToClipboardIcon.test.tsx

@@ -2,10 +2,10 @@ import { CopyToClipboardIcon } from '../../src/utils/CopyToClipboardIcon';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<CopyToClipboardIcon />', () => {
-  const onCopy = jest.fn();
+  const onCopy = vi.fn();
   const setUp = (text = 'foo') => renderWithEvents(<CopyToClipboardIcon text={text} onCopy={onCopy} />);
 
-  afterEach(jest.clearAllMocks);
+  afterEach(vi.clearAllMocks);
 
   it('wraps expected components', () => {
     const { container } = setUp();

test/utils/DropdownBtnMenu.test.tsx

@@ -6,7 +6,7 @@ import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<DropdownBtnMenu />', () => {
   const setUp = (props: Partial<DropdownBtnMenuProps> = {}) => renderWithEvents(
-    <DropdownBtnMenu {...fromPartial<DropdownBtnMenuProps>({ toggle: jest.fn(), ...props })}>
+    <DropdownBtnMenu {...fromPartial<DropdownBtnMenuProps>({ toggle: vi.fn(), ...props })}>
       the children
     </DropdownBtnMenu>,
   );

test/utils/OrderingDropdown.test.tsx

@@ -12,7 +12,7 @@ describe('<OrderingDropdown />', () => {
     baz: 'Hello World',
   };
   const setUp = (props: Partial<OrderingDropdownProps> = {}) => renderWithEvents(
-    <OrderingDropdown items={items} order={{}} onChange={jest.fn()} {...props} />,
+    <OrderingDropdown items={items} order={{}} onChange={vi.fn()} {...props} />,
   );
   const setUpWithDisplayedMenu = async (props: Partial<OrderingDropdownProps> = {}) => {
     const result = setUp(props);
@@ -65,7 +65,7 @@ describe('<OrderingDropdown />', () => {
   ])(
     'triggers change with proper params depending on clicked item and initial state',
     async (initialOrder, expectedNewField, expectedNewDir) => {
-      const onChange = jest.fn();
+      const onChange = vi.fn();
       const { user } = await setUpWithDisplayedMenu({ onChange, order: initialOrder });
 
       await user.click(screen.getAllByRole('menuitem')[0]);
@@ -76,7 +76,7 @@ describe('<OrderingDropdown />', () => {
   );
 
   it('clears selection when last item is clicked', async () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     const { user } = await setUpWithDisplayedMenu({ onChange, order: { field: 'baz', dir: 'ASC' } });
 
     await user.click(screen.getAllByRole('menuitem')[3]);

test/utils/PaginationDropdown.test.tsx

@@ -3,7 +3,7 @@ import { PaginationDropdown } from '../../src/utils/PaginationDropdown';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<PaginationDropdown />', () => {
-  const setValue = jest.fn();
+  const setValue = vi.fn();
   const setUp = async () => {
     const result = renderWithEvents(<PaginationDropdown ranges={[10, 50, 100, 200]} value={50} setValue={setValue} />);
     const { user } = result;
@@ -13,7 +13,7 @@ describe('<PaginationDropdown />', () => {
     return result;
   };
 
-  afterEach(jest.clearAllMocks);
+  afterEach(vi.clearAllMocks);
 
   it('renders expected amount of items', async () => {
     await setUp();

test/utils/__snapshots__/CopyToClipboardIcon.test.tsx.snap

@@ -1,4 +1,24 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<CopyToClipboardIcon /> > wraps expected components 1`] = `
+<div>
+  <svg
+    aria-hidden="true"
+    class="svg-inline--fa fa-clone ms-2 copy-to-clipboard-icon"
+    data-icon="clone"
+    data-prefix="far"
+    focusable="false"
+    role="img"
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M64 464H288c8.8 0 16-7.2 16-16V384h48v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h64v48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16zM224 304H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H224c-8.8 0-16 7.2-16 16V288c0 8.8 7.2 16 16 16zm-64-16V64c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64V288c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64z"
+      fill="currentColor"
+    />
+  </svg>
+</div>
+`;
 
 exports[`<CopyToClipboardIcon /> wraps expected components 1`] = `
 <div>

test/utils/__snapshots__/ExportBtn.test.tsx.snap

@@ -1,4 +1,22 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<ExportBtn /> > renders expected icon 1`] = `
+<svg
+  aria-hidden="true"
+  class="svg-inline--fa fa-file-csv "
+  data-icon="file-csv"
+  data-prefix="fas"
+  focusable="false"
+  role="img"
+  viewBox="0 0 384 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM80 224H96c22.1 0 40 17.9 40 40v8c0 8.8-7.2 16-16 16s-16-7.2-16-16v-8c0-4.4-3.6-8-8-8H80c-4.4 0-8 3.6-8 8v80c0 4.4 3.6 8 8 8H96c4.4 0 8-3.6 8-8v-8c0-8.8 7.2-16 16-16s16 7.2 16 16v8c0 22.1-17.9 40-40 40H80c-22.1 0-40-17.9-40-40V264c0-22.1 17.9-40 40-40zm72 46.4c0-25.6 20.8-46.4 46.4-46.4H216c8.8 0 16 7.2 16 16s-7.2 16-16 16H198.4c-7.9 0-14.4 6.4-14.4 14.4c0 5.2 2.8 9.9 7.2 12.5l25.4 14.5c14.4 8.3 23.4 23.6 23.4 40.3c0 25.6-20.8 46.4-46.4 46.4H168c-8.8 0-16-7.2-16-16s7.2-16 16-16h25.6c7.9 0 14.4-6.4 14.4-14.4c0-5.2-2.8-9.9-7.2-12.5l-25.4-14.5C160.9 302.4 152 287 152 270.4zM280 240v31.6c0 23 5.5 45.6 16 66c10.5-20.3 16-42.9 16-66V240c0-8.8 7.2-16 16-16s16 7.2 16 16v31.6c0 34.7-10.3 68.7-29.6 97.6l-5.1 7.7c-3 4.5-8 7.1-13.3 7.1s-10.3-2.7-13.3-7.1l-5.1-7.7c-19.3-28.9-29.6-62.9-29.6-97.6V240c0-8.8 7.2-16 16-16s16 7.2 16 16z"
+    fill="currentColor"
+  />
+</svg>
+`;
 
 exports[`<ExportBtn /> renders expected icon 1`] = `
 <svg

test/utils/__snapshots__/IconInput.test.tsx.snap

@@ -1,4 +1,88 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<IconInput /> > displays provided icon 1`] = `
+<div>
+  <div
+    class="icon-input-container"
+  >
+    <input
+      class="icon-input-container__input form-control"
+      type="text"
+    />
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-calendar fa-fw icon-input-container__icon"
+      data-icon="calendar"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      viewBox="0 0 448 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z"
+        fill="currentColor"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`<IconInput /> > displays provided icon 2`] = `
+<div>
+  <div
+    class="icon-input-container"
+  >
+    <input
+      class="icon-input-container__input form-control"
+      type="text"
+    />
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-apple-whole fa-fw icon-input-container__icon"
+      data-icon="apple-whole"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      viewBox="0 0 448 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M224 112c-8.8 0-16-7.2-16-16V80c0-44.2 35.8-80 80-80h16c8.8 0 16 7.2 16 16V32c0 44.2-35.8 80-80 80H224zM0 288c0-76.3 35.7-160 112-160c27.3 0 59.7 10.3 82.7 19.3c18.8 7.3 39.9 7.3 58.7 0c22.9-8.9 55.4-19.3 82.7-19.3c76.3 0 112 83.7 112 160c0 128-80 224-160 224c-16.5 0-38.1-6.6-51.5-11.3c-8.1-2.8-16.9-2.8-25 0c-13.4 4.7-35 11.3-51.5 11.3C80 512 0 416 0 288z"
+        fill="currentColor"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`<IconInput /> > displays provided icon 3`] = `
+<div>
+  <div
+    class="icon-input-container"
+  >
+    <input
+      class="icon-input-container__input form-control"
+      type="text"
+    />
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-table fa-fw icon-input-container__icon"
+      data-icon="table"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M64 256V160H224v96H64zm0 64H224v96H64V320zm224 96V320H448v96H288zM448 256H288V160H448v96zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"
+        fill="currentColor"
+      />
+    </svg>
+  </div>
+</div>
+`;
 
 exports[`<IconInput /> displays provided icon 1`] = `
 <div>

test/utils/dates/DateIntervalDropdownItems.test.tsx

@@ -6,7 +6,7 @@ import { DATE_INTERVALS, rangeOrIntervalToString } from '../../../src/utils/help
 import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<DateIntervalDropdownItems />', () => {
-  const onChange = jest.fn();
+  const onChange = vi.fn();
   const setUp = async () => {
     const { user, ...renderResult } = renderWithEvents(
       <DropdownBtn text="text">
@@ -20,7 +20,7 @@ describe('<DateIntervalDropdownItems />', () => {
     return { user, ...renderResult };
   };
 
-  afterEach(jest.clearAllMocks);
+  afterEach(vi.clearAllMocks);
 
   it('renders expected amount of items', async () => {
     await setUp();

test/utils/dates/DateIntervalSelector.test.tsx

@@ -6,7 +6,7 @@ import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<DateIntervalSelector />', () => {
   const activeInterval: DateInterval = 'last7Days';
-  const onChange = jest.fn();
+  const onChange = vi.fn();
   const setUp = () => renderWithEvents(
     <DateIntervalSelector allText="All text" active={activeInterval} onChange={onChange} />,
   );

test/utils/dates/DateRangeRow.test.tsx

@@ -3,13 +3,13 @@ import { DateRangeRow } from '../../../src/utils/dates/DateRangeRow';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<DateRangeRow />', () => {
-  const onEndDateChange = jest.fn();
-  const onStartDateChange = jest.fn();
+  const onEndDateChange = vi.fn();
+  const onStartDateChange = vi.fn();
   const setUp = () => renderWithEvents(
     <DateRangeRow onEndDateChange={onEndDateChange} onStartDateChange={onStartDateChange} />,
   );
 
-  afterEach(jest.clearAllMocks);
+  afterEach(vi.clearAllMocks);
 
   it('renders two date inputs', () => {
     setUp();

test/utils/dates/DateRangeSelector.test.tsx

@@ -6,7 +6,7 @@ import type { DateInterval } from '../../../src/utils/helpers/dateIntervals';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<DateRangeSelector />', () => {
-  const onDatesChange = jest.fn();
+  const onDatesChange = vi.fn();
   const setUp = async (props: Partial<DateRangeSelectorProps> = {}) => {
     const result = renderWithEvents(
       <DateRangeSelector
@@ -22,7 +22,7 @@ describe('<DateRangeSelector />', () => {
     return result;
   };
 
-  afterEach(jest.clearAllMocks);
+  afterEach(vi.clearAllMocks);
 
   it('renders proper amount of items', async () => {
     const { container } = await setUp();

test/utils/services/ColorGenerator.test.ts

@@ -6,12 +6,12 @@ import { MAIN_COLOR } from '../../../src/utils/theme';
 describe('ColorGenerator', () => {
   let colorGenerator: ColorGenerator;
   const storageMock = fromPartial<LocalStorage>({
-    set: jest.fn(),
-    get: jest.fn(),
+    set: vi.fn(),
+    get: vi.fn(),
   });
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     colorGenerator = new ColorGenerator(storageMock);
   });
 

test/utils/services/LocalStorage.test.ts

@@ -2,13 +2,13 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import { LocalStorage } from '../../../src/utils/services/LocalStorage';
 
 describe('LocalStorage', () => {
-  const getItem = jest.fn((key) => (key === 'shlink.foo' ? JSON.stringify({ foo: 'bar' }) : null));
-  const setItem = jest.fn();
+  const getItem = vi.fn((key) => (key === 'shlink.foo' ? JSON.stringify({ foo: 'bar' }) : null));
+  const setItem = vi.fn();
   const localStorageMock = fromPartial<Storage>({ getItem, setItem });
   let storage: LocalStorage;
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     storage = new LocalStorage(localStorageMock);
   });
 

test/utils/services/__mocks__/ColorGenerator.mock.ts

@@ -2,7 +2,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import type { ColorGenerator } from '../../../../src/utils/services/ColorGenerator';
 
 export const colorGeneratorMock = fromPartial<ColorGenerator>({
-  getColorForKey: jest.fn(() => 'red'),
-  setColorForKey: jest.fn(),
-  isColorLightForKey: jest.fn(() => false),
+  getColorForKey: vi.fn(() => 'red'),
+  setColorForKey: vi.fn(),
+  isColorLightForKey: vi.fn(() => false),
 });

test/utils/table/__snapshots__/TableOrderIcon.test.tsx.snap

@@ -1,4 +1,40 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<TableOrderIcon /> > renders an icon when all conditions are met 1`] = `
+<svg
+  aria-hidden="true"
+  class="svg-inline--fa fa-caret-down ms-1"
+  data-icon="caret-down"
+  data-prefix="fas"
+  focusable="false"
+  role="img"
+  viewBox="0 0 320 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+exports[`<TableOrderIcon /> > renders an icon when all conditions are met 2`] = `
+<svg
+  aria-hidden="true"
+  class="svg-inline--fa fa-caret-up ms-1"
+  data-icon="caret-up"
+  data-prefix="fas"
+  focusable="false"
+  role="img"
+  viewBox="0 0 320 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"
+    fill="currentColor"
+  />
+</svg>
+`;
 
 exports[`<TableOrderIcon /> renders an icon when all conditions are met 1`] = `
 <svg