@griddo/ax 12.3.0 → 12.4.0

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

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import type React from "react";
 
 import type { IAsyncCheckGroup } from "@ax/components/Fields/AsyncCheckGroup";
@@ -8,13 +9,13 @@ import type { ILanguage, ISite } from "@ax/types";
 
 import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
 import axios from "axios";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { ThemeProvider } from "styled-components";
 
 afterEach(cleanup);
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 
 const buildOkResponse = (data: any[]) => ({
 	data,
@@ -51,7 +52,7 @@ const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0));
 
 describe("AsyncCheckGroup component rendering", () => {
 	afterEach(() => {
-		jest.resetAllMocks();
+		vi.resetAllMocks();
 	});
 
 	it("should render the component with 6 options", async () => {
@@ -61,7 +62,7 @@ describe("AsyncCheckGroup component rendering", () => {
 		const defaultDataProps: IAsyncCheckGroup = {
 			site: defaultSite,
 			value: [{ value: 3622, name: "Home", title: "Home" }],
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			source: "NEWS",
 			contentType: "data",
 		};
@@ -78,7 +79,7 @@ describe("AsyncCheckGroup component rendering", () => {
 	it("should render the component with no options", async () => {
 		const defaultProps: IAsyncCheckGroup = {
 			value: [],
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			source: "NEWS",
 			contentType: "data",
 		};
@@ -101,7 +102,7 @@ describe("AsyncCheckGroup component rendering", () => {
 
 describe("AsyncCheckGroup - infinite render loop prevention", () => {
 	afterEach(() => {
-		jest.resetAllMocks();
+		vi.resetAllMocks();
 	});
 
 	it("should call the API only once across rerenders with unstable onChange and value references", async () => {
@@ -118,12 +119,12 @@ describe("AsyncCheckGroup - infinite render loop prevention", () => {
 
 		let rerender: (ui: React.ReactElement) => void = () => undefined;
 		await act(async () => {
-			({ rerender } = renderWithTheme({ ...baseProps, value: [], onChange: jest.fn() }));
+			({ rerender } = renderWithTheme({ ...baseProps, value: [], onChange: vi.fn() }));
 		});
 
 		for (let i = 0; i < 5; i++) {
 			await act(async () => {
-				rerenderWithTheme(rerender, { ...baseProps, value: [], onChange: jest.fn() });
+				rerenderWithTheme(rerender, { ...baseProps, value: [], onChange: vi.fn() });
 				await flushPromises();
 			});
 		}
@@ -134,7 +135,7 @@ describe("AsyncCheckGroup - infinite render loop prevention", () => {
 
 describe("AsyncCheckGroup - refetch behavior on API-relevant prop changes", () => {
 	afterEach(() => {
-		jest.resetAllMocks();
+		vi.resetAllMocks();
 	});
 
 	it("should refetch when source changes", async () => {
@@ -146,7 +147,7 @@ describe("AsyncCheckGroup - refetch behavior on API-relevant prop changes", () =
 		const baseProps = {
 			site,
 			value: [],
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			contentType: "data" as const,
 		};
 
@@ -175,7 +176,7 @@ describe("AsyncCheckGroup - refetch behavior on API-relevant prop changes", () =
 
 		const baseProps = {
 			value: [],
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			source: "NEWS",
 			contentType: "data" as const,
 		};
@@ -206,7 +207,7 @@ describe("AsyncCheckGroup - refetch behavior on API-relevant prop changes", () =
 		const baseProps = {
 			site,
 			value: [],
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			source: "NEWS",
 			contentType: "data" as const,
 			languages,
@@ -236,7 +237,7 @@ describe("AsyncCheckGroup - refetch behavior on API-relevant prop changes", () =
 		const baseProps = {
 			site,
 			value: [],
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			source: "NEWS",
 			contentType: "data" as const,
 		};
@@ -259,14 +260,14 @@ describe("AsyncCheckGroup - refetch behavior on API-relevant prop changes", () =
 
 describe("AsyncCheckGroup - user interaction", () => {
 	afterEach(() => {
-		jest.resetAllMocks();
+		vi.resetAllMocks();
 	});
 
 	it("should call onChange when a checkbox is toggled", async () => {
 		const site = mock<ISite>();
 		site.id = 1;
 
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		const props: IAsyncCheckGroup = {
 			site,
 			value: [],
@@ -293,8 +294,8 @@ describe("AsyncCheckGroup - user interaction", () => {
 		const site = mock<ISite>();
 		site.id = 1;
 
-		const firstOnChange = jest.fn();
-		const secondOnChange = jest.fn();
+		const firstOnChange = vi.fn();
+		const secondOnChange = vi.fn();
 
 		const baseProps = {
 			site,

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

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import React from "react";
 import axios from "axios";
 import "@testing-library/jest-dom";
@@ -7,7 +8,7 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup, act } from "@testing-library/react";
 import { ISite } from "@ax/types";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 
@@ -16,8 +17,8 @@ const defaultProps = mock<IAsyncSelectProps>();
 const defaultSite = mock<ISite>();
 defaultSite.id = 113;
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 
 describe("AsyncSelect component rendering", () => {
 	test("should render the component AsyncSelect", async () => {

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

@@ -1,5 +1,6 @@
+import type { MockedFunction } from "vitest";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { ThemeProvider } from "styled-components";
 import "@testing-library/jest-dom";
 
@@ -86,7 +87,7 @@ describe("Button component rendering", () => {
 	it("should trigger the onClick action", () => {
 		const props = createDefaultProps();
 		props.buttonStyle = "lineInverse";
-		const handleOnClickMock = props.onClick as jest.MockedFunction<(e: React.MouseEvent<HTMLButtonElement>) => void>;
+		const handleOnClickMock = props.onClick as MockedFunction<(e: React.MouseEvent<HTMLButtonElement>) => void>;
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
 				<Button {...props} />
@@ -103,7 +104,7 @@ describe("Button component rendering", () => {
 		const props = createDefaultProps();
 		props.buttonStyle = "lineInverse";
 		props.disabled = true;
-		const handleOnClickMock = props.onClick as jest.MockedFunction<(e: React.MouseEvent<HTMLButtonElement>) => void>;
+		const handleOnClickMock = props.onClick as MockedFunction<(e: React.MouseEvent<HTMLButtonElement>) => void>;
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
 				<Button {...props} />

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

@@ -18,7 +18,7 @@ const defaultProps = {
 	error: false,
 	disabled: false,
 	indeterminate: false,
-	onChange: jest.fn(),
+	onChange: vi.fn(),
 	icon: "",
 };
 
@@ -48,7 +48,7 @@ describe("CheckField component rendering", () => {
 			error: false,
 			disabled: false,
 			indeterminate: false,
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			icon: "",
 		};
 
@@ -77,7 +77,7 @@ describe("CheckField component rendering", () => {
 			error: false,
 			disabled: false,
 			indeterminate: true,
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			icon: "",
 		};
 
@@ -108,7 +108,7 @@ describe("CheckField component rendering", () => {
 			error: false,
 			disabled: false,
 			indeterminate: false,
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			icon: "icon",
 		};
 
@@ -126,7 +126,7 @@ describe("CheckField component rendering", () => {
 
 describe("CheckField events", () => {
 	it("should call the onchange", () => {
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		const props = {
 			name: "name",

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

@@ -15,7 +15,7 @@ afterEach(cleanup);
 const defaultProps = {
 	value: "",
 	options: [],
-	onChange: jest.fn(),
+	onChange: vi.fn(),
 };
 
 const user = userEvent.setup();
@@ -45,7 +45,7 @@ describe("CheckField component rendering", () => {
 		const props = {
 			value: "",
 			options: checkFieldOptions,
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 		};
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -71,7 +71,7 @@ describe("CheckField component rendering", () => {
 		const props = {
 			value: undefined,
 			options: checkFieldOptions,
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 		};
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -97,7 +97,7 @@ describe("CheckField component rendering", () => {
 		const props = {
 			value: null,
 			options: checkFieldOptions,
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 		};
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -122,7 +122,7 @@ describe("CheckField events", () => {
 				value: 2,
 			},
 		];
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		const props = {
 			value: "",
@@ -157,7 +157,7 @@ describe("CheckField events", () => {
 				value: 2,
 			},
 		];
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		const props = {
 			value: "",
@@ -194,7 +194,7 @@ describe("CheckField events", () => {
 				value: 3,
 			},
 		];
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		const props = {
 			value: [],
@@ -237,7 +237,7 @@ describe("CheckField events", () => {
 				value: 4,
 			},
 		];
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		const props = {
 			value: [],
@@ -284,7 +284,7 @@ describe("CheckField events", () => {
 				value: 4,
 			},
 		];
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		const props = {
 			value: [],
@@ -331,7 +331,7 @@ describe("CheckField events", () => {
 				value: 4,
 			},
 		];
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		const props = {
 			value: ["novalid"],

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

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import React from "react";
 import "@testing-library/jest-dom";
 import ColorPicker, { IProps } from "@ax/components/Fields/ColorPicker";
@@ -5,7 +6,7 @@ import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 
@@ -46,7 +47,7 @@ describe("ColorPicker events", () => {
 		defaultProps.theme = parseTheme(globalTheme);
 		defaultProps.colors = ["#000000", "#d9e3f0", "#f47373", "#697689"];
 		defaultProps.isThemePalette = false;
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(newColor: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(newColor: string) => void>;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -66,7 +67,7 @@ describe("ColorPicker events", () => {
 	test("should trigger the onChange", () => {
 		defaultProps.value = "#000000";
 		defaultProps.theme = parseTheme(globalTheme);
-		const handleValidationMock = defaultProps.handleValidation as jest.MockedFunction<
+		const handleValidationMock = defaultProps.handleValidation as MockedFunction<
 			(value: string, validators: Record<string, unknown>) => void
 		>;
 		defaultProps.error = true;
@@ -85,7 +86,7 @@ describe("ColorPicker events", () => {
 		defaultProps.value = "#000000";
 		defaultProps.theme = parseTheme(globalTheme);
 		defaultProps.error = true;
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(newColor: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(newColor: string) => void>;
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
 				<ColorPicker {...defaultProps} />
@@ -106,7 +107,7 @@ describe("ColorPicker events", () => {
 		defaultProps.theme = parseTheme(globalTheme);
 		defaultProps.error = true;
 		defaultProps.colors = ["#fff", "#000"];
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(newColor: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(newColor: string) => void>;
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
 				<ColorPicker {...defaultProps} />
@@ -171,7 +172,7 @@ describe("ColorPicker events", () => {
 	test("should trigger the handleOnBlur", async () => {
 		defaultProps.value = "#000000";
 		defaultProps.theme = parseTheme(globalTheme);
-		const handleValidationMock = defaultProps.handleValidation as jest.MockedFunction<
+		const handleValidationMock = defaultProps.handleValidation as MockedFunction<
 			(value: string, validators: Record<string, unknown>) => void
 		>;
 

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

@@ -7,7 +7,7 @@ import { IModule } from "@ax/types";
 import { ISameComponentArrayProps } from "@ax/components/Fields/ComponentArray/SameComponentArray";
 import { IMixableComponentArrayProps } from "@ax/components/Fields/ComponentArray/MixableComponentArray";
 import { render, screen, cleanup } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 
@@ -148,8 +148,8 @@ describe("ComponentArraySelector component rendering", () => {
 		sameProps.disabled = false;
 		sameProps.maxItems = 10;
 		sameProps.actions = {
-			addModuleAction: jest.fn(),
-			addComponentAction: jest.fn(),
+			addModuleAction: vi.fn(),
+			addComponentAction: vi.fn(),
 		};
 
 		render(

package/src/__tests__/components/Fields/ComponentArray/MixableComponentArray/MixableComponentArray.test.tsx

@@ -7,7 +7,7 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { IModule } from "@ax/types";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 
@@ -64,16 +64,16 @@ describe("ComponentArraySelector component rendering", () => {
 		mixableProps.disabled = false;
 		mixableProps.maxItems = 10;
 		mixableProps.actions = {
-			addModuleAction: jest.fn(),
-			addComponentAction: jest.fn(),
-			deleteModuleAction: jest.fn(),
-			replaceElementsInCollectionAction: jest.fn(),
-			duplicateModuleAction: jest.fn(),
-			copyModuleAction: jest.fn(),
-			moveModuleAction: jest.fn(),
-			pasteModuleAction: jest.fn(),
-			setNotificationAction: jest.fn(),
-			replaceModuleAction: jest.fn(),
+			addModuleAction: vi.fn(),
+			addComponentAction: vi.fn(),
+			deleteModuleAction: vi.fn(),
+			replaceElementsInCollectionAction: vi.fn(),
+			duplicateModuleAction: vi.fn(),
+			copyModuleAction: vi.fn(),
+			moveModuleAction: vi.fn(),
+			pasteModuleAction: vi.fn(),
+			setNotificationAction: vi.fn(),
+			replaceModuleAction: vi.fn(),
 		};
 
 		render(
@@ -98,10 +98,10 @@ describe("ComponentArraySelector component rendering", () => {
     mixableProps.disabled = false;
     mixableProps.maxItems = 1;
     mixableProps.actions = {
-      addModuleAction: jest.fn(),
-      addComponentAction: jest.fn(),
-      deleteModuleAction: jest.fn(),
-      replaceElementsInCollectionAction: jest.fn(),
+      addModuleAction: vi.fn(),
+      addComponentAction: vi.fn(),
+      deleteModuleAction: vi.fn(),
+      replaceElementsInCollectionAction: vi.fn(),
     };
     mixableProps.whiteList = ["BasicContent", "CardCollection"];
 
@@ -135,16 +135,16 @@ describe("ComponentArraySelector component rendering", () => {
 		mixableProps.disabled = false;
 		mixableProps.maxItems = 10;
 		mixableProps.actions = {
-			addModuleAction: jest.fn(),
-			addComponentAction: jest.fn(),
-			deleteModuleAction: jest.fn(),
-			replaceElementsInCollectionAction: jest.fn(),
-			duplicateModuleAction: jest.fn(),
-			copyModuleAction: jest.fn(),
-			moveModuleAction: jest.fn(),
-			pasteModuleAction: jest.fn(),
-			setNotificationAction: jest.fn(),
-			replaceModuleAction: jest.fn(),
+			addModuleAction: vi.fn(),
+			addComponentAction: vi.fn(),
+			deleteModuleAction: vi.fn(),
+			replaceElementsInCollectionAction: vi.fn(),
+			duplicateModuleAction: vi.fn(),
+			copyModuleAction: vi.fn(),
+			moveModuleAction: vi.fn(),
+			pasteModuleAction: vi.fn(),
+			setNotificationAction: vi.fn(),
+			replaceModuleAction: vi.fn(),
 		};
 		mixableProps.template = { component: "BasicTemplate" };
 		mixableProps.availableDataPacks = [
@@ -267,16 +267,16 @@ describe("ComponentArraySelector component events trigger", () => {
 		mixableProps.disabled = false;
 		mixableProps.maxItems = 10;
 		mixableProps.actions = {
-			addModuleAction: jest.fn(),
-			addComponentAction: jest.fn(),
-			deleteModuleAction: jest.fn(),
-			replaceElementsInCollectionAction: jest.fn(),
-			duplicateModuleAction: jest.fn(),
-			copyModuleAction: jest.fn(),
-			moveModuleAction: jest.fn(),
-			pasteModuleAction: jest.fn(),
-			setNotificationAction: jest.fn(),
-			replaceModuleAction: jest.fn(),
+			addModuleAction: vi.fn(),
+			addComponentAction: vi.fn(),
+			deleteModuleAction: vi.fn(),
+			replaceElementsInCollectionAction: vi.fn(),
+			duplicateModuleAction: vi.fn(),
+			copyModuleAction: vi.fn(),
+			moveModuleAction: vi.fn(),
+			pasteModuleAction: vi.fn(),
+			setNotificationAction: vi.fn(),
+			replaceModuleAction: vi.fn(),
 		};
 
 		render(
@@ -305,16 +305,16 @@ describe("ComponentArraySelector component events trigger", () => {
 		mixableProps.whiteList = ["Module1"];
 		mixableProps.moduleCopy = null;
 		mixableProps.actions = {
-			addModuleAction: jest.fn(),
-			addComponentAction: jest.fn(),
-			deleteModuleAction: jest.fn(),
-			replaceElementsInCollectionAction: jest.fn(),
-			duplicateModuleAction: jest.fn(),
-			copyModuleAction: jest.fn(),
-			moveModuleAction: jest.fn(),
-			pasteModuleAction: jest.fn(),
-			setNotificationAction: jest.fn(),
-			replaceModuleAction: jest.fn(),
+			addModuleAction: vi.fn(),
+			addComponentAction: vi.fn(),
+			deleteModuleAction: vi.fn(),
+			replaceElementsInCollectionAction: vi.fn(),
+			duplicateModuleAction: vi.fn(),
+			copyModuleAction: vi.fn(),
+			moveModuleAction: vi.fn(),
+			pasteModuleAction: vi.fn(),
+			setNotificationAction: vi.fn(),
+			replaceModuleAction: vi.fn(),
 		};
 
 		render(

package/src/__tests__/components/Fields/ComponentArray/MixableComponentArray/PasteModuleButton/PasteModuleButton.test.tsx

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 import PasteModuleButton, { IPasteModuleProps } from "@ax/components/Fields/ComponentArray/PasteModuleButton";
 import { ThemeProvider } from "styled-components";
@@ -6,12 +7,12 @@ import "@testing-library/jest-dom";
 import globalTheme from "@ax/themes/theme.json";
 import { IModule, INotification } from "@ax/types";
 import { render, screen, cleanup, fireEvent, act } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 
-jest.mock("react-router-dom", () => ({
-	...jest.requireActual("react-router-dom"),
+vi.mock("react-router-dom", async () => ({
+	...(await vi.importActual("react-router-dom")),
 	useLocation: () => ({
 		pathname: "localhost:3000/example/path",
 	}),
@@ -19,17 +20,17 @@ jest.mock("react-router-dom", () => ({
 
 const defaultProps = mock<IPasteModuleProps>();
 
-const mockedFunction = defaultProps.pasteModule as jest.MockedFunction<
+const mockedFunction = defaultProps.pasteModule as MockedFunction<
 	(editorID: number, key: string, modulesToPaste: IModule[]) => Promise<{ error?: INotification }>
 >;
-const mockedNotification = defaultProps.setNotification as jest.MockedFunction<(notification: INotification) => void>;
+const mockedNotification = defaultProps.setNotification as MockedFunction<(notification: INotification) => void>;
 defaultProps.editorID = 1;
 defaultProps.modulesToPaste = [{ editorID: 1, component: "BasicContent" }];
 
 describe("ComponentArraySelector component rendering", () => {
 	test("should render the component", async () => {
 		defaultProps.isModuleCopyUnavailable = true;
-		defaultProps.setHistoryPush = jest.fn();
+		defaultProps.setHistoryPush = vi.fn();
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
 				<PasteModuleButton {...defaultProps} />

package/src/__tests__/components/Fields/ComponentArray/SameComponentArray/SameComponentArray.test.tsx

@@ -5,7 +5,7 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { IModule } from "@ax/types";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 
@@ -138,8 +138,8 @@ describe("ComponentArraySelector component rendering", () => {
 		sameProps.disabled = false;
 		sameProps.maxItems = 10;
 		sameProps.actions = {
-			addModuleAction: jest.fn(),
-			addComponentAction: jest.fn(),
+			addModuleAction: vi.fn(),
+			addComponentAction: vi.fn(),
 		};
 
 		render(
@@ -163,8 +163,8 @@ describe("ComponentArraySelector component events trigger", () => {
 		sameProps.disabled = false;
 		sameProps.maxItems = 10;
 		sameProps.actions = {
-			addModuleAction: jest.fn(),
-			addComponentAction: jest.fn(),
+			addModuleAction: vi.fn(),
+			addComponentAction: vi.fn(),
 		};
 
 		render(
@@ -189,8 +189,8 @@ describe("ComponentArraySelector component events trigger", () => {
 		otherSameModule.modules = [];
 		sameProps.value = [sameModule, otherSameModule];
 		sameProps.actions = {
-			addModuleAction: jest.fn(),
-			addComponentAction: jest.fn(),
+			addModuleAction: vi.fn(),
+			addComponentAction: vi.fn(),
 		};
 
 		render(