@griddo/ax 12.3.0-beta.0 → 12.4.0

package/src/__tests__/components/Fields/TextArea/TextArea.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import TextArea from "@ax/components/Fields/TextArea";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
@@ -10,7 +9,7 @@ afterEach(cleanup);
 const props = {
 	name: "",
 	value: "",
-	onChange: jest.fn(),
+	onChange: vi.fn(),
 };
 
 describe("TextArea component rendering", () => {
@@ -27,29 +26,34 @@ describe("TextArea component rendering", () => {
 });
 
 describe("TextArea events", () => {
+	// Asserts the observable contract instead of spying on React.useState: an ESM
+	// namespace is immutable, so `vi.spyOn(React, ...)` no longer intercepts the
+	// hook the component imported. onChange is debounced by 300ms.
 	test("should call the onChange", () => {
-		const setStateMock = jest.fn();
-		const useStateMock: any = (useState: string) => [useState, setStateMock];
-		jest.spyOn(React, "useState").mockImplementation(useStateMock);
+		vi.useFakeTimers();
+		const onChange = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<TextArea {...props} />
+				<TextArea {...props} onChange={onChange} />
 			</ThemeProvider>,
 		);
 
 		const textAreaComponent = screen.getByTestId("text-area-component");
 		expect(textAreaComponent).toBeTruthy();
 		fireEvent.change(textAreaComponent, { target: { value: "test" } });
-		expect(setStateMock).toHaveBeenCalledWith("test");
+		vi.advanceTimersByTime(300);
+		expect(onChange).toHaveBeenCalledWith("test");
+
+		vi.useRealTimers();
 	});
 
 	test("should call the onBlur", () => {
-		const handleValidationMock = jest.fn();
+		const handleValidationMock = vi.fn();
 		const defaultProps = {
 			name: "name",
 			value: "value",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			handleValidation: handleValidationMock,
 		};
 

package/src/__tests__/components/Fields/TextField/TextField.test.tsx

@@ -9,7 +9,7 @@ afterEach(cleanup);
 
 const defaultProps = {
 	value: "",
-	onChange: jest.fn(),
+	onChange: vi.fn(),
 };
 
 describe("TextField component rendering", () => {
@@ -30,7 +30,7 @@ describe("TextField component rendering", () => {
 	test("should render the component with prefix", () => {
 		const props = {
 			value: "value",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			prefix: "prefix",
 		};
 
@@ -51,7 +51,7 @@ describe("TextField component rendering", () => {
 	it("should render the component with backgroundIcon", () => {
 		const props = {
 			value: "value",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			icon: "icon",
 			iconPosition: "in",
 		};
@@ -73,7 +73,7 @@ describe("TextField component rendering", () => {
 	it("should render the component with button", () => {
 		const props = {
 			value: "value",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			icon: "icon",
 			iconPosition: "out",
 		};
@@ -95,10 +95,10 @@ describe("TextField component rendering", () => {
 
 describe("onClick from buttons", () => {
 	test("onClickIcon been called in BackgroundIcon", () => {
-		const onClickIconMock = jest.fn();
+		const onClickIconMock = vi.fn();
 		const props = {
 			value: "value",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			icon: "icon",
 			iconPosition: "in",
 			onClickIcon: onClickIconMock,
@@ -118,10 +118,10 @@ describe("onClick from buttons", () => {
 	});
 
 	test("onClickIcon been called in BackgroundIcon", () => {
-		const onClickIconMock = jest.fn();
+		const onClickIconMock = vi.fn();
 		const props = {
 			value: "value",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			icon: "icon",
 			iconPosition: "out",
 			onClickIcon: onClickIconMock,

package/src/__tests__/components/Fields/TimeField/HourInput/HourInput.test.tsx

@@ -1,6 +1,7 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
@@ -39,7 +40,7 @@ describe("HourInput component rendering", () => {
 
 describe("onChange events", () => {
 	it("should call onChange on change with valid time", () => {
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 		defaultProps.value = "12:30";
 		defaultProps.disabled = false;
 
@@ -59,7 +60,7 @@ describe("onChange events", () => {
 	});
 
 	it("should call onChange on change with 24 hours time", () => {
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 		defaultProps.value = "12:00";
 
 		render(
@@ -78,7 +79,7 @@ describe("onChange events", () => {
 	});
 
 	it("should call onChange on change with 24 hours time", () => {
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 		defaultProps.value = "12:00";
 
 		render(
@@ -97,7 +98,7 @@ describe("onChange events", () => {
 	});
 
 	it("should call onChange on change with more than 12 hours", () => {
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 		defaultProps.value = "12:00";
 
 		render(
@@ -116,7 +117,7 @@ describe("onChange events", () => {
 	});
 
 	it("should call onChange on change with more than 59 minutes", () => {
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 		defaultProps.value = "12:30";
 
 		render(

package/src/__tests__/components/Fields/TimeField/TimeField.test.tsx

@@ -1,6 +1,7 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
@@ -62,7 +63,7 @@ describe("TimeField component rendering", () => {
 
 describe("onChange events", () => {
 	it("should call onChange on change", () => {
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 		defaultProps.value = "12:30 am";
 
 		render(
@@ -77,7 +78,7 @@ describe("onChange events", () => {
 	});
 
 	it("should call onChange on change with no value", () => {
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 		defaultProps.value = undefined;
 
 		render(

package/src/__tests__/components/Fields/ToggleField/ToggleField.test.tsx

@@ -3,7 +3,7 @@ import ToggleField, { IToggleFieldProps } from "@ax/components/Fields/ToggleFiel
 import { ThemeProvider } from "styled-components";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
@@ -99,7 +99,7 @@ describe("ToggleField component rendering", () => {
 describe("onClick events", () => {
 	it("should call onChange function with value true", () => {
 		defaultProps.value = false;
-		defaultProps.onChange = jest.fn();
+		defaultProps.onChange = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>

package/src/__tests__/components/Fields/Tooltip/Tooltip.test.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import { render, screen, cleanup, fireEvent, act } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 import { parseTheme } from "@ax/helpers";
 
@@ -46,7 +46,7 @@ describe("Tooltip component rendering", () => {
 
 describe("Tooltip events triggering", () => {
 	it("should render the component and Tip Component is still visible when doing click", () => {
-		jest.useFakeTimers();
+		vi.useFakeTimers();
 		defaultProps.content = "content";
 		defaultProps.children = <Icon name="modified" size="16px" />;
 
@@ -76,7 +76,7 @@ describe("Tooltip events triggering", () => {
 					<Tooltip {...defaultProps} />
 				</ThemeProvider>,
 			);
-			jest.runAllTimers();
+			vi.runAllTimers();
 		});
 
 		expect(tipComponent).toBeVisible();
@@ -91,13 +91,13 @@ describe("Tooltip events triggering", () => {
 				</ThemeProvider>,
 			);
 
-			jest.runAllTimers();
+			vi.runAllTimers();
 		});
 		expect(tipComponent).toBeVisible();
 	});
 
 	it("should render the component and change visibility of Tip Component when click", () => {
-		jest.useFakeTimers();
+		vi.useFakeTimers();
 		defaultProps.content = "content";
 		defaultProps.children = <Icon name="modified" size="16px" />;
 
@@ -128,7 +128,7 @@ describe("Tooltip events triggering", () => {
 				</ThemeProvider>,
 			);
 
-			jest.runAllTimers();
+			vi.runAllTimers();
 		});
 
 		expect(tipComponent).toBeVisible();

package/src/__tests__/components/Fields/TranslateButton/TranslateButton.test.tsx

@@ -2,8 +2,8 @@ import * as React from "react";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
-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 thunk from "redux-thunk";
 import TranslateButton, { ITranslateButtonProps } from "@ax/components/Fields/TranslateButton";
@@ -36,7 +36,7 @@ describe("Translate Button component rendering", () => {
 
 		const translateButtonWrapper = screen.getByTestId("translate-button-wrapper");
 		expect(translateButtonWrapper).toBeTruthy();
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeFalsy();
 	});
 
@@ -60,7 +60,7 @@ describe("Translate Button component rendering", () => {
 
 		const translateButtonWrapper = screen.getByTestId("translate-button-wrapper");
 		expect(translateButtonWrapper).toBeTruthy();
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeFalsy();
 	});
 
@@ -83,7 +83,7 @@ describe("Translate Button component rendering", () => {
 		);
 
 		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeFalsy();
 		expect(translateButtonWrapper).toBeFalsy();
 	});
@@ -107,7 +107,7 @@ describe("Translate Button component rendering", () => {
 		);
 
 		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeFalsy();
 		expect(translateButtonWrapper).toBeFalsy();
 	});
@@ -131,7 +131,7 @@ describe("Translate Button component rendering", () => {
 		);
 
 		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeFalsy();
 		expect(translateButtonWrapper).toBeFalsy();
 	});
@@ -139,7 +139,7 @@ describe("Translate Button component rendering", () => {
 	it("should render the notification if page is already translated", () => {
 		const initialStore = {
 			app: { globalSettings: { autoTranslation: true } },
-			pageEditor: { editorContent: { canBeTranslated: false }, isIATranslated: true },
+			pageEditor: { editorContent: { canBeTranslated: false, originalLanguage: 2 }, isIATranslated: true },
 			structuredData: { form: null, isIATranslated: false },
 			forms: { formContent: null },
 		};
@@ -155,7 +155,7 @@ describe("Translate Button component rendering", () => {
 		);
 
 		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeTruthy();
 		expect(translateButtonWrapper).toBeFalsy();
 	});
@@ -164,7 +164,7 @@ describe("Translate Button component rendering", () => {
 		const initialStore = {
 			app: { globalSettings: { autoTranslation: true } },
 			pageEditor: { editorContent: null, isIATranslated: false },
-			structuredData: { form: { canBeTranslated: false }, isIATranslated: true },
+			structuredData: { form: { canBeTranslated: false, originalLanguage: 2 }, isIATranslated: true },
 			forms: { formContent: null },
 		};
 		const store = mockStore(initialStore);
@@ -179,7 +179,7 @@ describe("Translate Button component rendering", () => {
 		);
 
 		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeTruthy();
 		expect(translateButtonWrapper).toBeFalsy();
 	});
@@ -204,7 +204,7 @@ describe("Translate Button component rendering", () => {
 
 		const translateButtonWrapper = screen.getByTestId("translate-button-wrapper");
 		expect(translateButtonWrapper).toBeTruthy();
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeFalsy();
 	});
 
@@ -228,7 +228,7 @@ describe("Translate Button component rendering", () => {
 
 		const translateButtonWrapper = screen.getByTestId("translate-button-wrapper");
 		expect(translateButtonWrapper).toBeTruthy();
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeFalsy();
 	});
 });

package/src/__tests__/components/Fields/UniqueCheck/UniqueCheck.test.tsx

@@ -24,7 +24,7 @@ const initialValues = {
 	name: "",
 	value: null,
 	options: optionsArray,
-	onChange: jest.fn(),
+	onChange: vi.fn(),
 };
 
 describe("CheckField component rendering", () => {

package/src/__tests__/components/Fields/UrlField/UrlField.test.tsx

@@ -1,11 +1,12 @@
+import type { MockedFunction } from "vitest";
 import React from "react";
 import axios from "axios";
 import "@testing-library/jest-dom";
 import configureStore from "redux-mock-store";
 import { ThemeProvider } from "styled-components";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
-import { render, cleanup, screen, act, fireEvent } from "../../../../../config/jest/test-utils";
+import { render, cleanup, screen, act, fireEvent } from "../../../../../config/tests/test-utils";
 import {
 	pageResponse,
 	pageResponseWithTabs,
@@ -19,7 +20,7 @@ import globalTheme from "@ax/themes/theme.json";
 
 afterEach(() => {
 	cleanup();
-	jest.resetAllMocks();
+	vi.resetAllMocks();
 });
 
 const defaultProps = mock<IUrlFieldProps>();
@@ -110,8 +111,8 @@ const mockStore = configureStore(middlewares);
 
 const store = mockStore(initialStore);
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 const mockApiCalls = () =>
 	mockedAxios.mockImplementation((request: any) => {
 		switch (request.url) {
@@ -196,11 +197,11 @@ describe("UrlField component rendering", () => {
 			linkToURL: "//cx.dev.griddo.io/pre-griddo/gonzalo-h/new-page/",
 			anchor: "mega-anchor",
 		};
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		const initialState = { ...initialStore, ...defaultProps };
 
-		const handlePanel = jest.fn();
+		const handlePanel = vi.fn();
 
 		mockApiCalls();
 
@@ -223,8 +224,8 @@ describe("UrlField component rendering", () => {
 			linkTo: 4111,
 			linkToURL: "//cx.dev.griddo.io/pre-griddo/gonzalo-h/new-page/",
 		};
-		const onChange = jest.fn();
-		const handlePanel = jest.fn();
+		const onChange = vi.fn();
+		const handlePanel = vi.fn();
 
 		const initialState = { ...initialStore, ...defaultProps };
 
@@ -262,8 +263,8 @@ describe("UrlField component rendering", () => {
 			subSlug: "sub-slug",
 			anchor: "anchor",
 		};
-		const onChange = jest.fn();
-		const handlePanel = jest.fn();
+		const onChange = vi.fn();
+		const handlePanel = vi.fn();
 
 		const initialState = { ...initialStore, ...defaultProps };
 
@@ -311,7 +312,7 @@ describe("onChange events", () => {
 		defaultProps.value = null;
 		const initialState = { ...initialStore, ...defaultProps };
 
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		const responseFail = {
 			data: null,
@@ -365,12 +366,12 @@ describe("onClick events", () => {
 			anchor: "mega-anchor",
 		};
 
-		const onChange = jest.fn();
-		const handleValidation = jest.fn();
+		const onChange = vi.fn();
+		const handleValidation = vi.fn();
 
 		const initialState = { ...initialStore, ...defaultProps };
 
-		const handlePanel = jest.fn();
+		const handlePanel = vi.fn();
 
 		mockApiCalls();
 
@@ -416,10 +417,10 @@ describe("onClick events", () => {
 			anchor: "mega-anchor",
 		};
 
-		const onChange = jest.fn();
-		const handleValidation = jest.fn();
-		const handlePanel = jest.fn();
-		const resetValidation = jest.fn();
+		const onChange = vi.fn();
+		const handleValidation = vi.fn();
+		const handlePanel = vi.fn();
+		const resetValidation = vi.fn();
 
 		const initialState = { ...initialStore, ...defaultProps };
 

package/src/__tests__/components/Fields/VisualUniqueSelection/ImageSelection/ImageSelection.test.tsx

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 import ImageSelection, { IImageSelectionProps } from "@ax/components/Fields/VisualUniqueSelection/ImageSelection";
 import { ThemeProvider } from "styled-components";
@@ -5,7 +6,7 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import "@testing-library/jest-dom";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 
@@ -14,7 +15,7 @@ defaultProps.theme = "default-theme";
 defaultProps.columns = 2;
 defaultProps.value = "value";
 defaultProps.title = "title";
-const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 defaultProps.name = "name";
 defaultProps.objKey = "element";
 

package/src/__tests__/components/Fields/VisualUniqueSelection/ScrollableSelection/ScrollableSelection.test.tsx

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 import ScrollableSelection, {
 	IScrollableSelectionProps,
@@ -7,7 +8,7 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import "@testing-library/jest-dom";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 
@@ -31,11 +32,11 @@ defaultProps.elementUniqueSelection = true;
 defaultProps.columns = 2;
 defaultProps.value = "value";
 defaultProps.title = "title";
-const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 defaultProps.name = "name";
 defaultProps.objKey = "element";
 defaultProps.actions = {
-	replaceElementsInCollectionAction: jest.fn(),
+	replaceElementsInCollectionAction: vi.fn(),
 };
 defaultProps.selectedContent = {
 	component: "BasicContent",

package/src/__tests__/components/Fields/VisualUniqueSelection/VisualUniqueSelection.test.tsx

@@ -6,7 +6,7 @@ import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 

package/src/__tests__/components/Fields/Wysiwyg/Wysiwyg.atoms.test.tsx

@@ -7,8 +7,8 @@ import globalTheme from "@ax/themes/theme.json";
 import { LinkPopover } from "@ax/components/Fields/Wysiwyg/atoms";
 
 // Mock createPortal to render content directly in the test DOM
-jest.mock("react-dom", () => {
-	const actual = jest.requireActual("react-dom");
+vi.mock("react-dom", async () => {
+	const actual = await vi.importActual("react-dom");
 	return {
 		...actual,
 		createPortal: (element: React.ReactNode) => element,
@@ -16,7 +16,7 @@ jest.mock("react-dom", () => {
 });
 
 // Mock FieldsBehavior and Button components
-jest.mock("@ax/components", () => ({
+vi.mock("@ax/components", async () => ({
 	Button: ({ onClick, disabled, children }: any) => (
 		<button type="button" onClick={onClick} disabled={disabled} data-testid="insert-button">
 			{children}
@@ -89,13 +89,13 @@ describe("LinkPopover", () => {
 		x: 100,
 		y: 100,
 		selectedText: "Click here",
-		onInsert: jest.fn(),
-		onClose: jest.fn(),
+		onInsert: vi.fn(),
+		onClose: vi.fn(),
 		linkData: null,
 	};
 
 	beforeEach(() => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	});
 
 	describe("Rendering", () => {
@@ -168,7 +168,7 @@ describe("LinkPopover", () => {
 		});
 
 		it("should call onInsert with URL and text when INSERT is clicked", async () => {
-			const mockOnInsert = jest.fn();
+			const mockOnInsert = vi.fn();
 			const props = {
 				...defaultProps,
 				onInsert: mockOnInsert,
@@ -195,7 +195,7 @@ describe("LinkPopover", () => {
 		});
 
 		it("should use URL as text if link text is empty", async () => {
-			const mockOnInsert = jest.fn();
+			const mockOnInsert = vi.fn();
 			const props = {
 				...defaultProps,
 				selectedText: "",
@@ -220,7 +220,7 @@ describe("LinkPopover", () => {
 
 	describe("Link options", () => {
 		it("should include newTab option when checkbox is checked", async () => {
-			const mockOnInsert = jest.fn();
+			const mockOnInsert = vi.fn();
 			const props = {
 				...defaultProps,
 				onInsert: mockOnInsert,
@@ -247,7 +247,7 @@ describe("LinkPopover", () => {
 		});
 
 		it("should include noFollow option when checkbox is checked", async () => {
-			const mockOnInsert = jest.fn();
+			const mockOnInsert = vi.fn();
 			const props = {
 				...defaultProps,
 				onInsert: mockOnInsert,
@@ -342,7 +342,7 @@ describe("LinkPopover", () => {
 
 	describe("Text field handling", () => {
 		it("should update link text when text field changes", async () => {
-			const mockOnInsert = jest.fn();
+			const mockOnInsert = vi.fn();
 			const props = {
 				...defaultProps,
 				onInsert: mockOnInsert,