@griddo/ax 12.3.0 → 12.5.0

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

@@ -3,37 +3,61 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import { type CalledWithMock, mock } from "jest-mock-extended";
+import { type CalledWithMock, mock } from "vitest-mock-extended";
 import { ThemeProvider } from "styled-components";
 
-// Mock schemas to prevent getPageSchemas from accessing schemasService
-jest.mock("@ax/schemas", () => ({
-	getPageSchemas: jest.fn(() => ({})),
-	getFixedSchemas: jest.fn(() => ({})),
+// Stub the page schemas so the component tree does not pull the real catalogue.
+// These are the module's only exports; under ESM the mock has to declare them
+// or the consumer's `...pageSchemas` blows up.
+vi.mock("@ax/schemas", () => ({
+	pageSchemas: {},
+	fixedSchemas: {},
 }));
 
 afterEach(cleanup);
 
-const defaultProps = mock<ISideModalProps>();
+// El escenario base es el que el primer test dejaba puesto en el objeto
+// compartido y del que dependían los siguientes: dos categorías, dos entradas
+// en la whiteList y el modal abierto.
+const makeProps = (overrides: Partial<ISideModalProps> = {}): ISideModalProps =>
+	Object.assign(
+		mock<ISideModalProps>(),
+		{
+			categories: [
+				{ featured: true, label: "All", value: "all" },
+				{ label: "Articles And Events", value: "articlesAndEvents" },
+			],
+			isOpen: true,
+			theme: "default-theme",
+			whiteList: ["EventsDistributor", "ArticlesDistributor"],
+			onClick: vi.fn(),
+			toggleModal: vi.fn(),
+			optionsType: "modules",
+		},
+		overrides,
+	);
 
 describe("SideModal component rendering", () => {
 	it("should render the component visible if isOpen is true", () => {
-		const handleClickMock = jest.fn();
-		const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
-		defaultProps.categories = [
-			{ featured: true, label: "All", value: "all" },
-			{ label: "Articles And Events", value: "articlesAndEvents" },
-		];
-		defaultProps.isOpen = true;
-		defaultProps.theme = "default-theme";
-		defaultProps.whiteList = ["EventsDistributor", "ArticlesDistributor"];
-		defaultProps.onClick = handleClickMock;
-		defaultProps.toggleModal = toggleModalMock;
-		defaultProps.optionsType = "modules";
+		const handleClickMock = vi.fn();
+		const toggleModalMock = vi.fn() as CalledWithMock<void, []> & (() => void);
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal
+					{...makeProps({
+						categories: [
+							{ featured: true, label: "All", value: "all" },
+							{ label: "Articles And Events", value: "articlesAndEvents" },
+						],
+						isOpen: true,
+						theme: "default-theme",
+						whiteList: ["EventsDistributor", "ArticlesDistributor"],
+						onClick: handleClickMock,
+						toggleModal: toggleModalMock,
+						optionsType: "modules",
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -44,22 +68,25 @@ describe("SideModal component rendering", () => {
 	});
 
 	it("should render the component hidden if isOpen is false", () => {
-		const handleClickMock = jest.fn();
-		const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
-		defaultProps.categories = [
-			{ featured: true, label: "All", value: "all" },
-			{ label: "Articles And Events", value: "articlesAndEvents" },
-		];
-		defaultProps.isOpen = false;
-		defaultProps.theme = "default-theme";
-		defaultProps.whiteList = ["EventsDistributor", "ArticlesDistributor"];
-		defaultProps.onClick = handleClickMock;
-		defaultProps.toggleModal = toggleModalMock;
-		defaultProps.optionsType = "modules";
+		const handleClickMock = vi.fn();
+		const toggleModalMock = vi.fn() as CalledWithMock<void, []> & (() => void);
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal
+					{...makeProps({
+						categories: [
+							{ featured: true, label: "All", value: "all" },
+							{ label: "Articles And Events", value: "articlesAndEvents" },
+						],
+						isOpen: false,
+						theme: "default-theme",
+						whiteList: ["EventsDistributor", "ArticlesDistributor"],
+						onClick: handleClickMock,
+						toggleModal: toggleModalMock,
+						optionsType: "modules",
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -70,10 +97,9 @@ describe("SideModal component rendering", () => {
 	});
 
 	it("should render optiontype as title", () => {
-		defaultProps.isOpen = true;
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal {...makeProps({ isOpen: true })} />
 			</ThemeProvider>,
 		);
 
@@ -85,7 +111,7 @@ describe("SideModal component rendering", () => {
 	it("should render close button", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -96,7 +122,7 @@ describe("SideModal component rendering", () => {
 	it("should render options", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -108,7 +134,7 @@ describe("SideModal component rendering", () => {
 	it("should render option thumbnails", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -118,23 +144,26 @@ describe("SideModal component rendering", () => {
 	});
 
 	it("should render all options when All filter is selected", () => {
-		const handleClickMock = jest.fn();
-		const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
-		defaultProps.categories = [
-			{ featured: true, label: "All", value: "all" },
-			{ label: "Content", value: "content" },
-			{ label: "Collections", value: "collections" },
-		];
-		defaultProps.isOpen = true;
-		defaultProps.theme = "default-theme";
-		defaultProps.whiteList = ["BasicContent", "CardCollection"];
-		defaultProps.onClick = handleClickMock;
-		defaultProps.toggleModal = toggleModalMock;
-		defaultProps.optionsType = "modules";
+		const handleClickMock = vi.fn();
+		const toggleModalMock = vi.fn() as CalledWithMock<void, []> & (() => void);
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal
+					{...makeProps({
+						categories: [
+							{ featured: true, label: "All", value: "all" },
+							{ label: "Content", value: "content" },
+							{ label: "Collections", value: "collections" },
+						],
+						isOpen: true,
+						theme: "default-theme",
+						whiteList: ["BasicContent", "CardCollection"],
+						onClick: handleClickMock,
+						toggleModal: toggleModalMock,
+						optionsType: "modules",
+					})}
+				/>
 			</ThemeProvider>,
 		);
 		const filters = screen.getAllByTestId("side-modal-nav-link");
@@ -154,22 +183,25 @@ describe("SideModal component rendering", () => {
 	});
 
 	it("should render components modal if option type is components", () => {
-		const handleClickMock = jest.fn();
-		const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
-		defaultProps.componentOptions = {
-			image: { component: "LinkableImage", editorID: 11, parentEditorID: 6 },
-			video: { component: "Video", editorID: 12, parentEditorID: 6 },
-		};
-		defaultProps.isOpen = true;
-		defaultProps.theme = "default-theme";
-		defaultProps.whiteList = ["LinkableImage", "Video"];
-		defaultProps.onClick = handleClickMock;
-		defaultProps.toggleModal = toggleModalMock;
-		defaultProps.optionsType = "components";
+		const handleClickMock = vi.fn();
+		const toggleModalMock = vi.fn() as CalledWithMock<void, []> & (() => void);
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal
+					{...makeProps({
+						componentOptions: {
+							image: { component: "LinkableImage", editorID: 11, parentEditorID: 6 },
+							video: { component: "Video", editorID: 12, parentEditorID: 6 },
+						},
+						isOpen: true,
+						theme: "default-theme",
+						whiteList: ["LinkableImage", "Video"],
+						onClick: handleClickMock,
+						toggleModal: toggleModalMock,
+						optionsType: "components",
+					})}
+				/>
 			</ThemeProvider>,
 		);
 		const options = screen.getAllByTestId("side-modal-option");
@@ -180,23 +212,26 @@ describe("SideModal component rendering", () => {
 
 describe("SideModal component events", () => {
 	it("should call handle click and toggle modal on click option", () => {
-		const handleClickMock = jest.fn();
-		const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
-		defaultProps.categories = [
-			{ featured: true, label: "All", value: "all" },
-			{ label: "Articles And Events", value: "articlesAndEvents" },
-		];
-		defaultProps.componentOptions = undefined;
-		defaultProps.isOpen = true;
-		defaultProps.theme = "default-theme";
-		defaultProps.whiteList = ["Accordion", "AddressCollection"];
-		defaultProps.onClick = handleClickMock;
-		defaultProps.toggleModal = toggleModalMock;
-		defaultProps.optionsType = "modules";
+		const handleClickMock = vi.fn();
+		const toggleModalMock = vi.fn() as CalledWithMock<void, []> & (() => void);
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal
+					{...makeProps({
+						categories: [
+							{ featured: true, label: "All", value: "all" },
+							{ label: "Articles And Events", value: "articlesAndEvents" },
+						],
+						componentOptions: undefined,
+						isOpen: true,
+						theme: "default-theme",
+						whiteList: ["Accordion", "AddressCollection"],
+						onClick: handleClickMock,
+						toggleModal: toggleModalMock,
+						optionsType: "modules",
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -210,23 +245,26 @@ describe("SideModal component events", () => {
 	});
 
 	it("should select filter on click", () => {
-		const handleClickMock = jest.fn();
-		const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
-		defaultProps.categories = [
-			{ featured: true, label: "All", value: "all" },
-			{ label: "Content", value: "content" },
-			{ label: "Collections", value: "collections" },
-		];
-		defaultProps.isOpen = true;
-		defaultProps.theme = "default-theme";
-		defaultProps.whiteList = ["BasicContent", "CardCollection"];
-		defaultProps.onClick = handleClickMock;
-		defaultProps.toggleModal = toggleModalMock;
-		defaultProps.optionsType = "modules";
+		const handleClickMock = vi.fn();
+		const toggleModalMock = vi.fn() as CalledWithMock<void, []> & (() => void);
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal
+					{...makeProps({
+						categories: [
+							{ featured: true, label: "All", value: "all" },
+							{ label: "Content", value: "content" },
+							{ label: "Collections", value: "collections" },
+						],
+						isOpen: true,
+						theme: "default-theme",
+						whiteList: ["BasicContent", "CardCollection"],
+						onClick: handleClickMock,
+						toggleModal: toggleModalMock,
+						optionsType: "modules",
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -249,23 +287,26 @@ describe("SideModal component events", () => {
 	});
 
 	it("should filter by category on click", () => {
-		const handleClickMock = jest.fn();
-		const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
-		defaultProps.categories = [
-			{ featured: true, label: "All", value: "all" },
-			{ label: "Content", value: "content" },
-			{ label: "Collections", value: "collections" },
-		];
-		defaultProps.isOpen = true;
-		defaultProps.theme = "default-theme";
-		defaultProps.whiteList = ["BasicContent", "CardCollection"];
-		defaultProps.onClick = handleClickMock;
-		defaultProps.toggleModal = toggleModalMock;
-		defaultProps.optionsType = "modules";
+		const handleClickMock = vi.fn();
+		const toggleModalMock = vi.fn() as CalledWithMock<void, []> & (() => void);
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal
+					{...makeProps({
+						categories: [
+							{ featured: true, label: "All", value: "all" },
+							{ label: "Content", value: "content" },
+							{ label: "Collections", value: "collections" },
+						],
+						isOpen: true,
+						theme: "default-theme",
+						whiteList: ["BasicContent", "CardCollection"],
+						onClick: handleClickMock,
+						toggleModal: toggleModalMock,
+						optionsType: "modules",
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -281,24 +322,27 @@ describe("SideModal component events", () => {
 	});
 
 	it("should filter by query", () => {
-		const handleClickMock = jest.fn();
-		const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
-		defaultProps.categories = [
-			{ featured: true, label: "All", value: "all" },
-			{ label: "Content", value: "content" },
-			{ label: "Collections", value: "collections" },
-		];
-		defaultProps.isOpen = true;
-		defaultProps.theme = "default-theme";
-		defaultProps.whiteList = ["BasicContent", "CardCollection"];
-		defaultProps.onClick = handleClickMock;
-		defaultProps.toggleModal = toggleModalMock;
-		defaultProps.optionsType = "modules";
-		defaultProps.showSearch = true;
+		const handleClickMock = vi.fn();
+		const toggleModalMock = vi.fn() as CalledWithMock<void, []> & (() => void);
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal
+					{...makeProps({
+						categories: [
+							{ featured: true, label: "All", value: "all" },
+							{ label: "Content", value: "content" },
+							{ label: "Collections", value: "collections" },
+						],
+						isOpen: true,
+						theme: "default-theme",
+						whiteList: ["BasicContent", "CardCollection"],
+						onClick: handleClickMock,
+						toggleModal: toggleModalMock,
+						optionsType: "modules",
+						showSearch: true,
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -316,13 +360,15 @@ describe("SideModal component events", () => {
 	it("should call toggle modal on click outside the modal", () => {
 		const map: any = {};
 
-		document.addEventListener = jest.fn((event, callback) => {
+		document.addEventListener = vi.fn((event, callback) => {
 			map[event] = callback;
 		});
 
+		const toggleModal = vi.fn();
+
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal {...makeProps({ toggleModal })} />
 			</ThemeProvider>,
 		);
 
@@ -330,19 +376,21 @@ describe("SideModal component events", () => {
 			target: document.body,
 		});
 
-		expect(defaultProps.toggleModal).toHaveBeenCalled();
+		expect(toggleModal).toHaveBeenCalled();
 	});
 
 	it("should not call toggle modal on click inside the modal", () => {
 		const map: any = {};
 
-		document.addEventListener = jest.fn((event, callback) => {
+		document.addEventListener = vi.fn((event, callback) => {
 			map[event] = callback;
 		});
 
+		const toggleModal = vi.fn();
+
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal {...makeProps({ toggleModal })} />
 			</ThemeProvider>,
 		);
 
@@ -352,6 +400,6 @@ describe("SideModal component events", () => {
 			target: title,
 		});
 
-		expect(defaultProps.toggleModal).not.toHaveBeenCalled();
+		expect(toggleModal).not.toHaveBeenCalled();
 	});
 });

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { render, screen, cleanup } from "@testing-library/react";
 import { parseTheme } from "@ax/helpers";
 

package/src/__tests__/components/TableFilters/CategoryFilter/CategoryFilter.test.tsx

@@ -1,8 +1,9 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 
 import axios from "axios";
 import { ThemeProvider } from "styled-components";
-import { CalledWithMock, mock } from "jest-mock-extended";
+import { CalledWithMock, mock } from "vitest-mock-extended";
 
 import { render, screen, cleanup, fireEvent, act } from "@testing-library/react";
 import { parseTheme } from "@ax/helpers";
@@ -12,14 +13,14 @@ import { IQueryValue } from "@ax/types";
 
 afterEach(cleanup);
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 
 const defaultProps = mock<ICategoryFilterProps>();
 
 describe("Category filter component rendering", () => {
 	it("should render category filter", async () => {
-		const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
+		const filterItemsMock = vi.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 		defaultProps.filterItems = filterItemsMock;
 		defaultProps.value = [{ value: "all", label: "All" }];
 		defaultProps.siteID = null;
@@ -60,7 +61,7 @@ describe("Category filter component rendering", () => {
 	});
 
 	it("should render the component with no options", async () => {
-		const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
+		const filterItemsMock = vi.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 		defaultProps.filterItems = filterItemsMock;
 		defaultProps.value = [{ value: "all", label: "All" }];
 		defaultProps.siteID = null;
@@ -104,7 +105,7 @@ describe("Category filter component rendering", () => {
 
 describe("CategoryFilter events", () => {
 	it("should render check group on click floating menu button", async () => {
-		const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
+		const filterItemsMock = vi.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 		defaultProps.filterItems = filterItemsMock;
 		defaultProps.value = [{ value: "all", label: "All" }];
 		defaultProps.siteID = null;
@@ -151,7 +152,7 @@ describe("CategoryFilter events", () => {
 	});
 
 	it("should check option on click", async () => {
-		const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
+		const filterItemsMock = vi.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 		defaultProps.filterItems = filterItemsMock;
 		defaultProps.value = [{ value: "all", label: "All" }];
 		defaultProps.siteID = null;
@@ -200,7 +201,7 @@ describe("CategoryFilter events", () => {
 	});
 
 	it("should call filterItems action on change", async () => {
-		const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
+		const filterItemsMock = vi.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 		defaultProps.filterItems = filterItemsMock;
 		defaultProps.value = [{ value: "all", label: "All" }];
 		defaultProps.siteID = null;

package/src/__tests__/components/TableFilters/CustomizeFilters/CustomizeFilters.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { CalledWithMock, mock } from "jest-mock-extended";
+import { CalledWithMock, mock } from "vitest-mock-extended";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 
 import { parseTheme } from "@ax/helpers";
@@ -24,7 +24,7 @@ describe("CustomizeFilters component rendering", () => {
 		];
 		defaultProps.value = ["site", "profile", "live", "status", "translation"];
 		defaultProps.limit = { value: 5, text: "five" };
-		defaultProps.setColumns = jest.fn() as CalledWithMock<void, [newValue: any]> & ((newValue: any) => void);
+		defaultProps.setColumns = vi.fn() as CalledWithMock<void, [newValue: any]> & ((newValue: any) => void);
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -48,7 +48,7 @@ describe("CustomizeFilters events", () => {
 		];
 		defaultProps.value = ["site", "profile", "live", "status", "translation"];
 		defaultProps.limit = { value: 5, text: "five" };
-		defaultProps.setColumns = jest.fn() as CalledWithMock<void, [newValue: any]> & ((newValue: any) => void);
+		defaultProps.setColumns = vi.fn() as CalledWithMock<void, [newValue: any]> & ((newValue: any) => void);
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -77,7 +77,7 @@ describe("CustomizeFilters events", () => {
 		];
 		defaultProps.value = ["site", "profile", "live", "status", "translation"];
 		defaultProps.limit = { value: 5, text: "five" };
-		defaultProps.setColumns = jest.fn() as CalledWithMock<void, [newValue: any]> & ((newValue: any) => void);
+		defaultProps.setColumns = vi.fn() as CalledWithMock<void, [newValue: any]> & ((newValue: any) => void);
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -108,7 +108,7 @@ describe("CustomizeFilters events", () => {
 		];
 		defaultProps.value = ["site", "profile", "live", "status", "translation"];
 		defaultProps.limit = { value: 5, text: "five" };
-		const onChangeMock = jest.fn() as CalledWithMock<void, [newValue: any]> & ((newValue: any) => void);
+		const onChangeMock = vi.fn() as CalledWithMock<void, [newValue: any]> & ((newValue: any) => void);
 		defaultProps.setColumns = onChangeMock;
 
 		render(

package/src/__tests__/components/TableFilters/DateFilter/DateFilter.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { CalledWithMock, mock } from "jest-mock-extended";
+import { CalledWithMock, mock } from "vitest-mock-extended";
 
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 
@@ -15,7 +15,7 @@ afterEach(cleanup);
 const defaultProps = mock<IDateFilterProps>();
 describe("DateFilter component rendering", () => {
 	it("should render date filter", () => {
-		const sortItemsMock = jest.fn();
+		const sortItemsMock = vi.fn();
 		defaultProps.sortedState = { isAscending: false, sortedByDate: false };
 		defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
@@ -31,7 +31,7 @@ describe("DateFilter component rendering", () => {
 	});
 
 	it("should render interactive arrow if not filter selected", () => {
-		const sortItemsMock = jest.fn();
+		const sortItemsMock = vi.fn();
 		defaultProps.sortedState = { isAscending: false, sortedByDate: false };
 		defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
@@ -46,7 +46,7 @@ describe("DateFilter component rendering", () => {
 	});
 
 	it("should not render interactive arrow if filter selected", () => {
-		const sortItemsMock = jest.fn();
+		const sortItemsMock = vi.fn();
 		defaultProps.sortedState = { isAscending: false, sortedByDate: true };
 		defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
@@ -61,7 +61,7 @@ describe("DateFilter component rendering", () => {
 	});
 
 	it("should render FullArrowUp icon if is filtered by ascending date", () => {
-		const sortItemsMock = jest.fn();
+		const sortItemsMock = vi.fn();
 		defaultProps.sortedState = { isAscending: true, sortedByDate: true };
 		defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
@@ -79,7 +79,7 @@ describe("DateFilter component rendering", () => {
 
 describe("DateFilter events", () => {
 	it("should render check group on click floating menu", () => {
-		const sortItemsMock = jest.fn();
+		const sortItemsMock = vi.fn();
 		defaultProps.sortedState = { isAscending: false, sortedByDate: false };
 		defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
@@ -101,7 +101,7 @@ describe("DateFilter events", () => {
 	});
 
 	it("should call sortItems on click 'Most recent' option", async () => {
-		const sortItemsMock = jest.fn();
+		const sortItemsMock = vi.fn();
 		defaultProps.sortedState = { isAscending: false, sortedByDate: false };
 		defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
@@ -125,7 +125,7 @@ describe("DateFilter events", () => {
 	});
 
 	it("should call sortItems ascending on click 'Oldest' option", async () => {
-		const sortItemsMock = jest.fn();
+		const sortItemsMock = vi.fn();
 		defaultProps.sortedState = { isAscending: false, sortedByDate: false };
 		defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);