@instructure/ui-pagination 9.2.1-snapshot-1 → 9.2.1-snapshot-3

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.2.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.2.1-snapshot-1) (2024-07-10)
+## [9.2.1-snapshot-3](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.2.1-snapshot-3) (2024-07-12)
 
 **Note:** Version bump only for package @instructure/ui-pagination
 

package/es/Pagination/PaginationArrowButton/__new-tests__/PaginationArrowButton.test.js

@@ -25,6 +25,7 @@ var _PaginationArrowButto;
 
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { PaginationArrowButton } from '../index';
 describe('<PaginationArrowButton />', () => {
@@ -39,7 +40,7 @@ describe('<PaginationArrowButton />', () => {
     expect(button).toBeInTheDocument();
   });
   it('should provide a ref to the button element', async () => {
-    const buttonRef = jest.fn();
+    const buttonRef = vi.fn();
     render( /*#__PURE__*/React.createElement(PaginationArrowButton, {
       direction: "prev",
       label: "Label",

package/es/Pagination/PaginationButton/__new-tests__/PaginationButton.test.js

@@ -25,6 +25,7 @@ var _PaginationButton, _PaginationButton2;
 
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { PaginationButton } from '../index';
 describe('<PaginationButton />', () => {
@@ -38,7 +39,7 @@ describe('<PaginationButton />', () => {
     expect(button).toHaveAttribute('aria-current', 'page');
   });
   it('should navigate using button when onClick provided', async () => {
-    const onClick = jest.fn();
+    const onClick = vi.fn();
     render( /*#__PURE__*/React.createElement(PaginationButton, {
       onClick: onClick
     }, "1"));
@@ -51,7 +52,7 @@ describe('<PaginationButton />', () => {
     });
   });
   it('should disable navigation to current page', async () => {
-    const onClick = jest.fn();
+    const onClick = vi.fn();
     render( /*#__PURE__*/React.createElement(PaginationButton, {
       onClick: onClick,
       current: true

package/es/Pagination/PaginationPageInput/__new-tests__/PaginationPageInput.test.js

@@ -24,12 +24,13 @@
 
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { PaginationPageInput } from '../index';
 const defaultSRLabel = (currentPage, numberOfPages) => `Select page (${currentPage} of ${numberOfPages})`;
 describe('<PaginationPageInput />', () => {
   it('should render', async () => {
-    const defaultOnChange = jest.fn();
+    const defaultOnChange = vi.fn();
     render( /*#__PURE__*/React.createElement(PaginationPageInput, {
       numberOfPages: 10,
       currentPageIndex: 0,
@@ -41,7 +42,7 @@ describe('<PaginationPageInput />', () => {
     expect(input.tagName).toBe('INPUT');
   });
   it('should display the current page number', async () => {
-    const defaultOnChange = jest.fn();
+    const defaultOnChange = vi.fn();
     render( /*#__PURE__*/React.createElement(PaginationPageInput, {
       numberOfPages: 10,
       currentPageIndex: 3,
@@ -52,7 +53,7 @@ describe('<PaginationPageInput />', () => {
     expect(input).toHaveAttribute('value', '4');
   });
   it('should correctly update page number', async () => {
-    const defaultOnChange = jest.fn();
+    const defaultOnChange = vi.fn();
     const _render = render( /*#__PURE__*/React.createElement(PaginationPageInput, {
         numberOfPages: 10,
         currentPageIndex: 3,
@@ -73,7 +74,7 @@ describe('<PaginationPageInput />', () => {
     expect(input).toHaveAttribute('value', '7');
   });
   it("shouldn't display the arrow keys of NumberInput", async () => {
-    const defaultOnChange = jest.fn();
+    const defaultOnChange = vi.fn();
     const _render2 = render( /*#__PURE__*/React.createElement(PaginationPageInput, {
         numberOfPages: 10,
         currentPageIndex: 3,
@@ -87,7 +88,7 @@ describe('<PaginationPageInput />', () => {
     expect(arrowKeys.length).toBe(0);
   });
   it("should disable the input on 'disabled'", async () => {
-    const defaultOnChange = jest.fn();
+    const defaultOnChange = vi.fn();
     render( /*#__PURE__*/React.createElement(PaginationPageInput, {
       numberOfPages: 10,
       currentPageIndex: 3,
@@ -99,7 +100,7 @@ describe('<PaginationPageInput />', () => {
     expect(input).toHaveAttribute('disabled');
   });
   it('should set the ScreenReaderLabel for the input', async () => {
-    const defaultOnChange = jest.fn();
+    const defaultOnChange = vi.fn();
     const _render3 = render( /*#__PURE__*/React.createElement(PaginationPageInput, {
         numberOfPages: 10,
         currentPageIndex: 3,
@@ -111,7 +112,7 @@ describe('<PaginationPageInput />', () => {
     expect(label).toHaveTextContent('Select page (4 of 10)');
   });
   it('should display the number of pages in the label', async () => {
-    const defaultOnChange = jest.fn();
+    const defaultOnChange = vi.fn();
     const _render4 = render( /*#__PURE__*/React.createElement(PaginationPageInput, {
         numberOfPages: 10,
         currentPageIndex: 3,

package/es/Pagination/__new-tests__/Pagination.test.js

@@ -25,6 +25,7 @@ var _Pagination, _Pagination2, _Pagination3, _Pagination4, _Pagination5, _Pagina
 
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
@@ -39,12 +40,15 @@ const buildPages = (count = 4, current = 0) => {
   });
 };
 describe('<Pagination />', () => {
+  let consoleWarningMock;
   let consoleErrorMock;
   beforeEach(() => {
     // Mocking console to prevent test output pollution and expect for messages
-    consoleErrorMock = jest.spyOn(console, 'error').mockImplementation();
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
   });
   afterEach(() => {
+    consoleWarningMock.mockRestore();
     consoleErrorMock.mockRestore();
   });
   it('should render all pages buttons', async () => {
@@ -718,7 +722,7 @@ describe('<Pagination />', () => {
       });
     });
     it(`should pass down the elementRef prop`, async () => {
-      const elementRef = jest.fn();
+      const elementRef = vi.fn();
       const _render19 = render( /*#__PURE__*/React.createElement(Pagination, {
           elementRef: elementRef,
           variant: "compact",
@@ -729,7 +733,7 @@ describe('<Pagination />', () => {
       expect(elementRef).toHaveBeenCalledWith(container.firstChild);
     });
     it('should navigate to adjacent pages', async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
       render( /*#__PURE__*/React.createElement(Pagination, {
         variant: "compact",
         labelNext: "Next",
@@ -810,8 +814,8 @@ describe('<Pagination />', () => {
       expect(container).toHaveTextContent('number: 6, current: 3');
     });
     it('should change pages on input change', async () => {
-      const onClick1 = jest.fn();
-      const onClick2 = jest.fn();
+      const onClick1 = vi.fn();
+      const onClick2 = vi.fn();
       const _render23 = render( /*#__PURE__*/React.createElement(Pagination, {
           variant: "input",
           labelNext: "Next",

package/lib/Pagination/PaginationArrowButton/__new-tests__/PaginationArrowButton.test.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
 require("@testing-library/jest-dom");
 var _index = require("../index");
 var _PaginationArrowButto;
@@ -41,7 +42,7 @@ describe('<PaginationArrowButton />', () => {
     expect(button).toBeInTheDocument();
   });
   it('should provide a ref to the button element', async () => {
-    const buttonRef = jest.fn();
+    const buttonRef = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.PaginationArrowButton, {
       direction: "prev",
       label: "Label",

package/lib/Pagination/PaginationButton/__new-tests__/PaginationButton.test.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
 require("@testing-library/jest-dom");
 var _index = require("../index");
 var _PaginationButton, _PaginationButton2;
@@ -40,7 +41,7 @@ describe('<PaginationButton />', () => {
     expect(button).toHaveAttribute('aria-current', 'page');
   });
   it('should navigate using button when onClick provided', async () => {
-    const onClick = jest.fn();
+    const onClick = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.PaginationButton, {
       onClick: onClick
     }, "1"));
@@ -53,7 +54,7 @@ describe('<PaginationButton />', () => {
     });
   });
   it('should disable navigation to current page', async () => {
-    const onClick = jest.fn();
+    const onClick = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.PaginationButton, {
       onClick: onClick,
       current: true

package/lib/Pagination/PaginationPageInput/__new-tests__/PaginationPageInput.test.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
 require("@testing-library/jest-dom");
 var _index = require("../index");
 /*
@@ -32,7 +33,7 @@ var _index = require("../index");
 const defaultSRLabel = (currentPage, numberOfPages) => `Select page (${currentPage} of ${numberOfPages})`;
 describe('<PaginationPageInput />', () => {
   it('should render', async () => {
-    const defaultOnChange = jest.fn();
+    const defaultOnChange = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.PaginationPageInput, {
       numberOfPages: 10,
       currentPageIndex: 0,
@@ -44,7 +45,7 @@ describe('<PaginationPageInput />', () => {
     expect(input.tagName).toBe('INPUT');
   });
   it('should display the current page number', async () => {
-    const defaultOnChange = jest.fn();
+    const defaultOnChange = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.PaginationPageInput, {
       numberOfPages: 10,
       currentPageIndex: 3,
@@ -55,7 +56,7 @@ describe('<PaginationPageInput />', () => {
     expect(input).toHaveAttribute('value', '4');
   });
   it('should correctly update page number', async () => {
-    const defaultOnChange = jest.fn();
+    const defaultOnChange = _vitest.vi.fn();
     const _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.PaginationPageInput, {
         numberOfPages: 10,
         currentPageIndex: 3,
@@ -76,7 +77,7 @@ describe('<PaginationPageInput />', () => {
     expect(input).toHaveAttribute('value', '7');
   });
   it("shouldn't display the arrow keys of NumberInput", async () => {
-    const defaultOnChange = jest.fn();
+    const defaultOnChange = _vitest.vi.fn();
     const _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.PaginationPageInput, {
         numberOfPages: 10,
         currentPageIndex: 3,
@@ -90,7 +91,7 @@ describe('<PaginationPageInput />', () => {
     expect(arrowKeys.length).toBe(0);
   });
   it("should disable the input on 'disabled'", async () => {
-    const defaultOnChange = jest.fn();
+    const defaultOnChange = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.PaginationPageInput, {
       numberOfPages: 10,
       currentPageIndex: 3,
@@ -102,7 +103,7 @@ describe('<PaginationPageInput />', () => {
     expect(input).toHaveAttribute('disabled');
   });
   it('should set the ScreenReaderLabel for the input', async () => {
-    const defaultOnChange = jest.fn();
+    const defaultOnChange = _vitest.vi.fn();
     const _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.PaginationPageInput, {
         numberOfPages: 10,
         currentPageIndex: 3,
@@ -114,7 +115,7 @@ describe('<PaginationPageInput />', () => {
     expect(label).toHaveTextContent('Select page (4 of 10)');
   });
   it('should display the number of pages in the label', async () => {
-    const defaultOnChange = jest.fn();
+    const defaultOnChange = _vitest.vi.fn();
     const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.PaginationPageInput, {
         numberOfPages: 10,
         currentPageIndex: 3,

package/lib/Pagination/__new-tests__/Pagination.test.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
@@ -41,12 +42,15 @@ const buildPages = (count = 4, current = 0) => {
   });
 };
 describe('<Pagination />', () => {
+  let consoleWarningMock;
   let consoleErrorMock;
   beforeEach(() => {
     // Mocking console to prevent test output pollution and expect for messages
-    consoleErrorMock = jest.spyOn(console, 'error').mockImplementation();
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
   });
   afterEach(() => {
+    consoleWarningMock.mockRestore();
     consoleErrorMock.mockRestore();
   });
   it('should render all pages buttons', async () => {
@@ -720,7 +724,7 @@ describe('<Pagination />', () => {
       });
     });
     it(`should pass down the elementRef prop`, async () => {
-      const elementRef = jest.fn();
+      const elementRef = _vitest.vi.fn();
       const _render19 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Pagination, {
           elementRef: elementRef,
           variant: "compact",
@@ -731,7 +735,7 @@ describe('<Pagination />', () => {
       expect(elementRef).toHaveBeenCalledWith(container.firstChild);
     });
     it('should navigate to adjacent pages', async () => {
-      const onClick = jest.fn();
+      const onClick = _vitest.vi.fn();
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Pagination, {
         variant: "compact",
         labelNext: "Next",
@@ -812,8 +816,8 @@ describe('<Pagination />', () => {
       expect(container).toHaveTextContent('number: 6, current: 3');
     });
     it('should change pages on input change', async () => {
-      const onClick1 = jest.fn();
-      const onClick2 = jest.fn();
+      const onClick1 = _vitest.vi.fn();
+      const onClick2 = _vitest.vi.fn();
       const _render23 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Pagination, {
           variant: "input",
           labelNext: "Next",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-pagination",
-  "version": "9.2.1-snapshot-1",
+  "version": "9.2.1-snapshot-3",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,32 +23,33 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "9.2.1-snapshot-1",
-    "@instructure/ui-babel-preset": "9.2.1-snapshot-1",
-    "@instructure/ui-test-utils": "9.2.1-snapshot-1",
+    "@instructure/ui-axe-check": "9.2.1-snapshot-3",
+    "@instructure/ui-babel-preset": "9.2.1-snapshot-3",
+    "@instructure/ui-test-utils": "9.2.1-snapshot-3",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.5.2"
+    "@testing-library/user-event": "^14.5.2",
+    "vitest": "^1.6.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/emotion": "9.2.1-snapshot-1",
-    "@instructure/shared-types": "9.2.1-snapshot-1",
-    "@instructure/ui-a11y-content": "9.2.1-snapshot-1",
-    "@instructure/ui-a11y-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-buttons": "9.2.1-snapshot-1",
-    "@instructure/ui-dom-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-icons": "9.2.1-snapshot-1",
-    "@instructure/ui-number-input": "9.2.1-snapshot-1",
-    "@instructure/ui-portal": "9.2.1-snapshot-1",
-    "@instructure/ui-prop-types": "9.2.1-snapshot-1",
-    "@instructure/ui-react-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-testable": "9.2.1-snapshot-1",
-    "@instructure/ui-themes": "9.2.1-snapshot-1",
-    "@instructure/ui-tooltip": "9.2.1-snapshot-1",
-    "@instructure/ui-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-view": "9.2.1-snapshot-1",
-    "@instructure/uid": "9.2.1-snapshot-1",
+    "@instructure/emotion": "9.2.1-snapshot-3",
+    "@instructure/shared-types": "9.2.1-snapshot-3",
+    "@instructure/ui-a11y-content": "9.2.1-snapshot-3",
+    "@instructure/ui-a11y-utils": "9.2.1-snapshot-3",
+    "@instructure/ui-buttons": "9.2.1-snapshot-3",
+    "@instructure/ui-dom-utils": "9.2.1-snapshot-3",
+    "@instructure/ui-icons": "9.2.1-snapshot-3",
+    "@instructure/ui-number-input": "9.2.1-snapshot-3",
+    "@instructure/ui-portal": "9.2.1-snapshot-3",
+    "@instructure/ui-prop-types": "9.2.1-snapshot-3",
+    "@instructure/ui-react-utils": "9.2.1-snapshot-3",
+    "@instructure/ui-testable": "9.2.1-snapshot-3",
+    "@instructure/ui-themes": "9.2.1-snapshot-3",
+    "@instructure/ui-tooltip": "9.2.1-snapshot-3",
+    "@instructure/ui-utils": "9.2.1-snapshot-3",
+    "@instructure/ui-view": "9.2.1-snapshot-3",
+    "@instructure/uid": "9.2.1-snapshot-3",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Pagination/PaginationArrowButton/__new-tests__/PaginationArrowButton.test.tsx

@@ -24,6 +24,7 @@
 
 import React from 'react'
 import { render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
 
 import '@testing-library/jest-dom'
 import { PaginationArrowButton } from '../index'
@@ -38,7 +39,7 @@ describe('<PaginationArrowButton />', () => {
   })
 
   it('should provide a ref to the button element', async () => {
-    const buttonRef = jest.fn()
+    const buttonRef = vi.fn()
 
     render(
       <PaginationArrowButton

package/src/Pagination/PaginationButton/__new-tests__/PaginationButton.test.tsx

@@ -24,6 +24,7 @@
 
 import React from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
 
 import '@testing-library/jest-dom'
 import { PaginationButton } from '../index'
@@ -37,7 +38,7 @@ describe('<PaginationButton />', () => {
   })
 
   it('should navigate using button when onClick provided', async () => {
-    const onClick = jest.fn()
+    const onClick = vi.fn()
     render(<PaginationButton onClick={onClick}>1</PaginationButton>)
 
     const button = screen.getByRole('button', { name: '1' })
@@ -50,7 +51,7 @@ describe('<PaginationButton />', () => {
   })
 
   it('should disable navigation to current page', async () => {
-    const onClick = jest.fn()
+    const onClick = vi.fn()
     render(
       <PaginationButton onClick={onClick} current>
         1

package/src/Pagination/PaginationPageInput/__new-tests__/PaginationPageInput.test.tsx

@@ -24,6 +24,7 @@
 
 import React from 'react'
 import { render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
 
 import '@testing-library/jest-dom'
 import { PaginationPageInput } from '../index'
@@ -33,7 +34,7 @@ const defaultSRLabel = (currentPage: number, numberOfPages: number) =>
 
 describe('<PaginationPageInput />', () => {
   it('should render', async () => {
-    const defaultOnChange = jest.fn()
+    const defaultOnChange = vi.fn()
     render(
       <PaginationPageInput
         numberOfPages={10}
@@ -49,7 +50,7 @@ describe('<PaginationPageInput />', () => {
   })
 
   it('should display the current page number', async () => {
-    const defaultOnChange = jest.fn()
+    const defaultOnChange = vi.fn()
     render(
       <PaginationPageInput
         numberOfPages={10}
@@ -64,7 +65,7 @@ describe('<PaginationPageInput />', () => {
   })
 
   it('should correctly update page number', async () => {
-    const defaultOnChange = jest.fn()
+    const defaultOnChange = vi.fn()
     const { rerender } = render(
       <PaginationPageInput
         numberOfPages={10}
@@ -90,7 +91,7 @@ describe('<PaginationPageInput />', () => {
   })
 
   it("shouldn't display the arrow keys of NumberInput", async () => {
-    const defaultOnChange = jest.fn()
+    const defaultOnChange = vi.fn()
     const { container } = render(
       <PaginationPageInput
         numberOfPages={10}
@@ -107,7 +108,7 @@ describe('<PaginationPageInput />', () => {
   })
 
   it("should disable the input on 'disabled'", async () => {
-    const defaultOnChange = jest.fn()
+    const defaultOnChange = vi.fn()
     render(
       <PaginationPageInput
         numberOfPages={10}
@@ -123,7 +124,7 @@ describe('<PaginationPageInput />', () => {
   })
 
   it('should set the ScreenReaderLabel for the input', async () => {
-    const defaultOnChange = jest.fn()
+    const defaultOnChange = vi.fn()
     const { container } = render(
       <PaginationPageInput
         numberOfPages={10}
@@ -138,7 +139,7 @@ describe('<PaginationPageInput />', () => {
   })
 
   it('should display the number of pages in the label', async () => {
-    const defaultOnChange = jest.fn()
+    const defaultOnChange = vi.fn()
     const { container } = render(
       <PaginationPageInput
         numberOfPages={10}

package/src/Pagination/__new-tests__/Pagination.test.tsx

@@ -24,6 +24,7 @@
 
 import React from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
 import { runAxeCheck } from '@instructure/ui-axe-check'
 import userEvent from '@testing-library/user-event'
 
@@ -43,14 +44,21 @@ const buildPages = (count = 4, current = 0) => {
 }
 
 describe('<Pagination />', () => {
-  let consoleErrorMock: jest.SpyInstance
+  let consoleWarningMock: ReturnType<typeof vi.spyOn>
+  let consoleErrorMock: ReturnType<typeof vi.spyOn>
 
   beforeEach(() => {
     // Mocking console to prevent test output pollution and expect for messages
-    consoleErrorMock = jest.spyOn(console, 'error').mockImplementation()
+    consoleWarningMock = vi
+      .spyOn(console, 'warn')
+      .mockImplementation(() => {}) as any
+    consoleErrorMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {}) as any
   })
 
   afterEach(() => {
+    consoleWarningMock.mockRestore()
     consoleErrorMock.mockRestore()
   })
 
@@ -795,7 +803,7 @@ describe('<Pagination />', () => {
     })
 
     it(`should pass down the elementRef prop`, async () => {
-      const elementRef = jest.fn()
+      const elementRef = vi.fn()
 
       const { container } = render(
         <Pagination
@@ -811,7 +819,7 @@ describe('<Pagination />', () => {
     })
 
     it('should navigate to adjacent pages', async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       render(
         <Pagination variant="compact" labelNext="Next" labelPrev="Previous">
@@ -914,8 +922,8 @@ describe('<Pagination />', () => {
     })
 
     it('should change pages on input change', async () => {
-      const onClick1 = jest.fn()
-      const onClick2 = jest.fn()
+      const onClick1 = vi.fn()
+      const onClick2 = vi.fn()
 
       const { container } = render(
         <Pagination