@griddo/ax 12.3.0 → 12.5.0

package/src/__tests__/components/ConfigPanel/Form/Form.test.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
-import { mock } from "jest-mock-extended";
+import { render, cleanup, screen, fireEvent } from "../../../../../config/tests/test-utils";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
 
@@ -112,49 +112,49 @@ const initialStore = {
 };
 const store = mockStore(initialStore);
 
-const defaultProps = mock<IFormProps>();
-
-defaultProps.schema = {
-	title: "Header",
-	component: "Header",
-	type: "header",
-	configTabs: [
+// Props por test. Los tres `const ...Mock = defaultProps.x as MockedFunction<>`
+// que había aquí no se usaban en ningún assert: solo servían, sin querer, para
+// materializar esas props en el proxy de `mock<T>()` y que el spread de JSX las
+// llevara al componente. Ahora van declaradas en la factoría.
+const makeProps = (overrides: Partial<IFormProps> = {}): IFormProps =>
+	Object.assign(
+		mock<IFormProps>(),
 		{
-			title: "content",
-			fields: [
-				{
-					title: "Name",
-					key: "title",
-					type: "TextField",
-					mandatory: true,
-				},
-			],
+			schema: {
+				title: "Header",
+				component: "Header",
+				type: "header",
+				configTabs: [
+					{
+						title: "content",
+						fields: [
+							{
+								title: "Name",
+								key: "title",
+								type: "TextField",
+								mandatory: true,
+							},
+						],
+					},
+				],
+				schemaType: "module",
+			},
+			selectedTab: "content",
+			isPage: false,
+			isGlobal: false,
+			theme: "default-theme",
+			setSelectedContent: vi.fn(),
+			setSelectedTab: vi.fn(),
+			setHistoryPush: vi.fn(),
 		},
-	],
-	schemaType: "module",
-};
-const restorePageNavigationActionMock = jest.fn();
-defaultProps.actions = {
-	restorePageNavigationAction: restorePageNavigationActionMock,
-};
-const setSelectedContentMock = defaultProps.setSelectedContent as jest.MockedFunction<(editorID: number) => void>;
-const setSelectedTabMocked = defaultProps.setSelectedTab as jest.MockedFunction<(tab: string) => void>;
-const setHistoryPushMocked = defaultProps.setHistoryPush as jest.MockedFunction<
-	(path: string, isEditor: boolean) => void
->;
-defaultProps.selectedTab = "content";
-defaultProps.isPage = false;
-defaultProps.isGlobal = false;
-defaultProps.theme = "default-theme";
+		overrides,
+	);
 
 describe("Form component rendering", () => {
 	it("should render the component", () => {
-		defaultProps.isPage = true;
-		defaultProps.isGlobal = true;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ isPage: true, isGlobal: true })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -162,13 +162,9 @@ describe("Form component rendering", () => {
 	});
 
 	it("should render the component with no header warning text", () => {
-		defaultProps.isPage = false;
-		defaultProps.isGlobal = false;
-		defaultProps.header = 0;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ header: 0 })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -177,11 +173,11 @@ describe("Form component rendering", () => {
 	});
 
 	it("should call the function to restore the header", () => {
-		defaultProps.header = 0;
+		const restorePageNavigationAction = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ header: 0, actions: { restorePageNavigationAction } })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -189,16 +185,14 @@ describe("Form component rendering", () => {
 		expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
 		const headerLink = screen.getByTestId("header-link");
 		fireEvent.click(headerLink);
-		expect(restorePageNavigationActionMock).toBeCalled();
-		expect(restorePageNavigationActionMock).toBeCalledWith("header");
+		expect(restorePageNavigationAction).toBeCalled();
+		expect(restorePageNavigationAction).toBeCalledWith("header");
 	});
 
 	it("should render the component with no footer warning text", () => {
-		defaultProps.footer = 0;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ header: 0, footer: 0 })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -207,11 +201,11 @@ describe("Form component rendering", () => {
 	});
 
 	it("should call the function to restore the header", () => {
-		defaultProps.header = 0;
+		const restorePageNavigationAction = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ header: 0, footer: 0, actions: { restorePageNavigationAction } })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -219,17 +213,14 @@ describe("Form component rendering", () => {
 		expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
 		const footerLink = screen.getByTestId("footer-link");
 		fireEvent.click(footerLink);
-		expect(restorePageNavigationActionMock).toBeCalled();
-		expect(restorePageNavigationActionMock).toBeCalledWith("footer");
+		expect(restorePageNavigationAction).toBeCalled();
+		expect(restorePageNavigationAction).toBeCalledWith("footer");
 	});
 
 	it("should render the tabs", () => {
-		defaultProps.isPage = true;
-		defaultProps.isGlobal = true;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ isPage: true, isGlobal: true, header: 0, footer: 0 })} />
 			</ThemeProvider>,
 			{ store },
 		);

package/src/__tests__/components/ConfigPanel/GlobalPageForm/GlobalPageForm.test.tsx

@@ -1,8 +1,8 @@
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import { ThemeProvider } from "styled-components";
 
-import { cleanup, fireEvent, render, screen, waitFor } from "../../../../../config/jest/test-utils";
+import { cleanup, fireEvent, render, screen, waitFor } from "../../../../../config/tests/test-utils";
 import "@testing-library/jest-dom";
 
 import GlobalPageForm, { type IGlobalPageFormProps } from "@ax/components/ConfigPanel/GlobalPageForm";
@@ -11,9 +11,9 @@ import globalTheme from "@ax/themes/theme.json";
 
 import thunk from "redux-thunk";
 
-jest.mock("@ax/hooks", () => ({
-	...jest.requireActual("@ax/hooks"),
-	useGlobalPermission: jest.fn(() => true),
+vi.mock("@ax/hooks", async () => ({
+	...(await vi.importActual("@ax/hooks")),
+	useGlobalPermission: vi.fn(() => true),
 }));
 
 beforeEach(() => {
@@ -22,7 +22,7 @@ beforeEach(() => {
 
 const middlewares: any = [thunk];
 const mockStore = configureStore(middlewares);
-const updateEditorContentMock = jest.fn();
+const updateEditorContentMock = vi.fn();
 const initialStore = {
 	pageEditor: {
 		selectedContent: {
@@ -105,7 +105,7 @@ const initialStore = {
 const store = mockStore(initialStore);
 
 const defaultProps = mock<IGlobalPageFormProps>();
-const setNotificationActionMock = jest.fn();
+const setNotificationActionMock = vi.fn();
 defaultProps.actions.setNotificationAction = setNotificationActionMock;
 
 describe("GlobalPageForm component rendering", () => {
@@ -173,8 +173,8 @@ describe("GlobalPageForm component rendering", () => {
 describe("GlobalPageForm component rendering", () => {
 	it("should trigger handleClick", async () => {
 		defaultProps.selectedTab = "content";
-		const getGlobalFromLocalPageActionMock = jest.fn(() => Promise.resolve());
-		const saveCurrentSiteInfoActionMock = jest.fn();
+		const getGlobalFromLocalPageActionMock = vi.fn(() => Promise.resolve());
+		const saveCurrentSiteInfoActionMock = vi.fn();
 		defaultProps.actions.saveCurrentSiteInfoAction = saveCurrentSiteInfoActionMock;
 		defaultProps.actions.getGlobalFromLocalPageAction = getGlobalFromLocalPageActionMock;
 
@@ -199,7 +199,7 @@ describe("GlobalPageForm component rendering", () => {
 	it("should trigger handleRestoreHeader", () => {
 		defaultProps.selectedTab = "content";
 		defaultProps.header = 0;
-		const restorePageNavigationActionMock = jest.fn();
+		const restorePageNavigationActionMock = vi.fn();
 		defaultProps.actions.restorePageNavigationAction = restorePageNavigationActionMock;
 
 		render(
@@ -219,7 +219,7 @@ describe("GlobalPageForm component rendering", () => {
 	it("should trigger handleRestoreFooter", () => {
 		defaultProps.selectedTab = "content";
 		defaultProps.footer = 0;
-		const restorePageNavigationActionMock = jest.fn();
+		const restorePageNavigationActionMock = vi.fn();
 		defaultProps.actions.restorePageNavigationAction = restorePageNavigationActionMock;
 
 		render(

package/src/__tests__/components/ConfigPanel/Header/Header.test.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
-import { mock } from "jest-mock-extended";
+import { render, cleanup, screen, fireEvent } from "../../../../../config/tests/test-utils";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
 
@@ -10,19 +10,19 @@ import { parseTheme } from "@ax/helpers";
 import Header, { IHeaderProps } from "@ax/components/ConfigPanel/Header";
 import globalTheme from "@ax/themes/theme.json";
 
-window.scrollTo = jest.fn();
+window.scrollTo = vi.fn();
 
 beforeEach(() => {
 	cleanup();
 });
 
 afterAll(() => {
-	jest.clearAllMocks();
+	vi.clearAllMocks();
 });
 
 const middlewares: any = [];
 const mockStore = configureStore(middlewares);
-const updateEditorContentMock = jest.fn();
+const updateEditorContentMock = vi.fn();
 const initialStore = {
 	pageEditor: {
 		selectedContent: {
@@ -72,52 +72,57 @@ const initialStore = {
 
 const store = mockStore(initialStore);
 
-const defaultProps = mock<IHeaderProps>();
-defaultProps.actions = {
-	duplicateModuleAction: jest.fn(),
-	deleteModuleAction: jest.fn(),
-	copyModuleAction: jest.fn(),
-};
-const setSelectedContentMock = defaultProps.setSelectedContent as jest.MockedFunction<(editorID: number) => void>;
-
-defaultProps.schema = {
-	title: "Header",
-	component: "Header",
-	type: "header",
-	configTabs: [
+const makeProps = (overrides: Partial<IHeaderProps> = {}): IHeaderProps =>
+	Object.assign(
+		mock<IHeaderProps>(),
 		{
-			title: "content",
-			fields: [
+			actions: {
+				duplicateModuleAction: vi.fn(),
+				deleteModuleAction: vi.fn(),
+				copyModuleAction: vi.fn(),
+			},
+			schema: {
+				title: "Header",
+				component: "Header",
+				type: "header",
+				configTabs: [
+					{
+						title: "content",
+						fields: [
+							{
+								title: "Name",
+								key: "title",
+								type: "TextField",
+								mandatory: true,
+							},
+						],
+					},
+				],
+				schemaType: "module",
+			},
+			breadcrumb: [
 				{
-					title: "Name",
-					key: "title",
-					type: "TextField",
-					mandatory: true,
+					editorID: 0,
+					component: "TextField",
+					displayName: "Texto",
 				},
 			],
+			activatedModules: ["TextField"],
+			headerRef: { current: { offsetHeight: 63, offsetTop: 24 } } as React.RefObject<HTMLDivElement>,
+			// El proxy de `mock<T>()` solo materializa una prop cuando se accede a
+			// ella, y el spread de JSX únicamente copia las propias: los callbacks
+			// que el componente invoca tienen que estar puestos aquí.
+			setSelectedContent: vi.fn(),
+			setHeaderHeight: vi.fn(),
 		},
-	],
-	schemaType: "module",
-};
-
-defaultProps.breadcrumb = [
-	{
-		editorID: 0,
-		component: "TextField",
-		displayName: "Texto",
-	},
-];
-
-defaultProps.activatedModules = ["TextField"];
-
-defaultProps.headerRef = { current: { offsetHeight: 63, offsetTop: 24 } } as React.RefObject<HTMLDivElement>;
-const setHeaderHeightMock = defaultProps.setHeaderHeight as jest.MockedFunction<(height: number) => void>;
+		overrides,
+	);
 
 describe("Header component rendering", () => {
 	it("should render component", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Header {...defaultProps} />
+				<Header {...makeProps()} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -128,11 +133,9 @@ describe("Header component rendering", () => {
 	});
 
 	it("should render the actions menu when clicking the more info button", () => {
-		defaultProps.selectedParent = [];
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Header {...defaultProps} />
+				<Header {...makeProps({ selectedParent: [] })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -144,9 +147,11 @@ describe("Header component rendering", () => {
 	});
 
 	it("should trigger the duplicate action", () => {
+		const setSelectedContent = vi.fn();
+
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Header {...defaultProps} />
+				<Header {...makeProps({ selectedParent: [], setSelectedContent })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -156,6 +161,6 @@ describe("Header component rendering", () => {
 		const listItem = screen.getAllByTestId("action-menu-item");
 		expect(listItem).toHaveLength(3);
 		fireEvent.click(listItem[0]);
-		expect(setSelectedContentMock).toBeCalled();
+		expect(setSelectedContent).toBeCalled();
 	});
 });

package/src/__tests__/components/ConfigPanel/NavigationForm/Field/Field.test.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent } from "../../../../../../config/jest/test-utils";
-import { mock } from "jest-mock-extended";
+import { render, cleanup, screen, fireEvent } from "../../../../../../config/tests/test-utils";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
 import thunk from "redux-thunk";

package/src/__tests__/components/ConfigPanel/NavigationForm/NavigationForm.test.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen } from "../../../../../config/jest/test-utils";
-import { mock } from "jest-mock-extended";
+import { render, cleanup, screen } from "../../../../../config/tests/test-utils";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
 import thunk from "redux-thunk";

package/src/__tests__/components/ConfigPanel/PreviewForm/PreviewForm.test.tsx

@@ -1,8 +1,9 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
-import { mock } from "jest-mock-extended";
+import { render, cleanup, screen, fireEvent } from "../../../../../config/tests/test-utils";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
 import thunk from "redux-thunk";
@@ -50,7 +51,7 @@ const store = mockStore(initialStore);
 const defaultProps = mock<IPreviewFormProps>();
 
 defaultProps.selectedTab = "content";
-const setSelectedTabMock = defaultProps.setSelectedTab as jest.MockedFunction<(tab: string) => void>;
+const setSelectedTabMock = defaultProps.setSelectedTab as MockedFunction<(tab: string) => void>;
 
 describe("PreviewForm component rendering", () => {
 	it("should render component", () => {

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

@@ -27,7 +27,7 @@ describe("ContextMenu component rendering", () => {
 	});
 
 	it("should render menu container when position is provided", () => {
-		const options: IActionMenuOption[] = [{ label: "Edit", action: jest.fn(), icon: "edit" }];
+		const options: IActionMenuOption[] = [{ label: "Edit", action: vi.fn(), icon: "edit" }];
 
 		const props = {
 			position: { x: 100, y: 200 },
@@ -46,9 +46,9 @@ describe("ContextMenu component rendering", () => {
 
 	it("should render all provided options", () => {
 		const options: IActionMenuOption[] = [
-			{ label: "Edit", action: jest.fn(), icon: "edit" },
-			{ label: "Delete", action: jest.fn(), icon: "delete" },
-			{ label: "Duplicate", action: jest.fn(), icon: "duplicate" },
+			{ label: "Edit", action: vi.fn(), icon: "edit" },
+			{ label: "Delete", action: vi.fn(), icon: "delete" },
+			{ label: "Duplicate", action: vi.fn(), icon: "duplicate" },
 		];
 
 		const props = {
@@ -69,10 +69,10 @@ describe("ContextMenu component rendering", () => {
 
 	it("should handle null and undefined options in array", () => {
 		const options: (IActionMenuOption | undefined | null)[] = [
-			{ label: "Edit", action: jest.fn(), icon: "edit" },
+			{ label: "Edit", action: vi.fn(), icon: "edit" },
 			null,
 			undefined,
-			{ label: "Delete", action: jest.fn(), icon: "delete" },
+			{ label: "Delete", action: vi.fn(), icon: "delete" },
 		];
 
 		const props = {
@@ -93,7 +93,7 @@ describe("ContextMenu component rendering", () => {
 
 describe("ContextMenu component positioning", () => {
 	it("should apply correct position coordinates", () => {
-		const options: IActionMenuOption[] = [{ label: "Edit", action: jest.fn(), icon: "edit" }];
+		const options: IActionMenuOption[] = [{ label: "Edit", action: vi.fn(), icon: "edit" }];
 
 		const props = {
 			position: { x: 150, y: 250 },
@@ -112,7 +112,7 @@ describe("ContextMenu component positioning", () => {
 	});
 
 	it("should adjust position when menu would overflow viewport right edge", () => {
-		const options: IActionMenuOption[] = [{ label: "Edit", action: jest.fn(), icon: "edit" }];
+		const options: IActionMenuOption[] = [{ label: "Edit", action: vi.fn(), icon: "edit" }];
 
 		// Position near right edge with large X coordinate
 		const props = {
@@ -131,7 +131,7 @@ describe("ContextMenu component positioning", () => {
 	});
 
 	it("should adjust position when menu would overflow viewport bottom edge", () => {
-		const options: IActionMenuOption[] = [{ label: "Edit", action: jest.fn(), icon: "edit" }];
+		const options: IActionMenuOption[] = [{ label: "Edit", action: vi.fn(), icon: "edit" }];
 
 		// Position near bottom edge with large Y coordinate
 		const props = {
@@ -152,7 +152,7 @@ describe("ContextMenu component positioning", () => {
 
 describe("ContextMenu component events", () => {
 	it("should call action when option is clicked", () => {
-		const actionSpy = jest.fn();
+		const actionSpy = vi.fn();
 		const options: IActionMenuOption[] = [{ label: "Edit", action: actionSpy, icon: "edit" }];
 
 		const props = {
@@ -173,8 +173,8 @@ describe("ContextMenu component events", () => {
 	});
 
 	it("should close menu and call onClose when option is clicked", () => {
-		const actionSpy = jest.fn();
-		const onCloseSpy = jest.fn();
+		const actionSpy = vi.fn();
+		const onCloseSpy = vi.fn();
 		const options: IActionMenuOption[] = [{ label: "Edit", action: actionSpy, icon: "edit" }];
 
 		const props = {
@@ -197,8 +197,8 @@ describe("ContextMenu component events", () => {
 	});
 
 	it("should call onClose when clicking outside the menu", () => {
-		const onCloseSpy = jest.fn();
-		const options: IActionMenuOption[] = [{ label: "Edit", action: jest.fn(), icon: "edit" }];
+		const onCloseSpy = vi.fn();
+		const options: IActionMenuOption[] = [{ label: "Edit", action: vi.fn(), icon: "edit" }];
 
 		const props = {
 			position: { x: 100, y: 200 },
@@ -220,8 +220,8 @@ describe("ContextMenu component events", () => {
 	});
 
 	it("should not call onClose when clicking inside the menu", () => {
-		const onCloseSpy = jest.fn();
-		const options: IActionMenuOption[] = [{ label: "Edit", action: jest.fn(), icon: "edit" }];
+		const onCloseSpy = vi.fn();
+		const options: IActionMenuOption[] = [{ label: "Edit", action: vi.fn(), icon: "edit" }];
 
 		const props = {
 			position: { x: 100, y: 200 },
@@ -244,9 +244,9 @@ describe("ContextMenu component events", () => {
 	});
 
 	it("should handle multiple actions independently", () => {
-		const editSpy = jest.fn();
-		const deleteSpy = jest.fn();
-		const onCloseSpy = jest.fn();
+		const editSpy = vi.fn();
+		const deleteSpy = vi.fn();
+		const onCloseSpy = vi.fn();
 		const options: IActionMenuOption[] = [
 			{ label: "Edit", action: editSpy, icon: "edit" },
 			{ label: "Delete", action: deleteSpy, icon: "delete" },
@@ -289,7 +289,7 @@ describe("ContextMenu component events", () => {
 
 describe("ContextMenu component state transitions", () => {
 	it("should hide menu when position changes to null", () => {
-		const options: IActionMenuOption[] = [{ label: "Edit", action: jest.fn(), icon: "edit" }];
+		const options: IActionMenuOption[] = [{ label: "Edit", action: vi.fn(), icon: "edit" }];
 
 		const { rerender, container } = render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -309,7 +309,7 @@ describe("ContextMenu component state transitions", () => {
 	});
 
 	it("should reopen menu at new position", () => {
-		const options: IActionMenuOption[] = [{ label: "Edit", action: jest.fn(), icon: "edit" }];
+		const options: IActionMenuOption[] = [{ label: "Edit", action: vi.fn(), icon: "edit" }];
 
 		const { rerender } = render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -339,7 +339,7 @@ describe("ContextMenu component state transitions", () => {
 	it("should update options without closing menu", () => {
 		const { rerender } = render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ContextMenu position={{ x: 100, y: 200 }} options={[{ label: "Edit", action: jest.fn(), icon: "edit" }]} />
+				<ContextMenu position={{ x: 100, y: 200 }} options={[{ label: "Edit", action: vi.fn(), icon: "edit" }]} />
 			</ThemeProvider>,
 		);
 
@@ -350,8 +350,8 @@ describe("ContextMenu component state transitions", () => {
 				<ContextMenu
 					position={{ x: 100, y: 200 }}
 					options={[
-						{ label: "Edit", action: jest.fn(), icon: "edit" },
-						{ label: "Delete", action: jest.fn(), icon: "delete" },
+						{ label: "Edit", action: vi.fn(), icon: "edit" },
+						{ label: "Delete", action: vi.fn(), icon: "delete" },
 					]}
 				/>
 			</ThemeProvider>,

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

@@ -1,8 +1,9 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
 import { render, cleanup, screen, fireEvent } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import "@testing-library/jest-dom";
 
 import { parseTheme } from "@ax/helpers";
@@ -12,10 +13,10 @@ import globalTheme from "@ax/themes/theme.json";
 afterEach(cleanup);
 
 const defaultProps = mock<IDragAndDropProps>();
-const onDropMock = defaultProps.onDrop as jest.MockedFunction<(e: React.DragEvent<HTMLDivElement>) => void>;
-const onDragOverMock = defaultProps.onDragOver as jest.MockedFunction<(e: React.DragEvent<HTMLDivElement>) => void>;
-const onDragEnterMock = defaultProps.onDragEnter as jest.MockedFunction<(e: React.DragEvent<HTMLDivElement>) => void>;
-const onDragLeaveMock = defaultProps.onDragLeave as jest.MockedFunction<(e: React.DragEvent<HTMLDivElement>) => void>;
+const onDropMock = defaultProps.onDrop as MockedFunction<(e: React.DragEvent<HTMLDivElement>) => void>;
+const onDragOverMock = defaultProps.onDragOver as MockedFunction<(e: React.DragEvent<HTMLDivElement>) => void>;
+const onDragEnterMock = defaultProps.onDragEnter as MockedFunction<(e: React.DragEvent<HTMLDivElement>) => void>;
+const onDragLeaveMock = defaultProps.onDragLeave as MockedFunction<(e: React.DragEvent<HTMLDivElement>) => void>;
 defaultProps.children = React.createElement("button", null, "back button");
 
 describe("ErrorCenter component rendering", () => {