@griddo/ax 12.3.0-beta.0 → 12.4.0

package/src/__tests__/components/Pagination/Pagination.test.tsx

@@ -1,11 +1,10 @@
-import "jest-styled-components";
 
 import Pagination, { type IPaginationProps } from "@ax/components/Pagination";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { ThemeProvider } from "styled-components";
 
 afterEach(cleanup);
@@ -14,7 +13,7 @@ const defaultProps = mock<IPaginationProps>();
 
 describe("Pagination component rendering", () => {
 	it("should render pagination component", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -31,7 +30,7 @@ describe("Pagination component rendering", () => {
 	});
 
 	it("should render pagination label when size equals 'S'", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -49,7 +48,7 @@ describe("Pagination component rendering", () => {
 	});
 
 	it("should render pagination text input when size is undefined", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -67,7 +66,7 @@ describe("Pagination component rendering", () => {
 	});
 
 	it("should render arrow left disabled when it's first page", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -87,7 +86,7 @@ describe("Pagination component rendering", () => {
 	});
 
 	it("should render arrow right disabled when it's last page", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 2;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -109,7 +108,7 @@ describe("Pagination component rendering", () => {
 
 describe("Pagination component events", () => {
 	it("should call setPage when click next page button", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -128,7 +127,7 @@ describe("Pagination component events", () => {
 	});
 
 	it("should call setPage when click next page button", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -147,7 +146,7 @@ describe("Pagination component events", () => {
 	});
 
 	it("should call setPage when click prev page button", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 2;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -166,7 +165,7 @@ describe("Pagination component events", () => {
 	});
 
 	it("should call setPage when change input value and blur", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -186,7 +185,7 @@ describe("Pagination component events", () => {
 	});
 
 	it("should call setPage with 1 when change input value is not a number", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -206,7 +205,7 @@ describe("Pagination component events", () => {
 	});
 
 	it("shouldn't call setPage when current page is lower than or equal to 1", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -224,7 +223,7 @@ describe("Pagination component events", () => {
 	});
 
 	it("shouldn't call setPage when current page is greater than or equal to last page", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 2;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;

package/src/__tests__/components/ProfileImage/ProfileImage.test.tsx

@@ -7,9 +7,8 @@ import globalTheme from "@ax/themes/theme.json";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { ThemeProvider } from "styled-components";
 
-jest.mock(
-	"@ax/components/ImageDragAndDrop",
-	() => (props: any) =>
+vi.mock("@ax/components/ImageDragAndDrop", () => ({
+	default: (props: any) =>
 		React.createElement(
 			"div",
 			{
@@ -18,14 +17,14 @@ jest.mock(
 			},
 			React.createElement("button", { type: "button" }, "Upload Mock"),
 		),
-);
+}));
 
 afterEach(cleanup);
 
 const renderProfileImage = (props = {}) =>
 	render(
 		<ThemeProvider theme={parseTheme(globalTheme)}>
-			<ProfileImage handleImage={jest.fn()} size={96} {...props} />
+			<ProfileImage handleImage={vi.fn()} size={96} {...props} />
 		</ThemeProvider>,
 	);
 
@@ -91,7 +90,7 @@ describe("ProfileImage modal", () => {
 
 describe("ProfileImage upload", () => {
 	it("should call handleImage when image is uploaded", () => {
-		const handleImage = jest.fn();
+		const handleImage = vi.fn();
 		renderProfileImage({ handleImage });
 
 		const wrapper = screen.getByTestId("profile-image-wrapper");
@@ -104,7 +103,7 @@ describe("ProfileImage upload", () => {
 	});
 
 	it("should close modal after successful upload", () => {
-		const handleImage = jest.fn();
+		const handleImage = vi.fn();
 		renderProfileImage({ handleImage });
 
 		const wrapper = screen.getByTestId("profile-image-wrapper");

package/src/__tests__/components/ReorderArrows/ReorderArrows.test.tsx

@@ -1,7 +1,8 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { render, cleanup, screen, fireEvent } from "@testing-library/react";
 import { parseTheme } from "@ax/helpers";
 import "@testing-library/jest-dom";
@@ -58,7 +59,7 @@ describe("ReorderArrows component rendering", () => {
 
 describe("ReorderArrows component events trigger", () => {
 	it("should trigger the handleDownClick", () => {
-		const handleDownClickMock = defaultProps.handleDownClick as jest.MockedFunction<(value: any) => void>;
+		const handleDownClickMock = defaultProps.handleDownClick as MockedFunction<(value: any) => void>;
 		defaultProps.index = 0;
 		defaultProps.listLength = 10;
 
@@ -77,7 +78,7 @@ describe("ReorderArrows component events trigger", () => {
 	});
 
 	it("should trigger the handleUpClick", () => {
-		const handleUpClickMock = defaultProps.handleUpClick as jest.MockedFunction<(value: any) => void>;
+		const handleUpClickMock = defaultProps.handleUpClick as MockedFunction<(value: any) => void>;
 		defaultProps.index = 9;
 		defaultProps.listLength = 10;
 		render(

package/src/__tests__/components/ResizePanel/ResizePanel.test.tsx

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import React, { useRef } from "react";
 
 import { ThemeProvider } from "styled-components";
@@ -11,23 +12,21 @@ import globalTheme from "@ax/themes/theme.json";
 afterEach(cleanup);
 
 beforeEach(() => {
-	global.ResizeObserver = jest.fn().mockImplementation(() => ({
-		observe: jest.fn(),
-		unobserve: jest.fn(),
-		disconnect: jest.fn(),
-	}));
+	global.ResizeObserver = vi.fn().mockImplementation(function () {
+		return { observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() };
+	});
 });
 
-jest.mock("react", () => {
-	const originReact = jest.requireActual("react");
-	const mUseRef = jest.fn();
+vi.mock("react", async () => {
+	const originReact = await vi.importActual("react");
+	const mUseRef = vi.fn();
 	return {
 		...originReact,
 		useRef: mUseRef,
 	};
 });
 
-const useMockRef = useRef as jest.MockedFunction<typeof useRef>;
+const useMockRef = useRef as MockedFunction<typeof useRef>;
 
 describe("ResizePanel component rendering", () => {
 	it("should render the component with fixed panel", () => {
@@ -103,7 +102,7 @@ describe("ResizePanel mouse events", () => {
 		const rightPanel = screen.getByTestId("right-panel");
 		expect(rightPanel).toBeTruthy();
 
-		jest.spyOn(rightPanel, "offsetWidth", "get").mockReturnValue(344);
+		vi.spyOn(rightPanel, "offsetWidth", "get").mockReturnValue(344);
 
 		// Forzar un re-render para que ResizePanel use el ancho mockeado
 		// (React mide en requestAnimationFrame, así que usamos act)
@@ -145,7 +144,7 @@ describe("ResizePanel mouse events", () => {
 		const rightPanel = screen.getByTestId("right-panel");
 		expect(rightPanel).toBeTruthy();
 
-		jest.spyOn(rightPanel, "offsetWidth", "get").mockReturnValue(344);
+		vi.spyOn(rightPanel, "offsetWidth", "get").mockReturnValue(344);
 
 		// Forzar un re-render para que ResizePanel use el ancho mockeado
 		// (React mide en requestAnimationFrame, así que usamos act)

package/src/__tests__/components/RestrictionsModal/CurrentAccessList/CurrentAccessList.test.tsx

@@ -1,3 +1,4 @@
+import type { Mock } from "vitest";
 import { parseTheme } from "@ax/helpers";
 
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
@@ -8,9 +9,9 @@ import CurrentAccessList from "@ax/components/RestrictionsModal/CurrentAccessLis
 import globalTheme from "@ax/themes/theme.json";
 import type { IUser } from "@ax/types";
 
-jest.mock("react-redux", () => ({
-	...jest.requireActual("react-redux"),
-	useSelector: jest.fn((selector) => {
+vi.mock("react-redux", async () => ({
+	...(await vi.importActual("react-redux")),
+	useSelector: vi.fn((selector) => {
 		const mockState = {
 			users: {
 				roles: [
@@ -28,7 +29,7 @@ afterEach(cleanup);
 const defaultProps: {
 	restrictionType: "users" | "roles";
 	currentAccessGrants: { users: number[]; roles: number[] };
-	onEdit: jest.Mock;
+	onEdit: Mock;
 	users: IUser[];
 } = {
 	restrictionType: "users",
@@ -36,7 +37,7 @@ const defaultProps: {
 		users: [1, 2],
 		roles: [],
 	},
-	onEdit: jest.fn(),
+	onEdit: vi.fn(),
 	users: [
 		{
 			id: 1,
@@ -144,7 +145,7 @@ describe("CurrentAccessList component rendering", () => {
 
 describe("CurrentAccessList component events", () => {
 	it("should call onEdit when Manage User Access button is clicked", () => {
-		const onEditMock = jest.fn();
+		const onEditMock = vi.fn();
 
 		renderComponent({
 			...defaultProps,

package/src/__tests__/components/RestrictionsModal/OptionsStep/OptionsStep.test.tsx

@@ -1,3 +1,4 @@
+import type { Mock } from "vitest";
 import React from "react";
 
 import { ThemeProvider } from "styled-components";
@@ -12,14 +13,14 @@ afterEach(cleanup);
 
 const defaultProps: {
 	restrictionType: "users" | "roles";
-	onRestrictionTypeChange: jest.Mock;
-	onCancel: jest.Mock;
-	onNext: jest.Mock;
+	onRestrictionTypeChange: Mock;
+	onCancel: Mock;
+	onNext: Mock;
 } = {
 	restrictionType: "users",
-	onRestrictionTypeChange: jest.fn(),
-	onCancel: jest.fn(),
-	onNext: jest.fn(),
+	onRestrictionTypeChange: vi.fn(),
+	onCancel: vi.fn(),
+	onNext: vi.fn(),
 };
 
 const renderComponent = (props = defaultProps) =>
@@ -81,7 +82,7 @@ describe("OptionsStep component rendering", () => {
 
 describe("OptionsStep component events", () => {
 	it("should call onRestrictionTypeChange when users option is clicked", () => {
-		const onRestrictionTypeChangeMock = jest.fn();
+		const onRestrictionTypeChangeMock = vi.fn();
 
 		renderComponent({
 			...defaultProps,
@@ -97,7 +98,7 @@ describe("OptionsStep component events", () => {
 	});
 
 	it("should call onRestrictionTypeChange when roles option is clicked", () => {
-		const onRestrictionTypeChangeMock = jest.fn();
+		const onRestrictionTypeChangeMock = vi.fn();
 
 		renderComponent({
 			...defaultProps,
@@ -113,7 +114,7 @@ describe("OptionsStep component events", () => {
 	});
 
 	it("should call onCancel when Cancel button is clicked", () => {
-		const onCancelMock = jest.fn();
+		const onCancelMock = vi.fn();
 
 		renderComponent({
 			...defaultProps,
@@ -127,7 +128,7 @@ describe("OptionsStep component events", () => {
 	});
 
 	it("should call onNext when Next button is clicked", () => {
-		const onNextMock = jest.fn();
+		const onNextMock = vi.fn();
 
 		renderComponent({
 			...defaultProps,
@@ -141,7 +142,7 @@ describe("OptionsStep component events", () => {
 	});
 
 	it("should toggle between users and roles selections", () => {
-		const onRestrictionTypeChangeMock = jest.fn();
+		const onRestrictionTypeChangeMock = vi.fn();
 
 		renderComponent({
 			...defaultProps,

package/src/__tests__/components/RestrictionsModal/RestrictionsModal.test.tsx

@@ -1,3 +1,4 @@
+import type { Mock } from "vitest";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { ThemeProvider } from "styled-components";
 import "@testing-library/jest-dom";
@@ -7,13 +8,13 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import type { PageAccessGrantsSummary } from "@ax/types";
 
-jest.mock("@ax/components/RestrictionsModal/utils", () => ({
-	fetchUsers: jest.fn().mockResolvedValue([]),
+vi.mock("@ax/components/RestrictionsModal/utils", async () => ({
+	fetchUsers: vi.fn().mockResolvedValue([]),
 }));
 
-jest.mock("react-redux", () => ({
-	...jest.requireActual("react-redux"),
-	useSelector: jest.fn((selector) => {
+vi.mock("react-redux", async () => ({
+	...(await vi.importActual("react-redux")),
+	useSelector: vi.fn((selector) => {
 		const mockState = {
 			sites: {
 				currentSiteInfo: { id: 1 },
@@ -34,15 +35,15 @@ afterEach(cleanup);
 
 const defaultProps: {
 	isOpen: boolean;
-	toggleModal: jest.Mock;
+	toggleModal: Mock;
 	currentAccessGrants: PageAccessGrantsSummary | undefined;
-	onUpdateAccessGrants: jest.Mock;
+	onUpdateAccessGrants: Mock;
 	isSaving: boolean;
 } = {
 	isOpen: false,
-	toggleModal: jest.fn(),
+	toggleModal: vi.fn(),
 	currentAccessGrants: undefined,
-	onUpdateAccessGrants: jest.fn().mockResolvedValue(undefined),
+	onUpdateAccessGrants: vi.fn().mockResolvedValue(undefined),
 	isSaving: false,
 };
 
@@ -102,7 +103,7 @@ describe("RestrictionsModal component navigation", () => {
 	});
 
 	it("should close modal when Cancel button is clicked", () => {
-		const toggleModalMock = jest.fn();
+		const toggleModalMock = vi.fn();
 
 		renderComponent({
 			...defaultProps,

package/src/__tests__/components/RestrictionsModal/RolesList/RolesList.test.tsx

@@ -5,11 +5,11 @@ import "@testing-library/jest-dom";
 
 import globalTheme from "@ax/themes/theme.json";
 import RolesList from "@ax/components/RestrictionsModal/RolesList";
-import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
+import { render, cleanup, screen, fireEvent } from "../../../../../config/tests/test-utils";
 
 afterEach(() => {
 	cleanup();
-	jest.resetAllMocks();
+	vi.resetAllMocks();
 });
 
 const mockStore = configureStore();
@@ -25,11 +25,11 @@ const initialState = {
 };
 
 const defaultProps = {
-	onCancel: jest.fn(),
-	onApply: jest.fn(),
+	onCancel: vi.fn(),
+	onApply: vi.fn(),
 	selectedRoleIds: [],
 	isSaving: false,
-	onResetAccess: jest.fn(),
+	onResetAccess: vi.fn(),
 };
 
 const renderComponent = (props = defaultProps, storeState = initialState) => {
@@ -178,7 +178,7 @@ describe("RolesList component role selection", () => {
 
 describe("RolesList component actions", () => {
 	it("should call onApply with selected role IDs when Apply button is clicked", () => {
-		const onApplyMock = jest.fn();
+		const onApplyMock = vi.fn();
 
 		renderComponent({ ...defaultProps, onApply: onApplyMock });
 
@@ -192,7 +192,7 @@ describe("RolesList component actions", () => {
 	});
 
 	it("should call onCancel when Cancel button is clicked", () => {
-		const onCancelMock = jest.fn();
+		const onCancelMock = vi.fn();
 
 		renderComponent({
 			...defaultProps,
@@ -207,7 +207,7 @@ describe("RolesList component actions", () => {
 	});
 
 	it("should call onResetAccess when Reset Page Access button is clicked", () => {
-		const onResetAccessMock = jest.fn();
+		const onResetAccessMock = vi.fn();
 
 		renderComponent({
 			...defaultProps,

package/src/__tests__/components/RestrictionsModal/UsersList/UsersList.test.tsx

@@ -1,3 +1,4 @@
+import type { Mock } from "vitest";
 import { act } from "@testing-library/react";
 import { ThemeProvider } from "styled-components";
 import configureStore from "redux-mock-store";
@@ -7,10 +8,10 @@ import "@testing-library/jest-dom";
 import globalTheme from "@ax/themes/theme.json";
 import UsersList from "@ax/components/RestrictionsModal/UsersList";
 import type { IUser } from "@ax/types";
-import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
+import { render, cleanup, screen, fireEvent } from "../../../../../config/tests/test-utils";
 
-jest.mock("@ax/components/RestrictionsModal/utils", () => ({
-	fetchUsers: jest.fn().mockResolvedValue([
+vi.mock("@ax/components/RestrictionsModal/utils", () => ({
+	fetchUsers: vi.fn().mockResolvedValue([
 		{ id: 1, username: "john", name: "John Doe", email: "john@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
 		{ id: 2, username: "jane", name: "Jane Smith", email: "jane@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
 		{ id: 3, username: "bob", name: "Bob Wilson", email: "bob@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
@@ -19,7 +20,7 @@ jest.mock("@ax/components/RestrictionsModal/utils", () => ({
 
 afterEach(() => {
 	cleanup();
-	jest.resetAllMocks();
+	vi.resetAllMocks();
 });
 
 const mockStore = configureStore();
@@ -34,18 +35,18 @@ const initialState = {
 };
 
 const defaultProps: {
-	onCancel: jest.Mock;
-	onApply: jest.Mock;
+	onCancel: Mock;
+	onApply: Mock;
 	selectedUserIds: number[];
 	isSaving: boolean;
-	onResetAccess: jest.Mock;
+	onResetAccess: Mock;
 	users: IUser[];
 } = {
-	onCancel: jest.fn(),
-	onApply: jest.fn(),
+	onCancel: vi.fn(),
+	onApply: vi.fn(),
 	selectedUserIds: [],
 	isSaving: false,
-	onResetAccess: jest.fn(),
+	onResetAccess: vi.fn(),
 	users: [
 		{ id: 1, username: "john", name: "John Doe", email: "john@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
 		{ id: 2, username: "jane", name: "Jane Smith", email: "jane@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
@@ -189,7 +190,7 @@ describe("UsersList component user selection", () => {
 	});
 
 	it("should call onApply with selected user IDs when Apply button is clicked", async () => {
-		const onApplyMock = jest.fn();
+		const onApplyMock = vi.fn();
 
 		renderComponent({ ...defaultProps, onApply: onApplyMock });
 
@@ -205,7 +206,7 @@ describe("UsersList component user selection", () => {
 	});
 
 	it("should include current user when applying selection", async () => {
-		const onApplyMock = jest.fn();
+		const onApplyMock = vi.fn();
 
 		renderComponent({
 			...defaultProps,
@@ -224,7 +225,7 @@ describe("UsersList component user selection", () => {
 
 describe("UsersList component actions", () => {
 	it("should call onCancel when Cancel button is clicked", async () => {
-		const onCancelMock = jest.fn();
+		const onCancelMock = vi.fn();
 
 		await act(async () => {
 			renderComponent({
@@ -244,7 +245,7 @@ describe("UsersList component actions", () => {
 	});
 
 	it("should call onResetAccess when Reset Page Access button is clicked", () => {
-		const onResetAccessMock = jest.fn();
+		const onResetAccessMock = vi.fn();
 
 		renderComponent({
 			...defaultProps,
@@ -270,7 +271,7 @@ describe("UsersList component actions", () => {
 	});
 
 	it("should ensure current user is always included in apply", async () => {
-		const onApplyMock = jest.fn();
+		const onApplyMock = vi.fn();
 
 		renderComponent({
 			...defaultProps,

package/src/__tests__/components/SearchField/SearchField.test.tsx

@@ -13,7 +13,7 @@ afterEach(cleanup);
 
 describe("Search field component rendering", () => {
 	it("should render the component opened", () => {
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 		const defaultProps: ISearchFieldProps = {
 			onChange: onChangeMock,
 		};
@@ -34,7 +34,7 @@ describe("Search field component rendering", () => {
 	});
 
 	it("should render the component opened with placeholder", () => {
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 		const defaultProps: ISearchFieldProps = {
 			onChange: onChangeMock,
 			placeholder: "Search",
@@ -58,7 +58,7 @@ describe("Search field component rendering", () => {
 	});
 
 	it("should render the component closed", () => {
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 		const defaultProps: ISearchFieldProps = {
 			onChange: onChangeMock,
 			closeOnInactive: true,
@@ -80,7 +80,7 @@ describe("Search field component rendering", () => {
 	});
 
 	it("should render the component disabled", () => {
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 		const defaultProps: ISearchFieldProps = {
 			onChange: onChangeMock,
 			closeOnInactive: false,
@@ -100,7 +100,7 @@ describe("Search field component rendering", () => {
 
 describe("Search field filters", () => {
 	it("should render the component with search filters", () => {
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		const searchFilters = [
 			{ value: "filterby", label: "Filter by" },
@@ -131,8 +131,8 @@ describe("Search field filters", () => {
 	});
 
 	it("should call onFilterChange when selecting option", async () => {
-		const onChangeMock = jest.fn();
-		const onFilterChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
+		const onFilterChangeMock = vi.fn();
 
 		const searchFilters = [
 			{ value: "filterby", label: "Filter by" },
@@ -167,7 +167,7 @@ describe("Search field filters", () => {
 
 describe("search field events", () => {
 	it("should open on icon search click and show field and close icon", () => {
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 		const defaultProps: ISearchFieldProps = {
 			onChange: onChangeMock,
 			closeOnInactive: true,
@@ -204,7 +204,7 @@ describe("search field events", () => {
 	});
 
 	it("should close and clear on close icon click and hide field and search icon if closeOnActive", () => {
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 		const defaultProps: ISearchFieldProps = {
 			onChange: onChangeMock,
 			closeOnInactive: true,
@@ -246,7 +246,7 @@ describe("search field events", () => {
 	});
 
 	it("should clear and not close on close icon click if not closeOnActive and input is not empty", () => {
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 		const defaultProps: ISearchFieldProps = {
 			onChange: onChangeMock,
 			closeOnInactive: false,
@@ -280,7 +280,7 @@ describe("search field events", () => {
 	});
 
 	it("show press enter on input type", () => {
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 		const defaultProps: ISearchFieldProps = {
 			onChange: onChangeMock,
 			closeOnInactive: true,
@@ -311,7 +311,7 @@ describe("search field events", () => {
 	});
 
 	it("should call onchange on input type", () => {
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 		const defaultProps: ISearchFieldProps = {
 			onChange: onChangeMock,
 			closeOnInactive: true,
@@ -342,7 +342,7 @@ describe("search field events", () => {
 	});
 
 	it("should call onchange on key enter", () => {
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 		const defaultProps: ISearchFieldProps = {
 			onChange: onChangeMock,
 			closeOnInactive: true,