@griddo/ax 12.3.0-beta.0 → 12.4.0

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>,
 	);

package/src/__tests__/components/KeywordsPreviewModal/KeywordItem/KeywordItem.test.tsx

@@ -14,8 +14,8 @@ const defaultProps = {
 	keyword: "seo",
 	count: 3,
 	isSelected: false,
-	onClick: jest.fn(),
-	deleteKeyword: jest.fn(),
+	onClick: vi.fn(),
+	deleteKeyword: vi.fn(),
 };
 
 const renderComponent = (props = defaultProps) =>
@@ -49,7 +49,7 @@ describe("KeywordItem component rendering", () => {
 
 describe("KeywordItem component events", () => {
 	it("should call onClick when the keyword item is clicked", () => {
-		const onClickMock = jest.fn();
+		const onClickMock = vi.fn();
 		renderComponent({ ...defaultProps, onClick: onClickMock });
 
 		// The keyword item is a div with role="button"; the icon-action is a <button> inside it
@@ -61,7 +61,7 @@ describe("KeywordItem component events", () => {
 	});
 
 	it("should call deleteKeyword directly when count is zero and delete is clicked", () => {
-		const deleteKeywordMock = jest.fn();
+		const deleteKeywordMock = vi.fn();
 		renderComponent({ ...defaultProps, count: 0, deleteKeyword: deleteKeywordMock });
 
 		const deleteButton = screen.getByTestId("icon-action-component");
@@ -81,7 +81,7 @@ describe("KeywordItem component events", () => {
 	});
 
 	it("should not call onClick when delete button is clicked (stopPropagation)", () => {
-		const onClickMock = jest.fn();
+		const onClickMock = vi.fn();
 		renderComponent({ ...defaultProps, count: 0, onClick: onClickMock });
 
 		const deleteButton = screen.getByTestId("icon-action-component");

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

@@ -1,3 +1,4 @@
+import type { Mock } from "vitest";
 import React from "react";
 
 import { ThemeProvider } from "styled-components";
@@ -9,9 +10,9 @@ import KeywordsPreviewModal from "@ax/components/KeywordsPreviewModal";
 import * as keywordsUtils from "@ax/components/KeywordsPreviewModal/utils";
 import globalTheme from "@ax/themes/theme.json";
 
-jest.mock("@ax/components/KeywordsPreviewModal/utils", () => ({
-	...jest.requireActual("@ax/components/KeywordsPreviewModal/utils"),
-	countKeywords: jest.fn().mockReturnValue({}),
+vi.mock("@ax/components/KeywordsPreviewModal/utils", async () => ({
+	...(await vi.importActual("@ax/components/KeywordsPreviewModal/utils")),
+	countKeywords: vi.fn().mockReturnValue({}),
 }));
 
 afterEach(cleanup);
@@ -21,12 +22,12 @@ 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(),
 	keywords: ["seo", "react"],
 	keywordsFilter: [] as string[],
-	setKeywordsFilter: jest.fn(),
-	addKeywords: jest.fn(),
-	deleteKeyword: jest.fn(),
+	setKeywordsFilter: vi.fn(),
+	addKeywords: vi.fn(),
+	deleteKeyword: vi.fn(),
 };
 
 const renderComponent = (props = defaultProps) =>
@@ -51,7 +52,7 @@ describe("KeywordsPreviewModal component rendering", () => {
 	});
 
 	it("should render keyword items when open with keywords", () => {
-		(keywordsUtils.countKeywords as jest.Mock).mockReturnValueOnce({ seo: 3, react: 1 });
+		(keywordsUtils.countKeywords as Mock).mockReturnValueOnce({ seo: 3, react: 1 });
 
 		renderComponent({ ...defaultProps, isOpen: true, browserRef });
 
@@ -60,7 +61,7 @@ describe("KeywordsPreviewModal component rendering", () => {
 	});
 
 	it("should render keyword count for each keyword item", () => {
-		(keywordsUtils.countKeywords as jest.Mock).mockReturnValueOnce({ seo: 3 });
+		(keywordsUtils.countKeywords as Mock).mockReturnValueOnce({ seo: 3 });
 
 		renderComponent({ ...defaultProps, isOpen: true, browserRef });
 
@@ -84,7 +85,7 @@ describe("KeywordsPreviewModal component rendering", () => {
 
 describe("KeywordsPreviewModal 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 });
 
@@ -94,7 +95,7 @@ describe("KeywordsPreviewModal component events", () => {
 	});
 
 	it("should call setKeywordsFilter with empty array when filter tag is deleted", () => {
-		const setKeywordsFilterMock = jest.fn();
+		const setKeywordsFilterMock = vi.fn();
 
 		renderComponent({
 			...defaultProps,
@@ -109,8 +110,8 @@ describe("KeywordsPreviewModal component events", () => {
 	});
 
 	it("should call setKeywordsFilter with the clicked keyword when a keyword item is clicked", () => {
-		const setKeywordsFilterMock = jest.fn();
-		(keywordsUtils.countKeywords as jest.Mock).mockReturnValueOnce({ seo: 3 });
+		const setKeywordsFilterMock = vi.fn();
+		(keywordsUtils.countKeywords as Mock).mockReturnValueOnce({ seo: 3 });
 
 		renderComponent({ ...defaultProps, isOpen: true, browserRef, setKeywordsFilter: setKeywordsFilterMock });
 

package/src/__tests__/components/KeywordsPreviewModal/atoms.test.tsx

@@ -15,25 +15,25 @@ const renderWithTheme = (ui: React.ReactElement) =>
 
 describe("AddKeywordsModal component rendering", () => {
 	it("should render the modal when isOpen is true", () => {
-		renderWithTheme(<AddKeywordsModal isOpen={true} toggleModal={jest.fn()} addNewKeyword={jest.fn()} />);
+		renderWithTheme(<AddKeywordsModal isOpen={true} toggleModal={vi.fn()} addNewKeyword={vi.fn()} />);
 
 		expect(screen.getByTestId("modal-wrapper")).toBeTruthy();
 	});
 
 	it("should not render the modal when isOpen is false", () => {
-		renderWithTheme(<AddKeywordsModal isOpen={false} toggleModal={jest.fn()} addNewKeyword={jest.fn()} />);
+		renderWithTheme(<AddKeywordsModal isOpen={false} toggleModal={vi.fn()} addNewKeyword={vi.fn()} />);
 
 		expect(screen.queryByTestId("modal-wrapper")).toBeNull();
 	});
 
 	it("should render the New keyword title", () => {
-		renderWithTheme(<AddKeywordsModal isOpen={true} toggleModal={jest.fn()} addNewKeyword={jest.fn()} />);
+		renderWithTheme(<AddKeywordsModal isOpen={true} toggleModal={vi.fn()} addNewKeyword={vi.fn()} />);
 
 		expect(screen.getByText("New keyword")).toBeTruthy();
 	});
 
 	it("should render the Create keyword button disabled when no keywords are entered", () => {
-		renderWithTheme(<AddKeywordsModal isOpen={true} toggleModal={jest.fn()} addNewKeyword={jest.fn()} />);
+		renderWithTheme(<AddKeywordsModal isOpen={true} toggleModal={vi.fn()} addNewKeyword={vi.fn()} />);
 
 		const createButton = screen.getByText("Create keyword").closest("button");
 		expect(createButton).toBeDisabled();
@@ -42,9 +42,9 @@ describe("AddKeywordsModal component rendering", () => {
 
 describe("AddKeywordsModal component events", () => {
 	it("should call toggleModal when Cancel button is clicked", () => {
-		const toggleModalMock = jest.fn();
+		const toggleModalMock = vi.fn();
 
-		renderWithTheme(<AddKeywordsModal isOpen={true} toggleModal={toggleModalMock} addNewKeyword={jest.fn()} />);
+		renderWithTheme(<AddKeywordsModal isOpen={true} toggleModal={toggleModalMock} addNewKeyword={vi.fn()} />);
 
 		const cancelButton = screen.getByText("Cancel").closest("button");
 		expect(cancelButton).toBeTruthy();
@@ -55,19 +55,19 @@ describe("AddKeywordsModal component events", () => {
 
 describe("DeleteKeywordsModal component rendering", () => {
 	it("should render the modal when isOpen is true", () => {
-		renderWithTheme(<DeleteKeywordsModal isOpen={true} toggleModal={jest.fn()} deleteKeyword={jest.fn()} />);
+		renderWithTheme(<DeleteKeywordsModal isOpen={true} toggleModal={vi.fn()} deleteKeyword={vi.fn()} />);
 
 		expect(screen.getByTestId("modal-wrapper")).toBeTruthy();
 	});
 
 	it("should not render the modal when isOpen is false", () => {
-		renderWithTheme(<DeleteKeywordsModal isOpen={false} toggleModal={jest.fn()} deleteKeyword={jest.fn()} />);
+		renderWithTheme(<DeleteKeywordsModal isOpen={false} toggleModal={vi.fn()} deleteKeyword={vi.fn()} />);
 
 		expect(screen.queryByTestId("modal-wrapper")).toBeNull();
 	});
 
 	it("should render the Delete keyword title", () => {
-		renderWithTheme(<DeleteKeywordsModal isOpen={true} toggleModal={jest.fn()} deleteKeyword={jest.fn()} />);
+		renderWithTheme(<DeleteKeywordsModal isOpen={true} toggleModal={vi.fn()} deleteKeyword={vi.fn()} />);
 
 		expect(screen.getAllByText("Delete keyword").length).toBeGreaterThan(0);
 	});
@@ -75,9 +75,9 @@ describe("DeleteKeywordsModal component rendering", () => {
 
 describe("DeleteKeywordsModal component events", () => {
 	it("should call deleteKeyword when Delete keyword button is clicked", () => {
-		const deleteKeywordMock = jest.fn();
+		const deleteKeywordMock = vi.fn();
 
-		renderWithTheme(<DeleteKeywordsModal isOpen={true} toggleModal={jest.fn()} deleteKeyword={deleteKeywordMock} />);
+		renderWithTheme(<DeleteKeywordsModal isOpen={true} toggleModal={vi.fn()} deleteKeyword={deleteKeywordMock} />);
 
 		const deleteButton = screen
 			.getAllByText("Delete keyword")
@@ -89,9 +89,9 @@ describe("DeleteKeywordsModal component events", () => {
 	});
 
 	it("should call toggleModal when Cancel button is clicked", () => {
-		const toggleModalMock = jest.fn();
+		const toggleModalMock = vi.fn();
 
-		renderWithTheme(<DeleteKeywordsModal isOpen={true} toggleModal={toggleModalMock} deleteKeyword={jest.fn()} />);
+		renderWithTheme(<DeleteKeywordsModal isOpen={true} toggleModal={toggleModalMock} deleteKeyword={vi.fn()} />);
 
 		const cancelButton = screen.getByText("Cancel").closest("button");
 		expect(cancelButton).toBeTruthy();

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

@@ -46,7 +46,7 @@ const defaultProps = {
 
 describe("LanguageMenu component rendering", () => {
 	it("should render the component", () => {
-		const setLanguage = jest.fn();
+		const setLanguage = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -65,7 +65,7 @@ describe("LanguageMenu component rendering", () => {
 	});
 
 	it("should render the component without props", () => {
-		const setLanguage = jest.fn();
+		const setLanguage = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -81,7 +81,7 @@ describe("LanguageMenu component rendering", () => {
 	});
 
 	it("should render the component with only one language", () => {
-		const setLanguage = jest.fn();
+		const setLanguage = vi.fn();
 
 		const props = {
 			language: "en_GB",
@@ -118,7 +118,7 @@ describe("LanguageMenu component rendering", () => {
 	});
 
 	it("should render the component showing new version language", () => {
-		const setLanguage = jest.fn();
+		const setLanguage = vi.fn();
 
 		const props = {
 			language: "en_GB",
@@ -153,7 +153,7 @@ describe("LanguageMenu component rendering", () => {
 });
 
 it("should render the component showing an editable language", () => {
-	const setLanguage = jest.fn();
+	const setLanguage = vi.fn();
 
 	const props = {
 		language: "en_GB",
@@ -205,7 +205,7 @@ it("should render the component showing an editable language", () => {
 
 describe("LanguageMenu component events", () => {
 	it("should call setLanguage on clicking the second language in the list", () => {
-		const setLanguage = jest.fn();
+		const setLanguage = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>

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

@@ -9,7 +9,7 @@ import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);
 
-const onClickMock = jest.fn();
+const onClickMock = vi.fn();
 
 const defaultProps: ListItemProps = {
 	children: false,

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import { ThemeProvider } from "styled-components";
 import { render, cleanup, screen } 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 Loader, { IStateProps } from "@ax/components/Loader";