@griddo/ax 12.3.0 → 12.4.0

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

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import { useRef } from "react";
 
 import { ThemeProvider } from "styled-components";
@@ -8,16 +9,16 @@ import "@testing-library/jest-dom";
 import FloatingMenu, { type IFloatingProps } from "@ax/components/FloatingMenu";
 import globalTheme from "@ax/themes/theme.json";
 
-jest.mock("react", () => {
-	const originReact = jest.requireActual("react");
-	const mUseRef = jest.fn();
+vi.mock("react", async () => {
+	const originReact = await vi.importActual("react");
+	const mUseRef = vi.fn();
 	return {
 		...originReact,
 		useRef: mUseRef,
 	};
 });
 
-const useMockRef = useRef as jest.MockedFunction<typeof useRef>;
+const useMockRef = useRef as MockedFunction<typeof useRef>;
 
 afterEach(cleanup);
 beforeEach(() => {
@@ -75,7 +76,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(wrapperRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(true);
 				}
 				this._current = _current;
 			},
@@ -86,7 +87,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(buttonRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(true);
 				}
 				this._current = _current;
 			},
@@ -97,7 +98,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(menuOptionsRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(false);
 				}
 				this._current = _current;
 			},
@@ -155,7 +156,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(wrapperRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValue(true);
+					vi.spyOn(_current, "contains").mockReturnValue(true);
 				}
 				this._current = _current;
 			},
@@ -166,7 +167,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(buttonRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(true);
 				}
 				this._current = _current;
 			},
@@ -177,7 +178,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(menuOptionsRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(false);
 				}
 				this._current = _current;
 			},
@@ -205,7 +206,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(wrapperRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValue(false);
+					vi.spyOn(_current, "contains").mockReturnValue(false);
 				}
 				this._current = _current;
 			},
@@ -245,7 +246,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(wrapperRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValue(true);
+					vi.spyOn(_current, "contains").mockReturnValue(true);
 				}
 				this._current = _current;
 			},
@@ -256,7 +257,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(buttonRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(true);
 				}
 				this._current = _current;
 			},
@@ -267,7 +268,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(menuOptionsRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(false);
 				}
 				this._current = _current;
 			},
@@ -295,7 +296,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(wrapperRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValue(true);
+					vi.spyOn(_current, "contains").mockReturnValue(true);
 				}
 				this._current = _current;
 			},
@@ -306,7 +307,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(buttonRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(false);
 				}
 				this._current = _current;
 			},
@@ -317,7 +318,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(menuOptionsRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(true);
 				}
 				this._current = _current;
 			},
@@ -385,7 +386,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(wrapperRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValue(true);
+					vi.spyOn(_current, "contains").mockReturnValue(true);
 				}
 				this._current = _current;
 			},
@@ -396,7 +397,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(buttonRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(true);
 				}
 				this._current = _current;
 			},
@@ -407,7 +408,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(menuOptionsRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(false);
 				}
 				this._current = _current;
 			},
@@ -435,7 +436,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(wrapperRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValue(true);
+					vi.spyOn(_current, "contains").mockReturnValue(true);
 				}
 				this._current = _current;
 			},
@@ -446,7 +447,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(buttonRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(false);
 				}
 				this._current = _current;
 			},
@@ -457,7 +458,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(menuOptionsRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(true);
 				}
 				this._current = _current;
 			},
@@ -532,7 +533,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(wrapperRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValue(true);
+					vi.spyOn(_current, "contains").mockReturnValue(true);
 				}
 				this._current = _current;
 			},
@@ -543,7 +544,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(buttonRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(true);
 				}
 				this._current = _current;
 			},
@@ -554,7 +555,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(menuOptionsRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(false);
 				}
 				this._current = _current;
 			},
@@ -601,7 +602,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(wrapperRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValue(true);
+					vi.spyOn(_current, "contains").mockReturnValue(true);
 				}
 				this._current = _current;
 			},
@@ -612,7 +613,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(buttonRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(true);
 				}
 				this._current = _current;
 			},
@@ -623,7 +624,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(menuOptionsRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValueOnce(false);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(false);
 				}
 				this._current = _current;
 			},
@@ -675,7 +676,7 @@ describe("FloatingMenu component rendering", () => {
 		Object.defineProperty(wrapperRef, "current", {
 			set(_current) {
 				if (_current) {
-					jest.spyOn(_current, "contains").mockReturnValue(true);
+					vi.spyOn(_current, "contains").mockReturnValue(true);
 				}
 				this._current = _current;
 			},
@@ -687,7 +688,7 @@ describe("FloatingMenu component rendering", () => {
 			set(_current) {
 				if (_current) {
 					// true for button click (open), false for option click
-					jest.spyOn(_current, "contains").mockReturnValueOnce(true).mockReturnValueOnce(false);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(true).mockReturnValueOnce(false);
 				}
 				this._current = _current;
 			},
@@ -699,7 +700,7 @@ describe("FloatingMenu component rendering", () => {
 			set(_current) {
 				if (_current) {
 					// true when clicking menu-children (optionWasSelected)
-					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
+					vi.spyOn(_current, "contains").mockReturnValueOnce(true);
 				}
 				this._current = _current;
 			},
@@ -778,7 +779,7 @@ describe("FloatingMenu component rendering", () => {
 	});
 
 	it("should call actionOnClose when clicking outside", () => {
-		const actionOnClose = jest.fn();
+		const actionOnClose = vi.fn();
 		const buttonContent = () => <span>trigger</span>;
 
 		const defaultProps: IFloatingProps = {
@@ -806,7 +807,7 @@ describe("FloatingMenu component rendering", () => {
 	});
 
 	it("should call actionOnClose when closing via button toggle", () => {
-		const actionOnClose = jest.fn();
+		const actionOnClose = vi.fn();
 		const buttonContent = () => <span>trigger</span>;
 
 		const defaultProps: IFloatingProps = {
@@ -833,7 +834,7 @@ describe("FloatingMenu component rendering", () => {
 	});
 
 	it("should call actionOnClose when closing via mouseLeave", () => {
-		const actionOnClose = jest.fn();
+		const actionOnClose = vi.fn();
 		const buttonContent = () => <span>trigger</span>;
 
 		const defaultProps: IFloatingProps = {

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

@@ -17,8 +17,8 @@ describe("FloatingPanel component rendering", () => {
 			isOpenedSecond: false,
 			children: false,
 			title: "title",
-			toggleModal: jest.fn(),
-			handlePanel: jest.fn(),
+			toggleModal: vi.fn(),
+			handlePanel: vi.fn(),
 			secondary: true,
 		};
 
@@ -38,8 +38,8 @@ describe("FloatingPanel component rendering", () => {
 			isOpenedSecond: false,
 			children: false,
 			title: "title",
-			toggleModal: jest.fn(),
-			handlePanel: jest.fn(),
+			toggleModal: vi.fn(),
+			handlePanel: vi.fn(),
 			secondary: true,
 			closeOnOutsideClick: false,
 		};
@@ -59,8 +59,8 @@ describe("FloatingPanel component rendering", () => {
 
 describe("FloatingPanel component events trigger", () => {
 	it("should trigger the handleOnClick", () => {
-		const handlePanelMock = jest.fn();
-		const toggleModalMock = jest.fn();
+		const handlePanelMock = vi.fn();
+		const toggleModalMock = vi.fn();
 		const defaultProps: IFloatingPanelProps = {
 			isOpen: true,
 			isOpenedSecond: false,
@@ -88,8 +88,8 @@ describe("FloatingPanel component events trigger", () => {
 	});
 
 	it("should trigger the handleClickOutside and trigger handlePanel", () => {
-		const handlePanelMock = jest.fn();
-		const toggleModalMock = jest.fn();
+		const handlePanelMock = vi.fn();
+		const toggleModalMock = vi.fn();
 		const defaultProps: IFloatingPanelProps = {
 			isOpen: true,
 			isOpenedSecond: false,
@@ -118,8 +118,8 @@ describe("FloatingPanel component events trigger", () => {
 	});
 
 	it("should trigger the handleClickOutside and not trigger handlePanel", () => {
-		const handlePanelMock = jest.fn();
-		const toggleModalMock = jest.fn();
+		const handlePanelMock = vi.fn();
+		const toggleModalMock = vi.fn();
 		const defaultProps: IFloatingPanelProps = {
 			isOpen: true,
 			isOpenedSecond: false,

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

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

package/src/__tests__/components/HeadingsPreviewModal/ErrorsBanner/ErrorItem/ErrorItem.test.tsx

@@ -19,9 +19,9 @@ const mockError: IHeadingError = {
 
 const defaultProps = {
 	error: mockError,
-	onSelectHeading: jest.fn(() => jest.fn()),
-	onDelete: jest.fn(),
-	onNavigateHeading: jest.fn(),
+	onSelectHeading: vi.fn(() => vi.fn()),
+	onDelete: vi.fn(),
+	onNavigateHeading: vi.fn(),
 	parentIsOpen: true,
 };
 
@@ -75,7 +75,7 @@ describe("ErrorItem component rendering", () => {
 
 describe("ErrorItem component events", () => {
 	it("should call onSelectHeading when the open button is clicked", () => {
-		const onSelectHeadingMock = jest.fn(() => jest.fn());
+		const onSelectHeadingMock = vi.fn(() => vi.fn());
 		renderComponent({ ...defaultProps, onSelectHeading: onSelectHeadingMock });
 
 		const buttons = screen.getAllByRole("button");
@@ -95,7 +95,7 @@ describe("ErrorItem component events", () => {
 	});
 
 	it("should call onSelectHeading with first heading ID when next button is clicked", () => {
-		const onSelectHeadingMock = jest.fn(() => jest.fn());
+		const onSelectHeadingMock = vi.fn(() => vi.fn());
 		renderComponent({ ...defaultProps, onSelectHeading: onSelectHeadingMock });
 
 		const buttons = screen.getAllByRole("button");
@@ -116,7 +116,7 @@ describe("ErrorItem component events", () => {
 	});
 
 	it("should call onSelectHeading with previous heading ID when prev button is clicked", () => {
-		const onSelectHeadingMock = jest.fn(() => jest.fn());
+		const onSelectHeadingMock = vi.fn(() => vi.fn());
 		renderComponent({ ...defaultProps, onSelectHeading: onSelectHeadingMock });
 
 		const buttons = screen.getAllByRole("button");
@@ -124,27 +124,27 @@ describe("ErrorItem component events", () => {
 		fireEvent.click(buttons[3]);
 		fireEvent.click(buttons[3]);
 
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 		fireEvent.click(buttons[2]);
 
 		expect(onSelectHeadingMock).toBeCalledWith(mockError.headingIds[0]);
 	});
 
 	it("should not navigate prev when already at the first heading", () => {
-		const onSelectHeadingMock = jest.fn(() => jest.fn());
+		const onSelectHeadingMock = vi.fn(() => vi.fn());
 		renderComponent({ ...defaultProps, onSelectHeading: onSelectHeadingMock });
 
 		const buttons = screen.getAllByRole("button");
 		// Open sets currentIndex to 0, then try to go prev
 		fireEvent.click(buttons[0]);
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 		fireEvent.click(buttons[2]);
 
 		expect(onSelectHeadingMock).not.toBeCalled();
 	});
 
 	it("should not navigate next when already at the last heading", () => {
-		const onSelectHeadingMock = jest.fn(() => jest.fn());
+		const onSelectHeadingMock = vi.fn(() => vi.fn());
 		renderComponent({ ...defaultProps, onSelectHeading: onSelectHeadingMock });
 
 		const buttons = screen.getAllByRole("button");
@@ -152,7 +152,7 @@ describe("ErrorItem component events", () => {
 		fireEvent.click(buttons[3]);
 		fireEvent.click(buttons[3]);
 		fireEvent.click(buttons[3]);
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 
 		// Fourth click should be a no-op
 		fireEvent.click(buttons[3]);

package/src/__tests__/components/HeadingsPreviewModal/ErrorsBanner/ErrorsBanner.test.tsx

@@ -19,9 +19,9 @@ const mockError: IHeadingError = {
 
 const defaultProps = {
 	errors: [mockError],
-	onSelectHeading: jest.fn(() => jest.fn()),
+	onSelectHeading: vi.fn(() => vi.fn()),
 	isOpen: false,
-	setIsOpen: jest.fn(),
+	setIsOpen: vi.fn(),
 	resetKey: 0,
 };
 
@@ -70,7 +70,7 @@ describe("ErrorsBanner component rendering", () => {
 
 describe("ErrorsBanner component events", () => {
 	it("should call setIsOpen with true when toggle is clicked and isOpen is false", () => {
-		const setIsOpenMock = jest.fn();
+		const setIsOpenMock = vi.fn();
 		renderComponent({ ...defaultProps, isOpen: false, setIsOpen: setIsOpenMock });
 
 		const buttons = screen.getAllByRole("button");
@@ -80,7 +80,7 @@ describe("ErrorsBanner component events", () => {
 	});
 
 	it("should call setIsOpen with false when toggle is clicked and isOpen is true", () => {
-		const setIsOpenMock = jest.fn();
+		const setIsOpenMock = vi.fn();
 		renderComponent({ ...defaultProps, isOpen: true, setIsOpen: setIsOpenMock });
 
 		const buttons = screen.getAllByRole("button");

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

@@ -1,3 +1,4 @@
+import type { Mock } from "vitest";
 import React from "react";
 
 import { ThemeProvider } from "styled-components";
@@ -10,9 +11,9 @@ import HeadingsPreviewModal from "@ax/components/HeadingsPreviewModal";
 import * as headingsUtils from "@ax/components/HeadingsPreviewModal/utils";
 import globalTheme from "@ax/themes/theme.json";
 
-jest.mock("@ax/components/HeadingsPreviewModal/utils", () => ({
-	...jest.requireActual("@ax/components/HeadingsPreviewModal/utils"),
-	parseHeadingsTree: jest.fn().mockReturnValue([]),
+vi.mock("@ax/components/HeadingsPreviewModal/utils", async () => ({
+	...(await vi.importActual("@ax/components/HeadingsPreviewModal/utils")),
+	parseHeadingsTree: vi.fn().mockReturnValue([]),
 }));
 
 afterEach(cleanup);
@@ -39,9 +40,9 @@ const browserRef = { current: document.createElement("div") } as React.RefObject
 const defaultProps = {
 	isOpen: false,
 	browserRef: { current: null } as React.RefObject<HTMLDivElement>,
-	toggleModal: jest.fn(),
+	toggleModal: vi.fn(),
 	headingsFilter: "all" as const,
-	setHeadingsFilter: jest.fn(),
+	setHeadingsFilter: vi.fn(),
 };
 
 const renderComponent = (props = defaultProps) =>
@@ -71,7 +72,7 @@ describe("HeadingsPreviewModal component rendering", () => {
 	});
 
 	it("should render heading items when open with headings", () => {
-		(headingsUtils.parseHeadingsTree as jest.Mock).mockReturnValueOnce(mockHeadings);
+		(headingsUtils.parseHeadingsTree as Mock).mockReturnValueOnce(mockHeadings);
 
 		renderComponent({ ...defaultProps, isOpen: true, browserRef });
 
@@ -84,7 +85,7 @@ describe("HeadingsPreviewModal component rendering", () => {
 	});
 
 	it("should render filter buttons when open with headings", () => {
-		(headingsUtils.parseHeadingsTree as jest.Mock).mockReturnValueOnce(mockHeadings);
+		(headingsUtils.parseHeadingsTree as Mock).mockReturnValueOnce(mockHeadings);
 
 		renderComponent({ ...defaultProps, isOpen: true, browserRef });
 
@@ -105,7 +106,7 @@ describe("HeadingsPreviewModal component rendering", () => {
 
 	it("should render the errors banner when there are SEO errors", () => {
 		const headingsWithoutH1: HeadingNode[] = [createHeadingNode("h2", "Subtitle", 2)];
-		(headingsUtils.parseHeadingsTree as jest.Mock).mockReturnValueOnce(headingsWithoutH1);
+		(headingsUtils.parseHeadingsTree as Mock).mockReturnValueOnce(headingsWithoutH1);
 
 		renderComponent({ ...defaultProps, isOpen: true, browserRef });
 
@@ -114,7 +115,7 @@ describe("HeadingsPreviewModal component rendering", () => {
 	});
 
 	it("should not render the errors banner when there are no SEO errors", () => {
-		(headingsUtils.parseHeadingsTree as jest.Mock).mockReturnValueOnce(mockHeadings);
+		(headingsUtils.parseHeadingsTree as Mock).mockReturnValueOnce(mockHeadings);
 
 		renderComponent({ ...defaultProps, isOpen: true, browserRef });
 
@@ -125,7 +126,7 @@ describe("HeadingsPreviewModal component rendering", () => {
 
 describe("HeadingsPreviewModal component events", () => {
 	it("should call toggleModal when close button is clicked", () => {
-		const toggleModalMock = jest.fn();
+		const toggleModalMock = vi.fn();
 
 		renderComponent({ ...defaultProps, isOpen: true, toggleModal: toggleModalMock });
 
@@ -135,8 +136,8 @@ describe("HeadingsPreviewModal component events", () => {
 	});
 
 	it("should call setHeadingsFilter when a filter button is clicked", () => {
-		const setHeadingsFilterMock = jest.fn();
-		(headingsUtils.parseHeadingsTree as jest.Mock).mockReturnValueOnce(mockHeadings);
+		const setHeadingsFilterMock = vi.fn();
+		(headingsUtils.parseHeadingsTree as Mock).mockReturnValueOnce(mockHeadings);
 
 		renderComponent({ ...defaultProps, isOpen: true, browserRef, setHeadingsFilter: setHeadingsFilterMock });
 
@@ -148,7 +149,7 @@ describe("HeadingsPreviewModal component events", () => {
 	});
 
 	it("should select a heading item when clicked", () => {
-		(headingsUtils.parseHeadingsTree as jest.Mock).mockReturnValueOnce(mockHeadings);
+		(headingsUtils.parseHeadingsTree as Mock).mockReturnValueOnce(mockHeadings);
 
 		renderComponent({ ...defaultProps, isOpen: true, browserRef });
 
@@ -162,7 +163,7 @@ describe("HeadingsPreviewModal component events", () => {
 	});
 
 	it("should deselect a heading item when clicked again", () => {
-		(headingsUtils.parseHeadingsTree as jest.Mock).mockReturnValueOnce(mockHeadings);
+		(headingsUtils.parseHeadingsTree as Mock).mockReturnValueOnce(mockHeadings);
 
 		renderComponent({ ...defaultProps, isOpen: true, browserRef });
 

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

@@ -47,7 +47,7 @@ describe("IconAction component rendering", () => {
 
 describe("onClick events", () => {
 	test("onClick been called if enabled", () => {
-		const onClickMock = jest.fn();
+		const onClickMock = vi.fn();
 		const defaultProps: IIconActionProps = {
 			icon: "delete",
 			size: "m",
@@ -68,7 +68,7 @@ describe("onClick events", () => {
 	});
 
 	test("onClick not to be called if disabled", () => {
-		const onClickMock = jest.fn();
+		const onClickMock = vi.fn();
 		const defaultProps: IIconActionProps = {
 			icon: "delete",
 			size: "m",

package/src/__tests__/components/ImageDragAndDrop/CropStep/CropStep.test.tsx

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

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

@@ -10,13 +10,13 @@ import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
 import { ThemeProvider } from "styled-components";
 
-jest.mock("@ax/containers/Gallery", () => ({
+vi.mock("@ax/containers/Gallery", () => ({
 	galleryActions: {
-		uploadError: jest.fn(() => ({ type: "UPLOAD_ERROR" })),
-		resetError: jest.fn(() => ({ type: "RESET_ERROR" })),
-		uploadImage: jest.fn(() => async () => null),
-		replaceImage: jest.fn(() => async () => null),
-		setUploadSuccess: jest.fn(() => ({ type: "SET_UPLOAD_SUCCESS" })),
+		uploadError: vi.fn(() => ({ type: "UPLOAD_ERROR" })),
+		resetError: vi.fn(() => ({ type: "RESET_ERROR" })),
+		uploadImage: vi.fn(() => async () => null),
+		replaceImage: vi.fn(() => async () => null),
+		setUploadSuccess: vi.fn(() => ({ type: "SET_UPLOAD_SUCCESS" })),
 	},
 }));
 
@@ -38,7 +38,7 @@ const renderImageDragAndDrop = (props = {}, storeData = initialStore) => {
 	return render(
 		<Provider store={store}>
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ImageDragAndDrop siteID="global" handleUpload={jest.fn()} {...props} />
+				<ImageDragAndDrop siteID="global" handleUpload={vi.fn()} {...props} />
 			</ThemeProvider>
 		</Provider>,
 	);