@griddo/ax 12.3.0 → 12.4.0

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();
 	});
 });

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

@@ -1,4 +1,3 @@
-import React from "react";
 import TextArea from "@ax/components/Fields/TextArea";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
@@ -10,7 +9,7 @@ afterEach(cleanup);
 const props = {
 	name: "",
 	value: "",
-	onChange: jest.fn(),
+	onChange: vi.fn(),
 };
 
 describe("TextArea component rendering", () => {
@@ -27,29 +26,34 @@ describe("TextArea component rendering", () => {
 });
 
 describe("TextArea events", () => {
+	// Asserts the observable contract instead of spying on React.useState: an ESM
+	// namespace is immutable, so `vi.spyOn(React, ...)` no longer intercepts the
+	// hook the component imported. onChange is debounced by 300ms.
 	test("should call the onChange", () => {
-		const setStateMock = jest.fn();
-		const useStateMock: any = (useState: string) => [useState, setStateMock];
-		jest.spyOn(React, "useState").mockImplementation(useStateMock);
+		vi.useFakeTimers();
+		const onChange = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<TextArea {...props} />
+				<TextArea {...props} onChange={onChange} />
 			</ThemeProvider>,
 		);
 
 		const textAreaComponent = screen.getByTestId("text-area-component");
 		expect(textAreaComponent).toBeTruthy();
 		fireEvent.change(textAreaComponent, { target: { value: "test" } });
-		expect(setStateMock).toHaveBeenCalledWith("test");
+		vi.advanceTimersByTime(300);
+		expect(onChange).toHaveBeenCalledWith("test");
+
+		vi.useRealTimers();
 	});
 
 	test("should call the onBlur", () => {
-		const handleValidationMock = jest.fn();
+		const handleValidationMock = vi.fn();
 		const defaultProps = {
 			name: "name",
 			value: "value",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			handleValidation: handleValidationMock,
 		};
 

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

@@ -9,7 +9,7 @@ afterEach(cleanup);
 
 const defaultProps = {
 	value: "",
-	onChange: jest.fn(),
+	onChange: vi.fn(),
 };
 
 describe("TextField component rendering", () => {
@@ -30,7 +30,7 @@ describe("TextField component rendering", () => {
 	test("should render the component with prefix", () => {
 		const props = {
 			value: "value",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			prefix: "prefix",
 		};
 
@@ -51,7 +51,7 @@ describe("TextField component rendering", () => {
 	it("should render the component with backgroundIcon", () => {
 		const props = {
 			value: "value",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			icon: "icon",
 			iconPosition: "in",
 		};
@@ -73,7 +73,7 @@ describe("TextField component rendering", () => {
 	it("should render the component with button", () => {
 		const props = {
 			value: "value",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			icon: "icon",
 			iconPosition: "out",
 		};
@@ -95,10 +95,10 @@ describe("TextField component rendering", () => {
 
 describe("onClick from buttons", () => {
 	test("onClickIcon been called in BackgroundIcon", () => {
-		const onClickIconMock = jest.fn();
+		const onClickIconMock = vi.fn();
 		const props = {
 			value: "value",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			icon: "icon",
 			iconPosition: "in",
 			onClickIcon: onClickIconMock,
@@ -118,10 +118,10 @@ describe("onClick from buttons", () => {
 	});
 
 	test("onClickIcon been called in BackgroundIcon", () => {
-		const onClickIconMock = jest.fn();
+		const onClickIconMock = vi.fn();
 		const props = {
 			value: "value",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			icon: "icon",
 			iconPosition: "out",
 			onClickIcon: onClickIconMock,

package/src/__tests__/components/Fields/TimeField/HourInput/HourInput.test.tsx

@@ -1,6 +1,7 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
@@ -39,7 +40,7 @@ describe("HourInput component rendering", () => {
 
 describe("onChange events", () => {
 	it("should call onChange on change with valid time", () => {
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 		defaultProps.value = "12:30";
 		defaultProps.disabled = false;
 
@@ -59,7 +60,7 @@ describe("onChange events", () => {
 	});
 
 	it("should call onChange on change with 24 hours time", () => {
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 		defaultProps.value = "12:00";
 
 		render(
@@ -78,7 +79,7 @@ describe("onChange events", () => {
 	});
 
 	it("should call onChange on change with 24 hours time", () => {
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 		defaultProps.value = "12:00";
 
 		render(
@@ -97,7 +98,7 @@ describe("onChange events", () => {
 	});
 
 	it("should call onChange on change with more than 12 hours", () => {
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 		defaultProps.value = "12:00";
 
 		render(
@@ -116,7 +117,7 @@ describe("onChange events", () => {
 	});
 
 	it("should call onChange on change with more than 59 minutes", () => {
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 		defaultProps.value = "12:30";
 
 		render(

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

@@ -1,6 +1,7 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
@@ -62,7 +63,7 @@ describe("TimeField component rendering", () => {
 
 describe("onChange events", () => {
 	it("should call onChange on change", () => {
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 		defaultProps.value = "12:30 am";
 
 		render(
@@ -77,7 +78,7 @@ describe("onChange events", () => {
 	});
 
 	it("should call onChange on change with no value", () => {
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 		defaultProps.value = undefined;
 
 		render(

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

@@ -3,7 +3,7 @@ import ToggleField, { IToggleFieldProps } from "@ax/components/Fields/ToggleFiel
 import { ThemeProvider } from "styled-components";
 import { render, screen, cleanup, fireEvent } 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 globalTheme from "@ax/themes/theme.json";
@@ -99,7 +99,7 @@ describe("ToggleField component rendering", () => {
 describe("onClick events", () => {
 	it("should call onChange function with value true", () => {
 		defaultProps.value = false;
-		defaultProps.onChange = jest.fn();
+		defaultProps.onChange = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>

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

@@ -3,7 +3,7 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import { render, screen, cleanup, fireEvent, act } 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";
 
@@ -46,7 +46,7 @@ describe("Tooltip component rendering", () => {
 
 describe("Tooltip events triggering", () => {
 	it("should render the component and Tip Component is still visible when doing click", () => {
-		jest.useFakeTimers();
+		vi.useFakeTimers();
 		defaultProps.content = "content";
 		defaultProps.children = <Icon name="modified" size="16px" />;
 
@@ -76,7 +76,7 @@ describe("Tooltip events triggering", () => {
 					<Tooltip {...defaultProps} />
 				</ThemeProvider>,
 			);
-			jest.runAllTimers();
+			vi.runAllTimers();
 		});
 
 		expect(tipComponent).toBeVisible();
@@ -91,13 +91,13 @@ describe("Tooltip events triggering", () => {
 				</ThemeProvider>,
 			);
 
-			jest.runAllTimers();
+			vi.runAllTimers();
 		});
 		expect(tipComponent).toBeVisible();
 	});
 
 	it("should render the component and change visibility of Tip Component when click", () => {
-		jest.useFakeTimers();
+		vi.useFakeTimers();
 		defaultProps.content = "content";
 		defaultProps.children = <Icon name="modified" size="16px" />;
 
@@ -128,7 +128,7 @@ describe("Tooltip events triggering", () => {
 				</ThemeProvider>,
 			);
 
-			jest.runAllTimers();
+			vi.runAllTimers();
 		});
 
 		expect(tipComponent).toBeVisible();

package/src/__tests__/components/Fields/TranslateButton/TranslateButton.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 TranslateButton, { ITranslateButtonProps } from "@ax/components/Fields/TranslateButton";
@@ -36,7 +36,7 @@ describe("Translate Button component rendering", () => {
 
 		const translateButtonWrapper = screen.getByTestId("translate-button-wrapper");
 		expect(translateButtonWrapper).toBeTruthy();
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeFalsy();
 	});
 
@@ -60,7 +60,7 @@ describe("Translate Button component rendering", () => {
 
 		const translateButtonWrapper = screen.getByTestId("translate-button-wrapper");
 		expect(translateButtonWrapper).toBeTruthy();
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeFalsy();
 	});
 
@@ -83,7 +83,7 @@ describe("Translate Button component rendering", () => {
 		);
 
 		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeFalsy();
 		expect(translateButtonWrapper).toBeFalsy();
 	});
@@ -107,7 +107,7 @@ describe("Translate Button component rendering", () => {
 		);
 
 		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeFalsy();
 		expect(translateButtonWrapper).toBeFalsy();
 	});
@@ -131,7 +131,7 @@ describe("Translate Button component rendering", () => {
 		);
 
 		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeFalsy();
 		expect(translateButtonWrapper).toBeFalsy();
 	});
@@ -139,7 +139,7 @@ describe("Translate Button component rendering", () => {
 	it("should render the notification if page is already translated", () => {
 		const initialStore = {
 			app: { globalSettings: { autoTranslation: true } },
-			pageEditor: { editorContent: { canBeTranslated: false }, isIATranslated: true },
+			pageEditor: { editorContent: { canBeTranslated: false, originalLanguage: 2 }, isIATranslated: true },
 			structuredData: { form: null, isIATranslated: false },
 			forms: { formContent: null },
 		};
@@ -155,7 +155,7 @@ describe("Translate Button component rendering", () => {
 		);
 
 		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeTruthy();
 		expect(translateButtonWrapper).toBeFalsy();
 	});
@@ -164,7 +164,7 @@ describe("Translate Button component rendering", () => {
 		const initialStore = {
 			app: { globalSettings: { autoTranslation: true } },
 			pageEditor: { editorContent: null, isIATranslated: false },
-			structuredData: { form: { canBeTranslated: false }, isIATranslated: true },
+			structuredData: { form: { canBeTranslated: false, originalLanguage: 2 }, isIATranslated: true },
 			forms: { formContent: null },
 		};
 		const store = mockStore(initialStore);
@@ -179,7 +179,7 @@ describe("Translate Button component rendering", () => {
 		);
 
 		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeTruthy();
 		expect(translateButtonWrapper).toBeFalsy();
 	});
@@ -204,7 +204,7 @@ describe("Translate Button component rendering", () => {
 
 		const translateButtonWrapper = screen.getByTestId("translate-button-wrapper");
 		expect(translateButtonWrapper).toBeTruthy();
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeFalsy();
 	});
 
@@ -228,7 +228,7 @@ describe("Translate Button component rendering", () => {
 
 		const translateButtonWrapper = screen.getByTestId("translate-button-wrapper");
 		expect(translateButtonWrapper).toBeTruthy();
-		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeFalsy();
 	});
 });

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

@@ -24,7 +24,7 @@ const initialValues = {
 	name: "",
 	value: null,
 	options: optionsArray,
-	onChange: jest.fn(),
+	onChange: vi.fn(),
 };
 
 describe("CheckField component rendering", () => {