@griddo/ax 12.3.0 → 12.4.0

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";

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

@@ -24,15 +24,15 @@ const settings = {
 describe("Login component rendering", () => {
 	it("should render the component", () => {
 		const defaultProps: ILoginProps = {
-			handleSubmit: jest.fn(),
+			handleSubmit: vi.fn(),
 			email: "hola@secuoyas.com",
-			handleEmail: jest.fn(),
+			handleEmail: vi.fn(),
 			password: "password",
-			handlePassword: jest.fn(),
+			handlePassword: vi.fn(),
 			isLoggingIn: false,
 			settings,
 			rememberMe: false,
-			handleRememberMe: jest.fn(),
+			handleRememberMe: vi.fn(),
 		};
 
 		render(
@@ -48,17 +48,17 @@ describe("Login component rendering", () => {
 	});
 
 	it("should render the component with log button disabled", () => {
-		const handleSubmitMock = jest.fn();
+		const handleSubmitMock = vi.fn();
 		const defaultProps: ILoginProps = {
 			handleSubmit: handleSubmitMock,
 			email: "hola@secuoyas.com",
-			handleEmail: jest.fn(),
+			handleEmail: vi.fn(),
 			password: "password",
-			handlePassword: jest.fn(),
+			handlePassword: vi.fn(),
 			isLoggingIn: true,
 			settings,
 			rememberMe: false,
-			handleRememberMe: jest.fn(),
+			handleRememberMe: vi.fn(),
 		};
 
 		render(
@@ -78,17 +78,17 @@ describe("Login component rendering", () => {
 
 describe("Login component events", () => {
 	it("should call submit function on button click", () => {
-		const handleSubmitMock = jest.fn((e) => e.preventDefault());
+		const handleSubmitMock = vi.fn((e) => e.preventDefault());
 		const defaultProps: ILoginProps = {
 			handleSubmit: handleSubmitMock,
 			email: "hola@secuoyas.com",
-			handleEmail: jest.fn(),
+			handleEmail: vi.fn(),
 			password: "password",
-			handlePassword: jest.fn(),
+			handlePassword: vi.fn(),
 			isLoggingIn: false,
 			settings,
 			rememberMe: false,
-			handleRememberMe: jest.fn(),
+			handleRememberMe: vi.fn(),
 		};
 
 		render(
@@ -104,17 +104,17 @@ describe("Login component events", () => {
 	});
 
 	it("should call handleEmail function on email change", () => {
-		const handleEmailMock = jest.fn();
+		const handleEmailMock = vi.fn();
 		const defaultProps: ILoginProps = {
-			handleSubmit: jest.fn((e) => e.preventDefault()),
+			handleSubmit: vi.fn((e) => e.preventDefault()),
 			email: "hola@secuoyas.com",
 			handleEmail: handleEmailMock,
 			password: "password",
-			handlePassword: jest.fn(),
+			handlePassword: vi.fn(),
 			isLoggingIn: false,
 			settings,
 			rememberMe: false,
-			handleRememberMe: jest.fn(),
+			handleRememberMe: vi.fn(),
 		};
 
 		render(
@@ -130,17 +130,17 @@ describe("Login component events", () => {
 	});
 
 	it("should call handlePassword function on password change", () => {
-		const handlePasswordMock = jest.fn();
+		const handlePasswordMock = vi.fn();
 		const defaultProps: ILoginProps = {
-			handleSubmit: jest.fn((e) => e.preventDefault()),
+			handleSubmit: vi.fn((e) => e.preventDefault()),
 			email: "hola@secuoyas.com",
-			handleEmail: jest.fn(),
+			handleEmail: vi.fn(),
 			password: "password",
 			handlePassword: handlePasswordMock,
 			isLoggingIn: false,
 			settings,
 			rememberMe: false,
-			handleRememberMe: jest.fn(),
+			handleRememberMe: vi.fn(),
 		};
 
 		render(
@@ -156,13 +156,13 @@ describe("Login component events", () => {
 	});
 
 	it("should call handleRememberMe function on input click", () => {
-		const handleRememberMeMock = jest.fn();
+		const handleRememberMeMock = vi.fn();
 		const defaultProps: ILoginProps = {
-			handleSubmit: jest.fn((e) => e.preventDefault()),
+			handleSubmit: vi.fn((e) => e.preventDefault()),
 			email: "hola@secuoyas.com",
-			handleEmail: jest.fn(),
+			handleEmail: vi.fn(),
 			password: "password",
-			handlePassword: jest.fn(),
+			handlePassword: vi.fn(),
 			isLoggingIn: false,
 			settings,
 			rememberMe: false,
@@ -183,15 +183,15 @@ describe("Login component events", () => {
 
 	it("should change input type on button click", () => {
 		const defaultProps: ILoginProps = {
-			handleSubmit: jest.fn((e) => e.preventDefault()),
+			handleSubmit: vi.fn((e) => e.preventDefault()),
 			email: "hola@secuoyas.com",
-			handleEmail: jest.fn(),
+			handleEmail: vi.fn(),
 			password: "",
-			handlePassword: jest.fn(),
+			handlePassword: vi.fn(),
 			isLoggingIn: false,
 			settings,
 			rememberMe: false,
-			handleRememberMe: jest.fn(),
+			handleRememberMe: vi.fn(),
 		};
 
 		render(
@@ -215,15 +215,15 @@ describe("Login component events", () => {
 describe("Recovery Modal rendering", () => {
 	it("should render the recovery modal on button click", () => {
 		const defaultProps: ILoginProps = {
-			handleSubmit: jest.fn(),
+			handleSubmit: vi.fn(),
 			email: "",
-			handleEmail: jest.fn(),
+			handleEmail: vi.fn(),
 			password: "",
-			handlePassword: jest.fn(),
+			handlePassword: vi.fn(),
 			isLoggingIn: false,
 			settings,
 			rememberMe: false,
-			handleRememberMe: jest.fn(),
+			handleRememberMe: vi.fn(),
 		};
 
 		render(

package/src/__tests__/components/Login/RecoveryModal/RecoveryModal.test.tsx

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 import Axios from "axios";
 import { ThemeProvider } from "styled-components";
@@ -10,14 +11,14 @@ import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);
 
-jest.mock("axios"); // This overwrites axios methods with jest Mock
-const mockedAxios = Axios as jest.MockedFunction<typeof Axios>;
+vi.mock("axios"); // This overwrites axios methods with jest Mock
+const mockedAxios = Axios as MockedFunction<typeof Axios>;
 
 describe("Recovery modal component rendering", () => {
 	it("should render the component if closed", () => {
 		const defaultProps: IRecoveryProps = {
 			isOpen: true,
-			toggleModal: jest.fn(),
+			toggleModal: vi.fn(),
 		};
 
 		render(
@@ -33,7 +34,7 @@ describe("Recovery modal component rendering", () => {
 	it("should not render the component content if closed", () => {
 		const defaultProps: IRecoveryProps = {
 			isOpen: false,
-			toggleModal: jest.fn(),
+			toggleModal: vi.fn(),
 		};
 
 		render(
@@ -49,7 +50,7 @@ describe("Recovery modal component rendering", () => {
 
 describe("Login component events", () => {
 	it("should call toggleModal on cancel button click", () => {
-		const toggleModalMock = jest.fn();
+		const toggleModalMock = vi.fn();
 		const defaultProps: IRecoveryProps = {
 			isOpen: true,
 			toggleModal: toggleModalMock,
@@ -69,7 +70,7 @@ describe("Login component events", () => {
 	});
 
 	it("should disable button if email is not valid", () => {
-		const toggleModalMock = jest.fn();
+		const toggleModalMock = vi.fn();
 		const defaultProps: IRecoveryProps = {
 			isOpen: true,
 			toggleModal: toggleModalMock,
@@ -91,7 +92,7 @@ describe("Login component events", () => {
 	});
 
 	it("should enable button if email is valid", async () => {
-		const toggleModalMock = jest.fn();
+		const toggleModalMock = vi.fn();
 		const defaultProps: IRecoveryProps = {
 			isOpen: true,
 			toggleModal: toggleModalMock,
@@ -117,7 +118,7 @@ describe("Login component events", () => {
 	it("should hide input if api response is ok", async () => {
 		const defaultProps: IRecoveryProps = {
 			isOpen: true,
-			toggleModal: jest.fn(),
+			toggleModal: vi.fn(),
 		};
 
 		const data = { data: [], status: 200, statusText: "Ok", headers: {}, config: {} };
@@ -153,7 +154,7 @@ describe("Login component events", () => {
 	it("should show error if api response is not ok", async () => {
 		const defaultProps: IRecoveryProps = {
 			isOpen: true,
-			toggleModal: jest.fn(),
+			toggleModal: vi.fn(),
 		};
 
 		const data = { data: [], status: 400, statusText: "error", headers: {}, config: {} };

package/src/__tests__/components/MainWrapper/AppBar/AppBar.test.tsx

@@ -162,7 +162,7 @@ describe("AppBar component rendering", () => {
 				{ name: "tab2", text: "Tab 2" },
 			],
 			selectedTab: "tab1",
-			action: jest.fn(),
+			action: vi.fn(),
 		};
 
 		const defaultProps: IAppBarProps = {
@@ -185,7 +185,7 @@ describe("AppBar component rendering", () => {
 		const tabs = {
 			tabSet: ["Tab 1", "Tab 2"],
 			selectedTab: "Tab 1",
-			action: jest.fn(),
+			action: vi.fn(),
 		};
 
 		const defaultProps: IAppBarProps = {
@@ -207,7 +207,7 @@ describe("AppBar component rendering", () => {
 	it("should render the search field", () => {
 		const defaultProps: IAppBarProps = {
 			title: "the title",
-			searchAction: jest.fn(),
+			searchAction: vi.fn(),
 		};
 
 		render(
@@ -262,12 +262,12 @@ describe("AppBar component rendering", () => {
 				{
 					icon: "icon",
 					label: "Action 1",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 				{
 					icon: "icon2",
 					label: "Action 2",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 			],
 		};
@@ -330,7 +330,7 @@ describe("AppBar component rendering", () => {
 			title: "the title",
 			rightLineButton: {
 				label,
-				action: jest.fn(),
+				action: vi.fn(),
 			},
 		};
 
@@ -351,7 +351,7 @@ describe("AppBar component rendering", () => {
 			title: "the title",
 			rightButton: {
 				label,
-				action: jest.fn(),
+				action: vi.fn(),
 			},
 		};
 
@@ -375,15 +375,15 @@ describe("AppBar component rendering", () => {
 					{
 						icon: "icon",
 						label: "Action 1",
-						action: jest.fn(),
+						action: vi.fn(),
 					},
 					{
 						icon: "icon2",
 						label: "Action 2",
-						action: jest.fn(),
+						action: vi.fn(),
 					},
 				],
-				button: { label: "the menu button", action: jest.fn() },
+				button: { label: "the menu button", action: vi.fn() },
 			},
 		};
 
@@ -409,15 +409,15 @@ describe("AppBar component events", () => {
 					{
 						icon: "icon",
 						label: "Action 1",
-						action: jest.fn(),
+						action: vi.fn(),
 					},
 					{
 						icon: "icon2",
 						label: "Action 2",
-						action: jest.fn(),
+						action: vi.fn(),
 					},
 				],
-				button: { label: "the menu button", action: jest.fn() },
+				button: { label: "the menu button", action: vi.fn() },
 			},
 			language: { locale: "en_GB", id: 4 },
 			availableLanguages: [
@@ -443,9 +443,9 @@ describe("AppBar component events", () => {
 				},
 			],
 			languageActions: {
-				createNewTranslation: jest.fn(),
-				getSiteContent: jest.fn(),
-				setLanguage: jest.fn(),
+				createNewTranslation: vi.fn(),
+				getSiteContent: vi.fn(),
+				setLanguage: vi.fn(),
 			},
 		};
 
@@ -478,27 +478,27 @@ describe("AppBar component events", () => {
 					{
 						icon: "icon",
 						label: "Action 1",
-						action: jest.fn(),
+						action: vi.fn(),
 					},
 					{
 						icon: "icon2",
 						label: "Action 2",
-						action: jest.fn(),
+						action: vi.fn(),
 					},
 				],
-				button: { label: "the menu button", action: jest.fn() },
+				button: { label: "the menu button", action: vi.fn() },
 			},
 			pageStatus: "active",
 			pageStatusActions: [
 				{
 					icon: "icon",
 					label: "Action 1",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 				{
 					icon: "icon2",
 					label: "Action 2",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 			],
 		};