@griddo/ax 12.3.0 → 12.5.0

package/src/__tests__/modules/FramePreview/FramePreview.test.tsx

@@ -1,3 +1,4 @@
+import type { Mock } from "vitest";
 import { parseTheme } from "@ax/helpers";
 import * as hooks from "@ax/hooks";
 import FramePreview from "@ax/modules/FramePreview";
@@ -9,24 +10,24 @@ import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
 import { ThemeProvider } from "styled-components";
 
-import { act, cleanup, render, screen } from "../../../../config/jest/test-utils";
+import { act, cleanup, render, screen } from "../../../../config/tests/test-utils";
 
 // Capture BrowserContent props so individual callback functions can be tested
 const capturedBrowserContentProps: { current: Record<string, any> | null } = { current: null };
 
-jest.mock("@ax/hooks", () => ({
-	...jest.requireActual("@ax/hooks"),
-	useURLSearchParam: jest.fn().mockReturnValue(null),
-	useOnMessageReceivedFromOutside: jest.fn(),
-	useToast: jest.fn().mockReturnValue({
+vi.mock("@ax/hooks", async () => ({
+	...(await vi.importActual("@ax/hooks")),
+	useURLSearchParam: vi.fn().mockReturnValue(null),
+	useOnMessageReceivedFromOutside: vi.fn(),
+	useToast: vi.fn().mockReturnValue({
 		isVisible: false,
-		toggleToast: jest.fn(),
-		setIsVisible: jest.fn(),
+		toggleToast: vi.fn(),
+		setIsVisible: vi.fn(),
 		state: "",
 	}),
 }));
 
-jest.mock("@ax/components", () => {
+vi.mock("@ax/components", async () => {
 	const React = require("react");
 	return {
 		BrowserContent: (props: any) => {
@@ -38,20 +39,20 @@ jest.mock("@ax/components", () => {
 	};
 });
 
-jest.mock("@ax/modules/FramePreview/utils", () => ({
-	observeAndAddIdsToHeadings: jest.fn().mockReturnValue(jest.fn()),
-	observeAndHighlightKeywords: jest.fn().mockReturnValue(jest.fn()),
+vi.mock("@ax/modules/FramePreview/utils", async () => ({
+	observeAndAddIdsToHeadings: vi.fn().mockReturnValue(vi.fn()),
+	observeAndHighlightKeywords: vi.fn().mockReturnValue(vi.fn()),
 }));
 
-jest.mock("@ax/forms", () => ({
-	findByEditorID: jest.fn().mockReturnValue({
+vi.mock("@ax/forms", async () => ({
+	findByEditorID: vi.fn().mockReturnValue({
 		element: { component: "Page", editorID: 5 },
 		parent: { parentEditorID: 0 },
 	}),
 }));
 
 // Mock action creators as plain functions to avoid thunk side-effects
-jest.mock("@ax/containers/PageEditor", () => ({
+vi.mock("@ax/containers/PageEditor", async () => ({
 	pageEditorActions: {
 		setSelectedContent: (id: number) => ({ type: "SET_SELECTED_CONTENT", payload: id }),
 		setEditorContent: (content: any) => ({ type: "SET_EDITOR_CONTENT", payload: content }),
@@ -61,7 +62,7 @@ jest.mock("@ax/containers/PageEditor", () => ({
 	},
 }));
 
-jest.mock("@ax/containers/Forms", () => ({
+vi.mock("@ax/containers/Forms", async () => ({
 	formsActions: {
 		setSelectedContent: (id: number) => ({ type: "SET_FORM_SELECTED_CONTENT", payload: id }),
 		setFormContent: (content: any) => ({ type: "SET_FORM_CONTENT", payload: content }),
@@ -99,7 +100,23 @@ const renderFramePreview = async (store = buildStore()) => {
 afterEach(() => {
 	cleanup();
 	capturedBrowserContentProps.current = null;
-	jest.restoreAllMocks();
+	vi.restoreAllMocks();
+});
+
+// Los valores por defecto se definen dentro de las factorías de `vi.mock`, que
+// solo corren al cargar el módulo, mientras que el `restoreAllMocks` de arriba
+// los borra tras cada test. Los tests que no fijan los suyos dependían de ser
+// los primeros; aquí se rehacen antes de cada uno.
+beforeEach(() => {
+	(hooks.useURLSearchParam as Mock).mockReturnValue(null);
+	(hooks.useToast as Mock).mockReturnValue({
+		isVisible: false,
+		toggleToast: vi.fn(),
+		setIsVisible: vi.fn(),
+		state: "",
+	});
+	(frameUtils.observeAndAddIdsToHeadings as Mock).mockReturnValue(vi.fn());
+	(frameUtils.observeAndHighlightKeywords as Mock).mockReturnValue(vi.fn());
 });
 
 describe("FramePreview rendering", () => {
@@ -122,7 +139,7 @@ describe("FramePreview rendering", () => {
 	});
 
 	it("should render HeadingsOverlay when type is 'headings'", async () => {
-		(hooks.useURLSearchParam as jest.Mock).mockImplementation((param: string) => {
+		(hooks.useURLSearchParam as Mock).mockImplementation((param: string) => {
 			if (param === "type") return "headings";
 			return null;
 		});
@@ -135,7 +152,7 @@ describe("FramePreview rendering", () => {
 
 describe("FramePreview effects", () => {
 	it("should post iframe-mousemove message to parent on window mousemove", async () => {
-		const postMessageSpy = jest.spyOn(window, "postMessage");
+		const postMessageSpy = vi.spyOn(window, "postMessage");
 
 		await renderFramePreview();
 
@@ -150,7 +167,7 @@ describe("FramePreview effects", () => {
 	});
 
 	it("should set selectedID to '0' in localStorage when disabled param is true", async () => {
-		(hooks.useURLSearchParam as jest.Mock).mockImplementation((param: string) => {
+		(hooks.useURLSearchParam as Mock).mockImplementation((param: string) => {
 			if (param === "disabled") return "true";
 			return null;
 		});
@@ -161,7 +178,7 @@ describe("FramePreview effects", () => {
 	});
 
 	it("should call observeAndAddIdsToHeadings when type is 'headings'", async () => {
-		(hooks.useURLSearchParam as jest.Mock).mockImplementation((param: string) => {
+		(hooks.useURLSearchParam as Mock).mockImplementation((param: string) => {
 			if (param === "type") return "headings";
 			return null;
 		});
@@ -172,7 +189,7 @@ describe("FramePreview effects", () => {
 	});
 
 	it("should call observeAndHighlightKeywords when type is 'keywords'", async () => {
-		(hooks.useURLSearchParam as jest.Mock).mockImplementation((param: string) => {
+		(hooks.useURLSearchParam as Mock).mockImplementation((param: string) => {
 			if (param === "type") return "keywords";
 			return null;
 		});
@@ -185,7 +202,7 @@ describe("FramePreview effects", () => {
 
 describe("FramePreview module actions", () => {
 	it("should post module-delete and dispatch deleteModule when deleteModuleAction is called", async () => {
-		const postMessageSpy = jest.spyOn(window, "postMessage");
+		const postMessageSpy = vi.spyOn(window, "postMessage");
 
 		await renderFramePreview();
 
@@ -195,7 +212,7 @@ describe("FramePreview module actions", () => {
 	});
 
 	it("should post module-duplicate when duplicateModuleAction is called", async () => {
-		const postMessageSpy = jest.spyOn(window, "postMessage");
+		const postMessageSpy = vi.spyOn(window, "postMessage");
 
 		await renderFramePreview();
 
@@ -205,14 +222,14 @@ describe("FramePreview module actions", () => {
 	});
 
 	it("should post module-copy and call toggleToast when copyModuleAction is called", async () => {
-		const toggleToastMock = jest.fn();
-		(hooks.useToast as jest.Mock).mockReturnValue({
+		const toggleToastMock = vi.fn();
+		(hooks.useToast as Mock).mockReturnValue({
 			isVisible: false,
 			toggleToast: toggleToastMock,
-			setIsVisible: jest.fn(),
+			setIsVisible: vi.fn(),
 			state: "",
 		});
-		const postMessageSpy = jest.spyOn(window, "postMessage");
+		const postMessageSpy = vi.spyOn(window, "postMessage");
 
 		await renderFramePreview();
 
@@ -225,19 +242,19 @@ describe("FramePreview module actions", () => {
 
 describe("FramePreview editor ID selection", () => {
 	it("should post module-click when selectEditorID is called", async () => {
-		const postMessageSpy = jest.spyOn(window, "postMessage");
+		const postMessageSpy = vi.spyOn(window, "postMessage");
 
 		await renderFramePreview();
 
 		const { selectEditorID } = capturedBrowserContentProps.current!;
-		const mockEvent = { stopPropagation: jest.fn() };
+		const mockEvent = { stopPropagation: vi.fn() };
 		selectEditorID({ editorID: 1, component: "Page", type: "content", parentEditorID: 0 }, null, mockEvent);
 
 		expect(postMessageSpy).toHaveBeenCalledWith({ type: "module-click", message: 1 }, "*");
 	});
 
 	it("should post module-scroll when selectHoverEditorID is called and parent meets condition", async () => {
-		const postMessageSpy = jest.spyOn(window, "postMessage");
+		const postMessageSpy = vi.spyOn(window, "postMessage");
 
 		await renderFramePreview();
 
@@ -248,16 +265,16 @@ describe("FramePreview editor ID selection", () => {
 	});
 
 	it("should not post module-click when preview mode is active", async () => {
-		(hooks.useURLSearchParam as jest.Mock).mockImplementation((param: string) => {
+		(hooks.useURLSearchParam as Mock).mockImplementation((param: string) => {
 			if (param === "preview") return "true";
 			return null;
 		});
-		const postMessageSpy = jest.spyOn(window, "postMessage");
+		const postMessageSpy = vi.spyOn(window, "postMessage");
 
 		await renderFramePreview();
 
 		const { selectEditorID } = capturedBrowserContentProps.current!;
-		const mockEvent = { stopPropagation: jest.fn() };
+		const mockEvent = { stopPropagation: vi.fn() };
 		selectEditorID({ editorID: 1, component: "Page", type: "content", parentEditorID: 0 }, null, mockEvent);
 
 		expect(postMessageSpy).not.toHaveBeenCalledWith(expect.objectContaining({ type: "module-click" }), "*");
@@ -266,10 +283,10 @@ describe("FramePreview editor ID selection", () => {
 
 describe("FramePreview content modes", () => {
 	it("should render Toast when isVisible is true", async () => {
-		(hooks.useToast as jest.Mock).mockReturnValueOnce({
+		(hooks.useToast as Mock).mockReturnValueOnce({
 			isVisible: true,
-			toggleToast: jest.fn(),
-			setIsVisible: jest.fn(),
+			toggleToast: vi.fn(),
+			setIsVisible: vi.fn(),
 			state: "1 module copied to clipboard",
 		});
 
@@ -279,7 +296,7 @@ describe("FramePreview content modes", () => {
 	});
 
 	it("should use 'preview' renderer when preview param is true", async () => {
-		(hooks.useURLSearchParam as jest.Mock).mockImplementation((param: string) => {
+		(hooks.useURLSearchParam as Mock).mockImplementation((param: string) => {
 			if (param === "preview") return "true";
 			return null;
 		});
@@ -290,7 +307,7 @@ describe("FramePreview content modes", () => {
 	});
 
 	it("should pass filtered keywords to observeAndHighlightKeywords when keywordFilter param is set", async () => {
-		(hooks.useURLSearchParam as jest.Mock).mockImplementation((param: string) => {
+		(hooks.useURLSearchParam as Mock).mockImplementation((param: string) => {
 			if (param === "type") return "keywords";
 			if (param === "keywordFilter") return "seo";
 			return null;

package/src/__tests__/modules/FramePreview/HeadingsOverlay/HeadingsOverlay.test.tsx

@@ -13,7 +13,7 @@ beforeEach(() => {
 	let rafId = 0;
 	let processingRaf = false;
 
-	jest.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
+	vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
 		// Avoid infinite recursion by checking if we're already processing
 		if (!processingRaf) {
 			processingRaf = true;
@@ -26,13 +26,13 @@ beforeEach(() => {
 		return ++rafId;
 	});
 
-	jest.spyOn(window, "cancelAnimationFrame").mockImplementation(() => {});
+	vi.spyOn(window, "cancelAnimationFrame").mockImplementation(() => {});
 });
 
 afterEach(() => {
 	cleanup();
 	for (const el of document.querySelectorAll("h1, h2, h3, h4, h5, h6")) el.remove();
-	jest.restoreAllMocks();
+	vi.restoreAllMocks();
 });
 
 describe("HeadingsOverlay rendering", () => {
@@ -47,7 +47,7 @@ describe("HeadingsOverlay rendering", () => {
 		const h1 = document.createElement("h1");
 		h1.dataset.griddoid = "heading-1";
 		document.body.appendChild(h1);
-		jest.spyOn(h1, "getBoundingClientRect").mockReturnValue({
+		vi.spyOn(h1, "getBoundingClientRect").mockReturnValue({
 			top: 10,
 			left: 10,
 			width: 200,
@@ -70,7 +70,7 @@ describe("HeadingsOverlay rendering", () => {
 		const h2 = document.createElement("h2");
 		h2.dataset.griddoid = "heading-1";
 		document.body.appendChild(h2);
-		jest.spyOn(h2, "getBoundingClientRect").mockReturnValue({
+		vi.spyOn(h2, "getBoundingClientRect").mockReturnValue({
 			top: 10,
 			left: 10,
 			width: 200,
@@ -103,7 +103,7 @@ describe("HeadingsOverlay rendering", () => {
 		const h1 = document.createElement("h1");
 		h1.dataset.griddoid = "heading-1";
 		document.body.appendChild(h1);
-		jest.spyOn(h1, "getBoundingClientRect").mockReturnValue({
+		vi.spyOn(h1, "getBoundingClientRect").mockReturnValue({
 			top: 10,
 			left: 10,
 			width: 200,
@@ -116,7 +116,7 @@ describe("HeadingsOverlay rendering", () => {
 		} as DOMRect);
 
 		const originalGetComputedStyle = window.getComputedStyle.bind(window);
-		jest.spyOn(window, "getComputedStyle").mockImplementation((el) => {
+		vi.spyOn(window, "getComputedStyle").mockImplementation((el) => {
 			if (el === h1) return { display: "none", visibility: "", opacity: "1" } as CSSStyleDeclaration;
 			return originalGetComputedStyle(el);
 		});
@@ -132,7 +132,7 @@ describe("HeadingsOverlay rendering", () => {
 		const h1 = document.createElement("h1");
 		h1.dataset.griddoid = "heading-1";
 		document.body.appendChild(h1);
-		jest.spyOn(h1, "getBoundingClientRect").mockReturnValue({
+		vi.spyOn(h1, "getBoundingClientRect").mockReturnValue({
 			top: 10,
 			left: 10,
 			width: 200,
@@ -145,7 +145,7 @@ describe("HeadingsOverlay rendering", () => {
 		} as DOMRect);
 
 		const originalGetComputedStyle = window.getComputedStyle.bind(window);
-		jest.spyOn(window, "getComputedStyle").mockImplementation((el) => {
+		vi.spyOn(window, "getComputedStyle").mockImplementation((el) => {
 			if (el === h1) return { display: "block", visibility: "visible", opacity: "0" } as CSSStyleDeclaration;
 			return originalGetComputedStyle(el);
 		});
@@ -161,7 +161,7 @@ describe("HeadingsOverlay rendering", () => {
 		const h1 = document.createElement("h1");
 		h1.dataset.griddoid = "heading-1";
 		document.body.appendChild(h1);
-		jest.spyOn(h1, "getBoundingClientRect").mockReturnValue({
+		vi.spyOn(h1, "getBoundingClientRect").mockReturnValue({
 			top: 10,
 			left: 10,
 			width: 200,
@@ -176,7 +176,7 @@ describe("HeadingsOverlay rendering", () => {
 		const h2 = document.createElement("h2");
 		h2.dataset.griddoid = "heading-2";
 		document.body.appendChild(h2);
-		jest.spyOn(h2, "getBoundingClientRect").mockReturnValue({
+		vi.spyOn(h2, "getBoundingClientRect").mockReturnValue({
 			top: 60,
 			left: 10,
 			width: 200,

package/src/__tests__/modules/Settings/Integrations/Integrations.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
 import { Router } from "react-router-dom";
@@ -9,7 +9,7 @@ import { Router } from "react-router-dom";
 import history from "@ax/routes/history";
 import globalTheme from "@ax/themes/theme.json";
 import Integrations, { IIntegrationsProps } from "@ax/modules/Settings/Integrations";
-import { render, cleanup, screen, act } from "../../../../../config/jest/test-utils";
+import { render, cleanup, screen, act } from "../../../../../config/tests/test-utils";
 
 afterEach(cleanup);
 

package/src/__tests__/modules/Settings/Social/Social.test.tsx

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import axios from "axios";
 import { Router } from "react-router-dom";
 
@@ -10,10 +11,10 @@ import Social from "@ax/modules/Settings/Social";
 import history from "@ax/routes/history";
 import globalTheme from "@ax/themes/theme.json";
 
-import { act, cleanup, render, screen } from "../../../../../config/jest/test-utils";
+import { act, cleanup, render, screen } from "../../../../../config/tests/test-utils";
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 
 beforeEach(() => {
 	mockedAxios.mockResolvedValue({ status: 200, data: {}, statusText: "OK", headers: {}, config: {} as any });

package/src/__tests__/modules/Sites/Sites.test.tsx

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import { Router } from "react-router-dom";
 
 import { parseTheme } from "@ax/helpers";
@@ -6,18 +7,18 @@ import { history } from "@ax/routes";
 import globalTheme from "@ax/themes/theme.json";
 
 import axios from "axios";
-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";
 
-import { act, cleanup, render, screen } from "../../../../config/jest/test-utils";
+import { act, cleanup, render, screen } from "../../../../config/tests/test-utils";
 import { structuredDataResponse } from "./../../../__mocks__/axios/SitesList";
 import { sitesDataMock, userDataMock } from "./../../../__mocks__/store/SitesList";
 
 afterEach(cleanup);
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 
 const mockStore = configureStore([thunk]);
 const defaultProps = mock<ISitesProps>();

package/src/__tests__/modules/Sites/SitesList/ListView/BulkHeader/BulkHeader.test.tsx

@@ -6,39 +6,46 @@ import BulkHeader from "@ax/modules/Sites/SitesList/ListView/BulkHeader";
 import globalTheme from "@ax/themes/theme.json";
 
 import { act, cleanup, screen } from "@testing-library/react";
-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";
 
-import { render } from "../../../../../../../config/jest/test-utils";
+import { render } from "../../../../../../../config/tests/test-utils";
 import { defaultStore } from "./../../../../../../__mocks__/store/GenericStore";
 
 afterEach(cleanup);
 
 const store = configureStore([thunk])(defaultStore);
-const defaultProps = mock<IBulkHeaderProps>();
+// El escenario base es el que el primer test dejaba en el objeto compartido y
+// del que el segundo dependía sin declararlo.
+const makeProps = (overrides: Partial<IBulkHeaderProps> = {}): IBulkHeaderProps =>
+	Object.assign(
+		mock<IBulkHeaderProps>(),
+		{
+			showBulk: false,
+			checkState: { isAllSelected: false, indeterminate: false },
+			filterValues: {
+				order: [{ value: "lastAccess-desc", label: "lastAccess-desc" }],
+				liveStatus: [{ value: "all", label: "All" }],
+			},
+			sortedListStatus: {
+				isAscending: false,
+				sortedByTitle: false,
+				sortedByLastAccess: true,
+				sortedByDateCreated: false,
+			},
+			totalItems: 22,
+		},
+		overrides,
+	);
 
 describe("BulkHeader component rendering", () => {
 	it("should render table header", async () => {
-		defaultProps.showBulk = false;
-		defaultProps.checkState = { isAllSelected: false, indeterminate: false };
-		defaultProps.filterValues = {
-			order: [{ value: "lastAccess-desc", label: "lastAccess-desc" }],
-			liveStatus: [{ value: "all", label: "All" }],
-		};
-		defaultProps.sortedListStatus = {
-			isAscending: false,
-			sortedByTitle: false,
-			sortedByLastAccess: true,
-			sortedByDateCreated: false,
-		};
-		defaultProps.totalItems = 22;
-
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<BulkHeader {...defaultProps} />
+					<BulkHeader {...makeProps({ showBulk: false })} />
 				</ThemeProvider>,
 				{ store },
 			);
@@ -48,12 +55,10 @@ describe("BulkHeader component rendering", () => {
 	});
 
 	it("should render bulk header", async () => {
-		defaultProps.showBulk = true;
-
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<BulkHeader {...defaultProps} />
+					<BulkHeader {...makeProps({ showBulk: true })} />
 				</ThemeProvider>,
 				{ store },
 			);

package/src/__tests__/modules/Sites/SitesList/SitesList.test.tsx

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import { Router } from "react-router-dom";
 
 import { parseTheme } from "@ax/helpers";
@@ -6,12 +7,12 @@ import { history } from "@ax/routes";
 import globalTheme from "@ax/themes/theme.json";
 
 import axios from "axios";
-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";
 
-import { act, cleanup, fireEvent, render, screen, waitFor } from "./../../../../../config/jest/test-utils";
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from "./../../../../../config/tests/test-utils";
 import { sitesResponse } from "./../../../../__mocks__/axios/SitesList";
 import { sitesOptions } from "./../../../../__mocks__/axios/SitesListOptions";
 import { sitesDataMock, sitesDataNoThumbnailMock, userDataMock } from "./../../../../__mocks__/store/SitesList";
@@ -19,8 +20,8 @@ import { sitesDataMock, sitesDataNoThumbnailMock, userDataMock } from "./../../.
 afterEach(cleanup);
 
 const defaultProps = mock<ISitesListProps>();
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 
 const mockStore = configureStore([thunk]);
 
@@ -58,6 +59,15 @@ const renderSitesList = async (storeData: any = initialStore) => {
 
 beforeEach(() => {
 	mockedAxios.mockResolvedValue(sitesResponse);
+	// Tres cosas sobreviven al test que las toca y hacían que el resto solo
+	// funcionase en un orden concreto: el `history` de @ax/routes es un
+	// singleton y los tests de navegación lo dejaban en /sites/pages; SitesList
+	// guarda el modo de vista en localStorage, así que el siguiente test
+	// arrancaba en la vista equivocada y no encontraba los testids `grid-*`; y
+	// el parche de scrollTo se hacía sobre el prototipo dentro de dos tests.
+	history.replace("/");
+	localStorage.clear();
+	window.HTMLElement.prototype.scrollTo = vi.fn();
 });
 
 describe("Sites module rendering", () => {
@@ -197,8 +207,6 @@ describe("Sites module events", () => {
 	});
 
 	it("should go to site on click recent site item", async () => {
-		window.HTMLElement.prototype.scrollTo = jest.fn();
-
 		await renderSitesList();
 
 		const recentSiteItems = screen.getAllByTestId("recent-sites-item");
@@ -223,8 +231,6 @@ describe("Sites module events", () => {
 	});
 
 	it("should go to site on click list site item", async () => {
-		window.HTMLElement.prototype.scrollTo = jest.fn();
-
 		await renderSitesList();
 
 		const gridIconAction = screen.getByTestId("icon-action-Grid2");
@@ -237,7 +243,11 @@ describe("Sites module events", () => {
 		const listSitesItems = screen.getAllByTestId("list-site-item");
 		expect(listSitesItems.length).toEqual(2);
 
-		fireEvent.click(listSitesItems[0]);
+		// La fila solo tiene onContextMenu; navegan las celdas. Antes se pulsaba la
+		// fila y no pasaba nada: la aserción se cumplía porque otro test había
+		// dejado ya el history en /sites/pages.
+		const nameCell = within(listSitesItems[0]).getAllByRole("cell")[2];
+		fireEvent.click(nameCell);
 		await waitFor(() => expect(history.location.pathname).toEqual("/sites/pages"));
 	});
 

package/src/__tests__/modules/Sites/SitesList/WelcomeModal/DataStep/DataStep.test.tsx

@@ -21,9 +21,9 @@ const renderDataStep = (props = {}) =>
 		<ThemeProvider theme={parseTheme(globalTheme)}>
 			<DataStep
 				form={defaultForm}
-				setForm={jest.fn()}
-				onClickNext={jest.fn()}
-				onClickBack={jest.fn()}
+				setForm={vi.fn()}
+				onClickNext={vi.fn()}
+				onClickBack={vi.fn()}
 				croppedImageUrl={null}
 				{...props}
 			/>
@@ -66,21 +66,21 @@ describe("DataStep rendering", () => {
 
 describe("DataStep events", () => {
 	it("should call onClickBack when Back button is clicked", () => {
-		const onClickBack = jest.fn();
+		const onClickBack = vi.fn();
 		renderDataStep({ onClickBack });
 		fireEvent.click(screen.getByText("Back"));
 		expect(onClickBack).toHaveBeenCalledTimes(1);
 	});
 
 	it("should call onClickNext when Next step button is clicked", () => {
-		const onClickNext = jest.fn();
+		const onClickNext = vi.fn();
 		renderDataStep({ onClickNext });
 		fireEvent.click(screen.getByText("Next step"));
 		expect(onClickNext).toHaveBeenCalledTimes(1);
 	});
 
 	it("should not call onClickNext when username is empty", () => {
-		const onClickNext = jest.fn();
+		const onClickNext = vi.fn();
 		renderDataStep({ onClickNext, form: { ...defaultForm, username: "" } });
 		const nextButton = screen.getByText("Next step").closest("button");
 		nextButton && fireEvent.click(nextButton);

package/src/__tests__/modules/Sites/SitesList/WelcomeModal/FinalStep/FinalStep.test.tsx

@@ -68,8 +68,8 @@ const renderFinalStep = (props = {}) =>
 				userRoles={[]}
 				roles={mockRoles}
 				sites={mockSites}
-				onClose={jest.fn()}
-				onViewProfile={jest.fn()}
+				onClose={vi.fn()}
+				onViewProfile={vi.fn()}
 				{...props}
 			/>
 		</ThemeProvider>,
@@ -142,14 +142,14 @@ describe("FinalStep learn items", () => {
 
 describe("FinalStep events", () => {
 	it("should call onClose when Start Using Griddo is clicked", () => {
-		const onClose = jest.fn();
+		const onClose = vi.fn();
 		renderFinalStep({ onClose });
 		fireEvent.click(screen.getByText("Start Using Griddo"));
 		expect(onClose).toHaveBeenCalledTimes(1);
 	});
 
 	it("should call onViewProfile when View profile is clicked", () => {
-		const onViewProfile = jest.fn();
+		const onViewProfile = vi.fn();
 		renderFinalStep({ onViewProfile });
 		fireEvent.click(screen.getByText("View profile"));
 		expect(onViewProfile).toHaveBeenCalledTimes(1);

package/src/__tests__/modules/Sites/SitesList/WelcomeModal/ImageStep/CropView/CropView.test.tsx

@@ -10,7 +10,7 @@ afterEach(cleanup);
 const renderCropView = (props = {}) =>
 	render(
 		<ThemeProvider theme={parseTheme(globalTheme)}>
-			<CropView imageSrc="data:image/jpeg;base64,abc" onConfirm={jest.fn()} onUploadNew={jest.fn()} {...props} />
+			<CropView imageSrc="data:image/jpeg;base64,abc" onConfirm={vi.fn()} onUploadNew={vi.fn()} {...props} />
 		</ThemeProvider>,
 	);
 
@@ -36,14 +36,14 @@ describe("CropView rendering", () => {
 
 describe("CropView events", () => {
 	it("should call onConfirm with cropped area when Next step is clicked", () => {
-		const onConfirm = jest.fn();
+		const onConfirm = vi.fn();
 		renderCropView({ onConfirm });
 		fireEvent.click(screen.getByText("Next step"));
 		expect(onConfirm).toHaveBeenCalledWith({ x: 0, y: 0, width: 100, height: 100 });
 	});
 
 	it("should call onUploadNew when Upload new image is clicked", () => {
-		const onUploadNew = jest.fn();
+		const onUploadNew = vi.fn();
 		renderCropView({ onUploadNew });
 		fireEvent.click(screen.getByText("Upload new image"));
 		expect(onUploadNew).toHaveBeenCalledTimes(1);