@griddo/ax 12.3.0 → 12.4.0

package/config/{jest/componentsMock.js → tests/componentsMock.cjs}

@@ -1,5 +1,8 @@
+// vitest exposes `vi` as a global (test.globals).
+const mockFn = vi.fn;
+
 module.exports = {
-	SiteProvider: jest.fn(),
+	SiteProvider: mockFn(),
 	config: {
 		schemas: {
 			config: {

package/config/tests/reactEasyCropMock.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+// ESM on purpose: vite treats an aliased file as source, so it does not apply
+// the CommonJS interop. With `module.exports` the default import reached the
+// consumer as a plain object instead of the component.
+const Cropper = ({ onCropComplete }) => {
+	React.useEffect(() => {
+		if (onCropComplete) {
+			onCropComplete({}, { x: 0, y: 0, width: 100, height: 100 });
+		}
+	}, []);
+	return React.createElement("div", { "data-testid": "cropper-mock" });
+};
+
+export default Cropper;

package/config/tests/reactTimezoneMock.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+// vitest exposes `vi` as a global (test.globals).
+const mockFn = vi.fn;
+
+// ESM on purpose: vite treats an aliased file as source, so it does not apply
+// the CommonJS interop. With `module.exports` the default import reached the
+// consumer as a plain object instead of the component.
+export const WorldMap = () => React.createElement("div", { "data-testid": "world-map-mock" });
+export const TimeZoneSelectDialog = () => React.createElement("div", { "data-testid": "timezone-dialog-mock" });
+export const findTimeZone = mockFn((tz) => tz);
+export const convertOffsetInMinutesToString = mockFn((offset) => String(offset));
+
+export default WorldMap;

package/config/tests/setup.ts

@@ -0,0 +1,41 @@
+import "@testing-library/jest-dom";
+import { buildToHaveStyleRule, resetStyleSheet } from "vitest-styled-components";
+
+// Unlike jest-styled-components, this package does not register itself on
+// import: it exports the matcher factory and leaves the wiring to us.
+expect.extend({ toHaveStyleRule: buildToHaveStyleRule(expect) });
+beforeEach(resetStyleSheet);
+
+// Port of config/jest/setup.js. Two things are deliberately not carried over:
+//   - the `babel-plugin-require-context-hook` registration: nothing in src uses
+//     `require.context`.
+//   - `module.exports = () => { global.IS_REACT_ACT_ENVIRONMENT = true }`: jest
+//     only required that file, it never called the exported function, so the
+//     flag was never actually set. Dropping it preserves the behaviour.
+
+// styled-components warns when a component is first imported during a React render.
+// In tests, modules are loaded lazily (on first use), so they get evaluated inside
+// a render cycle — a false positive. The components themselves are correctly defined
+// at module level; this suppressor avoids ~1800 spurious warnings per test run.
+const originalWarn = console.warn.bind(console);
+console.warn = (...args: unknown[]) => {
+	if (typeof args[0] === "string" && args[0].includes("has been created dynamically")) return;
+	originalWarn(...args);
+};
+
+window.matchMedia =
+	window.matchMedia ||
+	((): MediaQueryList =>
+		({
+			matches: false,
+			addListener: () => {},
+			removeListener: () => {},
+		}) as unknown as MediaQueryList);
+
+class ResizeObserverMock {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+}
+
+globalThis.ResizeObserver = ResizeObserverMock as unknown as typeof ResizeObserver;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "12.3.0",
+	"version": "12.4.0",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -29,12 +29,12 @@
 		"build": "node ./scripts/build.js",
 		"build:dev": "node --env-file=./env/.env.development ./scripts/build.js",
 		"// TEST": "",
-		"test": "jest",
-		"test:watch": "jest --watch",
-		"test:ci": "jest --runInBand",
-		"test:coverage": "jest --coverage ",
-		"test:dev": "npm run test -- --watch",
-		"test:dev:coverage": "npm run test:coverage -- --watch",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"test:ci": "vitest run --no-file-parallelism",
+		"test:coverage": "vitest run --coverage",
+		"test:dev": "vitest",
+		"test:dev:coverage": "vitest --coverage",
 		"// LINT": "",
 		"lint": "biome check",
 		"format:write": "biome format --write"
@@ -70,7 +70,6 @@
 		"axios": "0.19.0",
 		"babel-loader": "^9.2.1",
 		"babel-plugin-named-asset-import": "0.3.8",
-		"babel-plugin-require-context-hook": "1.0.0",
 		"babel-plugin-root-import": "6.6.0",
 		"babel-plugin-styled-components": "2.1.4",
 		"babel-preset-react-app": "10.1.0",
@@ -92,7 +91,6 @@
 		"html-to-draftjs": "1.5.0",
 		"html-to-image": "1.11.7",
 		"html-webpack-plugin": "^5.5.0",
-		"identity-obj-proxy": "3.0.0",
 		"ignore-loader": "0.1.2",
 		"is-wsl": "3.1.0",
 		"jsdom": "20.0.3",
@@ -159,35 +157,23 @@
 		"@babel/preset-react": "7.26.3",
 		"@babel/preset-typescript": "7.26.0",
 		"@biomejs/biome": "2.3.8",
-		"@types/jest": "27.5.2",
 		"@types/redux-mock-store": "1.0.3",
+		"@vitest/coverage-v8": "4.1.6",
 		"axios-mock-adapter": "1.22.0",
-		"babel-jest": "27.5.1",
-		"jest": "27.5.1",
-		"jest-environment-jsdom": "27.5.1",
-		"jest-environment-jsdom-fourteen": "0.1.0",
-		"jest-mock-extended": "2.0.9",
-		"jest-resolve": "24.9.0",
-		"jest-styled-components": "7.1.1",
-		"jest-watch-typeahead": "0.4.0",
 		"prettier": "3.4.2",
 		"react-test-renderer": "18.2.0",
 		"redux-mock-store": "1.5.5",
 		"redux-thunk": "2.4.2",
-		"ts-jest": "27.1.5",
-		"ts-node": "10.9.2"
+		"ts-node": "10.9.2",
+		"vite": "7.0.2",
+		"vitest": "4.1.6",
+		"vitest-mock-extended": "5.1.1",
+		"vitest-styled-components": "1.0.0"
 	},
 	"babel": {
 		"presets": [
 			"react-app"
-		],
-		"env": {
-			"test": {
-				"plugins": [
-					"require-context-hook"
-				]
-			}
-		}
+		]
 	},
 	"browserslist": {
 		"production": [
@@ -213,5 +199,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "3702a3da08742efbc21a68aaae6c4617bde86e11"
+	"gitHead": "e78fd612e55753bf9a04aa1e4020b582be9026af"
 }

package/public/img/icons/markdown.svg

@@ -0,0 +1,6 @@
+<svg width="72" height="81" viewBox="0 0 72 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0C8.79086 0 7 1.79086 7 4V77C7 79.2091 8.79086 81 11 81H62C64.2091 81 66 79.2091 66 77V21.5663C66 20.5593 65.6202 19.5894 64.9364 18.8502L48.6875 1.28383C47.9304 0.465349 46.8661 0 45.7511 0H11Z" fill="#9BB320"/>
+<path d="M46.5 20.5V3L62.5 20.5H46.5Z" fill="white"/>
+<rect y="28" width="72" height="33" rx="5" fill="#9BB320"/>
+<path d="M14.7738 34.1364H20.0835L25.6914 47.8182H25.93L31.538 34.1364H36.8477V54.5H32.6715V41.2457H32.5025L27.2326 54.4006H24.3888L19.119 41.196H18.9499V54.5H14.7738V34.1364ZM47.6136 54.5H40.3949V34.1364H47.6733C49.7216 34.1364 51.4848 34.544 52.9631 35.3594C54.4413 36.1681 55.5781 37.3314 56.3736 38.8494C57.1757 40.3674 57.5767 42.1837 57.5767 44.2983C57.5767 46.4195 57.1757 48.2424 56.3736 49.767C55.5781 51.2917 54.4347 52.4616 52.9432 53.277C51.4583 54.0923 49.6818 54.5 47.6136 54.5ZM44.7003 50.8111H47.4347C48.7074 50.8111 49.7779 50.5857 50.6463 50.1349C51.5213 49.6776 52.1776 48.9716 52.6151 48.017C53.0592 47.0559 53.2812 45.8163 53.2812 44.2983C53.2812 42.7936 53.0592 41.5639 52.6151 40.6094C52.1776 39.6548 51.5246 38.9522 50.6562 38.5014C49.7879 38.0507 48.7173 37.8253 47.4446 37.8253H44.7003V50.8111Z" fill="white"/>
+</svg>

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

@@ -17,12 +17,12 @@ describe("Action menu component rendering", () => {
 				{
 					label: "Option 1",
 					icon: "modified",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 				{
 					label: "Option 2",
 					icon: "active",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 			],
 		};
@@ -48,12 +48,12 @@ describe("Action menu events", () => {
 				{
 					label: "Option 1",
 					icon: "modified",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 				{
 					label: "Option 2",
 					icon: "active",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 			],
 		};
@@ -82,7 +82,7 @@ describe("Action menu events", () => {
 				{
 					label: "Option 1",
 					icon: "modified",
-					action: jest.fn(),
+					action: vi.fn(),
 					helpText,
 				},
 			],
@@ -111,13 +111,13 @@ describe("Action menu events", () => {
 				{
 					label: "Option 1",
 					icon: "modified",
-					action: jest.fn(),
+					action: vi.fn(),
 					color: true,
 				},
 				{
 					label: "Option 2",
 					icon: "active",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 			],
 		};
@@ -146,12 +146,12 @@ describe("Action menu events", () => {
 				{
 					label: "Option 1",
 					icon: "modified",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 				{
 					label: "Option 2",
 					icon: "active",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 			],
 		};
@@ -178,7 +178,7 @@ describe("Action menu events", () => {
 	});
 
 	it("should call action on item click and hide component", () => {
-		const actionMock = jest.fn();
+		const actionMock = vi.fn();
 		const defaultProps: IActionMenuProps = {
 			icon: "more",
 			options: [
@@ -210,7 +210,7 @@ describe("Action menu events", () => {
 	});
 
 	it("should show disabled item", () => {
-		const actionMock = jest.fn();
+		const actionMock = vi.fn();
 		const defaultProps: IActionMenuProps = {
 			icon: "more",
 			options: [
@@ -223,7 +223,7 @@ describe("Action menu events", () => {
 				{
 					label: "Option 2",
 					icon: "active",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 			],
 		};

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

@@ -2,7 +2,7 @@ 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";
@@ -83,7 +83,7 @@ describe("Breadcrumb component rendering", () => {
 		];
 
 		defaultProps.breadcrumb = breadcrumbItemMock;
-		const setSelectedContentMock = jest.fn();
+		const setSelectedContentMock = vi.fn();
 		defaultProps.setSelectedContent = setSelectedContentMock;
 
 		render(

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

@@ -2,7 +2,7 @@ import { MemoryRouter } from "react-router-dom";
 
 import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { ThemeProvider } from "styled-components";
 import "@testing-library/jest-dom";
 
@@ -22,11 +22,9 @@ const renderBrowser = (props: IBrowserProps) =>
 	);
 
 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() };
+	});
 
 	defaultProps = mock<IBrowserProps>();
 	defaultProps.content = {};
@@ -47,7 +45,7 @@ beforeEach(() => {
 });
 
 afterEach(() => {
-	jest.resetAllMocks();
+	vi.resetAllMocks();
 	cleanup();
 });
 
@@ -147,7 +145,7 @@ describe("Browser editorType variants", () => {
 	it("should call toggleHeadingsPreview when clicking Back to Page Editor in headings mode", () => {
 		defaultProps.editorType = "headings";
 		defaultProps.showIframe = true;
-		const toggleHeadingsPreviewMock = jest.fn();
+		const toggleHeadingsPreviewMock = vi.fn();
 		defaultProps.toggleHeadingsPreview = toggleHeadingsPreviewMock;
 
 		renderBrowser(defaultProps);
@@ -172,7 +170,7 @@ describe("Browser editorType variants", () => {
 	it("should call toggleKeywordsPreview when clicking Back to Page Editor in keywords mode", () => {
 		defaultProps.editorType = "keywords";
 		defaultProps.showIframe = true;
-		const toggleKeywordsPreviewMock = jest.fn();
+		const toggleKeywordsPreviewMock = vi.fn();
 		defaultProps.toggleKeywordsPreview = toggleKeywordsPreviewMock;
 
 		renderBrowser(defaultProps);
@@ -296,11 +294,9 @@ describe("Browser iframe URL construction", () => {
 describe("Browser ResizeObserver lifecycle", () => {
 	it("should update dimensions based on containerWidth when ResizeObserver fires", () => {
 		// Verify ResizeObserver is created and observe is called
-		const ResizeObserverConstructor = jest.fn().mockImplementation(() => ({
-			observe: jest.fn(),
-			unobserve: jest.fn(),
-			disconnect: jest.fn(),
-		}));
+		const ResizeObserverConstructor = vi.fn().mockImplementation(function () {
+			return { observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() };
+		});
 		global.ResizeObserver = ResizeObserverConstructor as any;
 
 		defaultProps.isPreview = false;
@@ -314,12 +310,10 @@ describe("Browser ResizeObserver lifecycle", () => {
 	});
 
 	it("should disconnect ResizeObserver on unmount", () => {
-		const disconnectMock = jest.fn();
-		global.ResizeObserver = jest.fn().mockImplementation(() => ({
-			observe: jest.fn(),
-			unobserve: jest.fn(),
-			disconnect: disconnectMock,
-		}));
+		const disconnectMock = vi.fn();
+		global.ResizeObserver = vi.fn().mockImplementation(function () {
+			return { observe: vi.fn(), unobserve: vi.fn(), disconnect: disconnectMock };
+		});
 
 		defaultProps.showIframe = true;
 
@@ -331,11 +325,9 @@ describe("Browser ResizeObserver lifecycle", () => {
 
 	it("should not update dimensions when ResizeObserver fires with zero width", () => {
 		// Verify ResizeObserver is created
-		const ResizeObserverConstructor = jest.fn().mockImplementation(() => ({
-			observe: jest.fn(),
-			unobserve: jest.fn(),
-			disconnect: jest.fn(),
-		}));
+		const ResizeObserverConstructor = vi.fn().mockImplementation(function () {
+			return { observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() };
+		});
 		global.ResizeObserver = ResizeObserverConstructor as any;
 
 		defaultProps.isPreview = false;

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

@@ -9,11 +9,11 @@ import globalTheme from "@ax/themes/theme.json";
 import userEvent from "@testing-library/user-event";
 
 afterEach(() => {
-	jest.resetAllMocks();
+	vi.resetAllMocks();
 	cleanup();
 });
-const propActionMock = jest.fn();
-const selectItemsMock = jest.fn();
+const propActionMock = vi.fn();
+const selectItemsMock = vi.fn();
 const defaultProps = {
 	isScrolling: false,
 	checkState: { isAllSelected: false, indeterminate: false },

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

@@ -1,7 +1,8 @@
+import type { MockedFunction } from "vitest";
 import { ThemeProvider } from "styled-components";
 import { render, cleanup, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import "@testing-library/jest-dom";
 
 import { parseTheme } from "@ax/helpers";
@@ -11,7 +12,7 @@ import globalTheme from "@ax/themes/theme.json";
 afterEach(cleanup);
 
 const defaultProps = mock<ICategoryCellProps>();
-const addCategoryColorsMock = defaultProps.addCategoryColors as jest.MockedFunction<(cats: string[]) => void>;
+const addCategoryColorsMock = defaultProps.addCategoryColors as MockedFunction<(cats: string[]) => void>;
 
 describe("CategoryCell component rendering", () => {
 	it("should render the component with no elements", () => {

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

@@ -1,4 +1,4 @@
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
 import { ThemeProvider } from "styled-components";
@@ -9,7 +9,7 @@ import ConfigPanel, { type IStateProps } from "@ax/components/ConfigPanel";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 
-import { cleanup, render, screen } from "../../../../config/jest/test-utils";
+import { cleanup, render, screen } from "../../../../config/tests/test-utils";
 import { defaultStore } from "./../../../__mocks__/store/GenericStore";
 
 afterEach(cleanup);
@@ -137,8 +137,8 @@ defaultProps.schema = {
 		},
 	],
 };
-defaultProps.setSelectedTab.mockImplementation(jest.fn());
-defaultProps.actions = { deleteModule: jest.fn() };
+defaultProps.setSelectedTab.mockImplementation(vi.fn());
+defaultProps.actions = { deleteModule: vi.fn() };
 defaultProps.breadcrumb = [
 	{
 		editorID: 0,

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen } from "../../../../../../config/jest/test-utils";
+import { render, cleanup, screen } from "../../../../../../config/tests/test-utils";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
 import thunk from "redux-thunk";
@@ -110,7 +110,7 @@ const initialStore = {
 };
 const store = mockStore(initialStore);
 
-const restorePageNavigationActionMock = jest.fn();
+const restorePageNavigationActionMock = vi.fn();
 
 const defaultProps = {
 	field: {

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen } from "../../../../../../../config/jest/test-utils";
+import { render, cleanup, screen } from "../../../../../../../config/tests/test-utils";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
 import thunk from "redux-thunk";
@@ -16,7 +16,7 @@ beforeEach(() => {
 
 const middlewares: any = [thunk];
 const mockStore = configureStore(middlewares);
-const updateEditorContentMock = jest.fn();
+const updateEditorContentMock = vi.fn();
 const initialStore = {
 	navigation: {
 		selectedContent: { template: "default" },

package/src/__tests__/components/ConfigPanel/Form/ConnectedField/PageConnectedField/Field/Field.test.tsx

@@ -13,9 +13,9 @@ beforeEach(() => {
 });
 
 const defaultProps = {
-	goTo: jest.fn(),
-	updateValue: jest.fn(),
-	deleteError: jest.fn(),
+	goTo: vi.fn(),
+	updateValue: vi.fn(),
+	deleteError: vi.fn(),
 	whiteList: undefined,
 	objKey: "title",
 	field: {},

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

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import axios from "axios";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
@@ -9,7 +10,7 @@ import PageConnectedField from "@ax/components/ConfigPanel/Form/ConnectedField/P
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 
-import { cleanup, fireEvent, render, screen } from "../../../../../../../config/jest/test-utils";
+import { cleanup, fireEvent, render, screen } from "../../../../../../../config/tests/test-utils";
 
 // Mocks configuration
 
@@ -17,19 +18,21 @@ beforeEach(() => {
 	cleanup();
 });
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 
 // Mock @ax/schemas
-jest.mock("@ax/schemas", () => ({
-	getPageSchemas: jest.fn(() => ({})),
-	getFixedSchemas: jest.fn(() => ({})),
+// 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: {},
 }));
 
 // Mock @ax/containers/PageEditor
-jest.mock("@ax/containers/PageEditor", () => ({
+vi.mock("@ax/containers/PageEditor", () => ({
 	pageEditorActions: {
-		updateEditorContent: jest.fn((_editorID: number, _key: string | string[], _value: any) => {
+		updateEditorContent: vi.fn((_editorID: number, _key: string | string[], _value: any) => {
 			return (dispatch: any, getState: any) => {
 				const state = getState();
 				dispatch({
@@ -42,21 +45,21 @@ jest.mock("@ax/containers/PageEditor", () => ({
 				});
 			};
 		}),
-		overwriteHeaderConfig: jest.fn(() => ({
+		overwriteHeaderConfig: vi.fn(() => ({
 			type: "pageEditor/OVERWRITE_HEADER_CONFIG",
 			payload: {},
 		})),
-		setCurrentPageName: jest.fn(() => ({
+		setCurrentPageName: vi.fn(() => ({
 			type: "pageEditor/SET_CURRENT_PAGE_NAME",
 			payload: {},
 		})),
-		getPageBreadcrumb: jest.fn(() => (dispatch: any) => {
+		getPageBreadcrumb: vi.fn(() => (dispatch: any) => {
 			dispatch({
 				type: "pageEditor/SET_BREADCRUMB",
 				payload: {},
 			});
 		}),
-		deleteError: jest.fn(() => ({
+		deleteError: vi.fn(() => ({
 			type: "pageEditor/DELETE_ERROR",
 			payload: {},
 		})),
@@ -112,9 +115,9 @@ const initialStore = {
 		savedMenus: null,
 	},
 	navigationActions: {
-		// Aquí usamos un jest.fn() simple placeholder si es necesario,
+		// Aquí usamos un vi.fn() simple placeholder si es necesario,
 		// o podemos omitirlo si el componente no lo llama directamente desde el state
-		updateEditorContent: jest.fn(),
+		updateEditorContent: vi.fn(),
 	},
 };
 

package/src/__tests__/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager/TemplateManager.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent } from "../../../../../../../../config/jest/test-utils";
+import { render, cleanup, screen, fireEvent } from "../../../../../../../../config/tests/test-utils";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
 
@@ -15,7 +15,7 @@ beforeEach(() => {
 
 const middlewares: any = [];
 const mockStore = configureStore(middlewares);
-const updateValueMock = jest.fn();
+const updateValueMock = vi.fn();
 
 const defaultProps = {
 	template: {
@@ -39,7 +39,7 @@ const defaultProps = {
 		],
 	},
 	updateValue: updateValueMock,
-	goTo: jest.fn(),
+	goTo: vi.fn(),
 	objKey: "template",
 	pages: [],
 	selectedTab: "config",
@@ -67,7 +67,7 @@ const defaultProps = {
 	actions: {},
 	activatedPacks: [],
 	isTemplateActivated: true,
-	deleteError: jest.fn(),
+	deleteError: vi.fn(),
 	errors: [],
 	theme: "griddo-alt-theme",
 	moduleCopy: null,

package/src/__tests__/components/ConfigPanel/Form/Form.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";
 
@@ -133,13 +134,13 @@ defaultProps.schema = {
 	],
 	schemaType: "module",
 };
-const restorePageNavigationActionMock = jest.fn();
+const restorePageNavigationActionMock = vi.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<
+const setSelectedContentMock = defaultProps.setSelectedContent as MockedFunction<(editorID: number) => void>;
+const setSelectedTabMocked = defaultProps.setSelectedTab as MockedFunction<(tab: string) => void>;
+const setHistoryPushMocked = defaultProps.setHistoryPush as MockedFunction<
 	(path: string, isEditor: boolean) => void
 >;
 defaultProps.selectedTab = "content";