@griddo/ax 12.3.0-beta.0 → 12.4.0

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

@@ -42,9 +42,9 @@ describe("FieldGroup component rendering", () => {
 			collapsed: false,
 		};
 
-		const setStateMock = jest.fn();
+		const setStateMock = vi.fn();
 		const useStateMock: any = (useState: string) => [useState, setStateMock];
-		jest.spyOn(React, "useState").mockImplementation(useStateMock);
+		vi.spyOn(React, "useState").mockImplementation(useStateMock);
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>

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

@@ -2,8 +2,8 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
-import { mock } from "jest-mock-extended";
-import { render, screen, cleanup } from "../../../../../config/jest/test-utils";
+import { mock } from "vitest-mock-extended";
+import { render, screen, cleanup } from "../../../../../config/tests/test-utils";
 import FileField, { IFileFieldProps } from "@ax/components/Fields/FileField";
 import { act } from "react-dom/test-utils";
 import thunk from "redux-thunk";
@@ -118,7 +118,7 @@ describe("onClick events", () => {
 
 		const { rerender } = render(Component, { store });
 
-		const spyWindowOpen = jest.spyOn(window, "open");
+		const spyWindowOpen = vi.spyOn(window, "open");
 
 		const urlButton = screen.getAllByTestId("icon-action-component");
 		act(() => urlButton[0].click());
@@ -137,7 +137,7 @@ describe("onClick events", () => {
 
 	it("should call onChange when clicking the delete action", () => {
 		defaultProps.value = { url: "google.es", uploadDate: "1/1/2022", sizeBytes: "123" };
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		const Component = (
 			<ThemeProvider theme={parseTheme(globalTheme)}>

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

@@ -13,7 +13,7 @@ const defaultProps = {
 		tag: "",
 	},
 	title: "",
-	onChange: jest.fn(),
+	onChange: vi.fn(),
 	options: [
 		{
 			value: "",
@@ -43,7 +43,7 @@ describe("HeadingField component rendering", () => {
 				tag: "tagValue",
 			},
 			title: "Title",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			options: [
 				{
 					value: "value1",

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

@@ -3,7 +3,7 @@ import HiddenField, { IHiddenFieldProps } from "@ax/components/Fields/HiddenFiel
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 
 afterEach(cleanup);
@@ -40,7 +40,7 @@ describe("Component rendering", () => {
 describe("onClick events", () => {
 	it("should call showField with multiple options when clicking the component", () => {
 		defaultProps.hasMultipleOptions = true;
-		const showField = jest.fn();
+		const showField = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -55,7 +55,7 @@ describe("onClick events", () => {
 
 	it("should call showField with single option when clicking the component", () => {
 		defaultProps.hasMultipleOptions = false;
-		const showField = jest.fn();
+		const showField = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>

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

@@ -1,12 +1,13 @@
+import type { MockedFunction } from "vitest";
 import React from "react";
 import axios from "axios";
 import "@testing-library/jest-dom";
 import configureStore from "redux-mock-store";
 import { ThemeProvider } from "styled-components";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import thunk from "redux-thunk";
 
-import { render, screen, cleanup, fireEvent, act } from "../../../../../config/jest/test-utils";
+import { render, screen, cleanup, fireEvent, act } from "../../../../../config/tests/test-utils";
 
 import ImageField, { IImageFieldProps } from "@ax/components/Fields/ImageField";
 import { parseTheme } from "@ax/helpers";
@@ -17,8 +18,8 @@ afterEach(() => {
 	cleanup();
 });
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 
 const data = {
 	data: [],
@@ -325,7 +326,7 @@ describe("ImageField triggers", () => {
 				folderId: null,
 			},
 		};
-		const setIsGalleryMock = defaultProps.setIsGalleryOpened as jest.MockedFunction<() => void>;
+		const setIsGalleryMock = defaultProps.setIsGalleryOpened as MockedFunction<() => void>;
 		defaultProps.disabled = false;
 
 		render(
@@ -391,7 +392,7 @@ describe("ImageField triggers", () => {
 				folderId: null,
 			},
 		};
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: any) => void>;
 		defaultProps.disabled = false;
 		const { rerender } = render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -465,7 +466,7 @@ describe("ImageField triggers", () => {
 				folderId: null,
 			},
 		};
-		const setIsGalleryMock = defaultProps.setIsGalleryOpened as jest.MockedFunction<() => void>;
+		const setIsGalleryMock = defaultProps.setIsGalleryOpened as MockedFunction<() => void>;
 		defaultProps.disabled = false;
 		const { rerender } = render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>

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

@@ -1,14 +1,15 @@
+import type { MockedFunction } from "vitest";
 import React from "react";
 import "@testing-library/jest-dom";
 import configureStore from "redux-mock-store";
 import { ThemeProvider } from "styled-components";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import axios from "axios";
 import thunk from "redux-thunk";
 import { Router } from "react-router-dom";
 import { history } from "@ax/routes";
 
-import { render, cleanup, act, screen, fireEvent } from "../../../../../config/jest/test-utils";
+import { render, cleanup, act, screen, fireEvent } from "../../../../../config/tests/test-utils";
 
 import IntegrationsField, { IIntegrationsFieldProps } from "@ax/components/Fields/IntegrationsField";
 import { parseTheme } from "@ax/helpers";
@@ -19,8 +20,8 @@ afterEach(cleanup);
 const middlewares: any = [thunk];
 const mockStore = configureStore(middlewares);
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 
 const defaultProps = mock<IIntegrationsFieldProps>();
 defaultProps.site = {
@@ -284,7 +285,7 @@ describe("Events", () => {
 		const initialState = { ...defaultProps };
 		defaultProps.value = [...initialStore.integrations.integrations];
 		const store = mockStore(initialStore);
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		const data = {
 			data: { ...initialStore.integrations },
@@ -323,7 +324,7 @@ describe("Events", () => {
 		const initialState = { ...defaultProps };
 		defaultProps.value = [];
 		const store = mockStore(initialStore);
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		const data = {
 			data: { ...initialStore.integrations },
@@ -358,7 +359,7 @@ describe("Events", () => {
 		const initialState = { ...defaultProps };
 		defaultProps.value = [];
 		const store = mockStore(initialStore);
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		const data = {
 			data: { ...initialStore.integrations },
@@ -418,7 +419,7 @@ describe("Events", () => {
 			},
 		};
 		const store = mockStore(initialStore);
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		const data = {
 			data: { ...initialStore.integrations },

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

@@ -2,7 +2,7 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 
 import MultiCheckSelect, { IMultiCheckSelectProps } from "@ax/components/Fields/MultiCheckSelect";

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

@@ -1,17 +1,18 @@
+import type { MockedFunction } from "vitest";
 import React from "react";
 import Axios from "axios";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import { act } from "react-dom/test-utils";
 import MultiCheckSelectGroup, { IMultiCheckSelectGroupProps } from "@ax/components/Fields/MultiCheckSelectGroup";
 
 afterEach(cleanup);
 
-jest.mock("axios");
-const mockedAxios = Axios as jest.MockedFunction<typeof Axios>;
+vi.mock("axios");
+const mockedAxios = Axios as MockedFunction<typeof Axios>;
 
 const defaultProps = mock<IMultiCheckSelectGroupProps>();
 
@@ -49,11 +50,11 @@ describe("MultiCheckSelectGroup component rendering", () => {
 
 describe("onChange events", () => {
 	afterEach(() => {
-		jest.resetAllMocks();
+		vi.resetAllMocks();
 	});
 
 	it("should call onChange", async () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		defaultProps.value = {};
 		defaultProps.note = "lorem ipsum";
 		defaultProps.elements = [
@@ -119,7 +120,7 @@ describe("onChange events", () => {
 	});
 
 	/*it("should call onChange with empty object", async () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     defaultProps.value = {};
     defaultProps.note = "lorem ipsum";
     defaultProps.elements = [

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

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

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

@@ -3,7 +3,7 @@ import NumberField, { INumberFieldProps } from "@ax/components/Fields/NumberFiel
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
@@ -28,7 +28,7 @@ describe("NumberField component rendering", () => {
 
 describe("onClick events", () => {
 	it("should call onChange when clicking arrow up", () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -44,7 +44,7 @@ describe("onClick events", () => {
 	it("should call onChange when clicking arrow down", () => {
 		defaultProps.value = 2;
 		defaultProps.min = 1;
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -62,8 +62,8 @@ describe("onClick events", () => {
 
 describe("onBlur events", () => {
 	it("should call handleValidation on blur", () => {
-		const handleValidation = jest.fn();
-		const onBlur = jest.fn();
+		const handleValidation = vi.fn();
+		const onBlur = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -81,8 +81,8 @@ describe("onChange events", () => {
 	it("should call onChange on change", () => {
 		defaultProps.max = 7;
 		defaultProps.error = true;
-		const onChange = jest.fn();
-		const handleValidation = jest.fn();
+		const onChange = vi.fn();
+		const handleValidation = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -98,7 +98,7 @@ describe("onChange events", () => {
 
 	it("should call onChange with undefined", async () => {
 		defaultProps.value = undefined;
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>

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

@@ -4,7 +4,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);
 
@@ -81,7 +81,7 @@ describe("onClick events", () => {
 
 	it("should call onChange function", () => {
 		defaultProps.checked = false;
-		defaultProps.onChange = jest.fn();
+		defaultProps.onChange = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>

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

@@ -1,15 +1,16 @@
+import type { MockedFunction } from "vitest";
 import React from "react";
 import axios from "axios";
 import "@testing-library/jest-dom";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 
 import ReferenceField, { IReferenceFieldProps } from "@ax/components/Fields/ReferenceField/index";
 import globalTheme from "@ax/themes/theme.json";
 
-import { render, cleanup, screen, act, fireEvent } from "../../../../../config/jest/test-utils";
+import { render, cleanup, screen, act, fireEvent } from "../../../../../config/tests/test-utils";
 import {
 	articlesDistributorResponse,
 	storiesDistributorResponse,
@@ -22,7 +23,7 @@ import { structuredDataMock, sitesMock, appMock } from "../../../../__mocks__/st
 
 afterEach(() => {
 	cleanup();
-	jest.resetAllMocks();
+	vi.resetAllMocks();
 });
 
 const defaultProps = mock<IReferenceFieldProps>();
@@ -38,8 +39,8 @@ const initialStore = {
 const mockStore = configureStore();
 const store = mockStore(initialStore);
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 const mockApiCalls = () =>
 	mockedAxios.mockImplementation((request: any) => {
 		switch (request.url) {
@@ -62,7 +63,7 @@ describe("ReferenceField component rendering", () => {
 			order: "alpha-DESC",
 		};
 		defaultProps.selectionType = ["auto"];
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		const initialState = { ...initialStore, ...defaultProps };
 
 		mockApiCalls();
@@ -140,7 +141,7 @@ describe("ReferenceField component rendering", () => {
 			fixed: [],
 		};
 		const initialState = { ...initialStore, ...defaultProps };
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		mockedAxios.mockImplementation((request: any) => {
 			switch (request.url) {
@@ -197,7 +198,7 @@ describe("onChange events", () => {
 			quantity: 1,
 		};
 		const initialState = { ...initialStore, ...defaultProps };
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		mockedAxios.mockImplementation((request: any) => {
 			switch (request.url) {
@@ -267,7 +268,7 @@ describe("onChange events", () => {
 			fixed: [4492, 4493],
 		};
 		const initialState = { ...initialStore, ...defaultProps };
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		mockApiCalls();
 
@@ -320,7 +321,7 @@ describe("onChange events", () => {
 		};
 		defaultProps.maxItems = 3;
 		const initialState = { ...initialStore, ...defaultProps };
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		mockApiCalls();
 
@@ -388,7 +389,7 @@ describe("onChange events", () => {
 			],
 		};
 		const initialState = { ...initialStore, ...defaultProps };
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		mockedAxios.mockImplementation((request: any) => {
 			switch (request.url) {
@@ -445,7 +446,7 @@ describe("onChange events", () => {
       fixed: [4492, 4493],
     };
     const initialState = { ...initialStore, ...defaultProps };
-    const onChange = jest.fn();
+    const onChange = vi.fn();
 
   //   mockApiCalls();
 
@@ -480,7 +481,7 @@ describe("onChange events", () => {
       fixed: [4492, 4493],
     };
     const initialState = { ...initialStore, ...defaultProps };
-    const onChange = jest.fn();
+    const onChange = vi.fn();
 
     mockApiCalls();
 
@@ -509,7 +510,7 @@ describe("onChange events", () => {
       fixed: [4492, 4493],
     };
     const initialState = { ...initialStore, ...defaultProps };
-    const onChange = jest.fn();
+    const onChange = vi.fn();
 
     mockApiCalls();
 
@@ -565,7 +566,7 @@ describe("onChange events", () => {
       fixed: [4492, 4493],
     };
     const initialState = { ...initialStore, ...defaultProps };
-    const onChange = jest.fn();
+    const onChange = vi.fn();
 
     mockApiCalls();
 
@@ -594,7 +595,7 @@ describe("onChange events", () => {
       fixed: [],
     };
     const initialState = { ...initialStore, ...defaultProps };
-    const onChange = jest.fn();
+    const onChange = vi.fn();
 
     mockApiCalls();
 

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

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

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

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

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

@@ -1,10 +1,11 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 import SliderField, { ITextFieldProps } from "@ax/components/Fields/SliderField";
 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);
 
@@ -15,7 +16,7 @@ describe("Select component rendering", () => {
 		defaultProps.title = "A title";
 		defaultProps.value = 10;
 		defaultProps.step = 1;
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: number) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: number) => void>;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -36,7 +37,7 @@ describe("Select component rendering", () => {
 		defaultProps.step = 1;
 		defaultProps.prefix = "prefix";
 		defaultProps.suffix = "suffix";
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: number) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: number) => void>;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -54,7 +55,7 @@ describe("Select component events trigger", () => {
 		defaultProps.title = "A title";
 		defaultProps.value = 10;
 		defaultProps.step = 1;
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: number) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: number) => void>;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>

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

@@ -2,8 +2,8 @@ import * as React from "react";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
-import { render, cleanup, screen } from "../../../../../config/jest/test-utils";
-import { mock } from "jest-mock-extended";
+import { render, cleanup, screen } from "../../../../../config/tests/test-utils";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
 import SummaryButton, { ISummaryButtonProps } from "@ax/components/Fields/SummaryButton";

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

@@ -1,4 +1,3 @@
-import React from "react";
 import TagsField from "@ax/components/Fields/TagsField";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
@@ -9,7 +8,7 @@ afterEach(cleanup);
 
 const props = {
 	value: [],
-	onChange: jest.fn(),
+	onChange: vi.fn(),
 };
 
 describe("TagsField component", () => {
@@ -32,7 +31,7 @@ describe("TagsField component", () => {
 	test("should render the tags if have values", () => {
 		const defaultProps = {
 			value: ["one", "two"],
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 		};
 
 		render(
@@ -69,7 +68,7 @@ describe("TagsField events", () => {
 	});
 
 	test("should add new value on keyDown if it's not in array", () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		const defaultProps = {
 			value: [],
 			onChange,
@@ -86,7 +85,7 @@ describe("TagsField events", () => {
 		expect(onChange).toHaveBeenCalledWith(["test"]);
 	});
 	test("shouldn't add new value on keyDown if it's in array", () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		const defaultProps = {
 			value: ["test"],
 			onChange,
@@ -103,7 +102,7 @@ describe("TagsField events", () => {
 		expect(onChange).toBeCalledTimes(0);
 	});
 	test("should delete value from array", () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		const defaultProps = {
 			value: ["one", "two"],
 			onChange,
@@ -121,9 +120,10 @@ describe("TagsField events", () => {
 		fireEvent.click(tagRendered[0], 0);
 		expect(onChange).toBeCalledTimes(1);
 	});
+	// Asserts the focus actually lands on the input instead of spying on
+	// React.useRef: an ESM namespace is immutable, so `vi.spyOn(React, ...)` no
+	// longer intercepts the hook the component imported.
 	test("should call the focus function", () => {
-		// we can check if the focus function is been called
-		const useRefSpy = jest.spyOn(React, "useRef").mockReturnValueOnce({ current: { focus: jest.fn() } });
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
 				<TagsField {...props} />
@@ -131,6 +131,6 @@ describe("TagsField events", () => {
 		);
 		const tagsFieldWrapper = screen.getByTestId("tag-field-wrapper");
 		fireEvent.click(tagsFieldWrapper);
-		expect(useRefSpy).toBeCalledTimes(1);
+		expect(screen.getByTestId("tag-field-input")).toHaveFocus();
 	});
 });