@griddo/ax 12.3.0 → 12.5.0

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,38 @@ describe("TextArea component rendering", () => {
 });
 
 describe("TextArea events", () => {
+	// Solo un test falsea los timers, pero restaurarlos en un hook evita que se
+	// queden falsos para el resto del describe si una aserción falla antes.
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
+	// 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");
 	});
 
 	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,20 +3,21 @@ 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";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IToggleFieldProps>();
+const makeProps = (overrides: Partial<IToggleFieldProps> = {}): IToggleFieldProps =>
+	Object.assign(mock<IToggleFieldProps>(), overrides);
 
 describe("ToggleField component rendering", () => {
 	it("should render the component", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ToggleField {...defaultProps} />
+				<ToggleField {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -29,11 +30,9 @@ describe("ToggleField component rendering", () => {
 	});
 
 	it("should render input as checked", () => {
-		defaultProps.value = true;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ToggleField {...defaultProps} />
+				<ToggleField {...makeProps({ value: true })} />
 			</ThemeProvider>,
 		);
 
@@ -42,11 +41,9 @@ describe("ToggleField component rendering", () => {
 	});
 
 	it("should render input as disabled", () => {
-		defaultProps.disabled = true;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ToggleField {...defaultProps} />
+				<ToggleField {...makeProps({ disabled: true })} />
 			</ThemeProvider>,
 		);
 
@@ -55,11 +52,9 @@ describe("ToggleField component rendering", () => {
 	});
 
 	it("should render input with name", () => {
-		defaultProps.name = "This is the name";
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ToggleField {...defaultProps} />
+				<ToggleField {...makeProps({ name: "This is the name" })} />
 			</ThemeProvider>,
 		);
 
@@ -68,11 +63,9 @@ describe("ToggleField component rendering", () => {
 	});
 
 	it("should render the auxText", () => {
-		defaultProps.auxText = "This is the new text";
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ToggleField {...defaultProps} />
+				<ToggleField {...makeProps({ auxText: "This is the new text" })} />
 			</ThemeProvider>,
 		);
 
@@ -81,11 +74,9 @@ describe("ToggleField component rendering", () => {
 	});
 
 	it("should render with the background", () => {
-		defaultProps.background = true;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ToggleField {...defaultProps} />
+				<ToggleField {...makeProps({ background: true })} />
 			</ThemeProvider>,
 		);
 
@@ -98,29 +89,30 @@ describe("ToggleField component rendering", () => {
 
 describe("onClick events", () => {
 	it("should call onChange function with value true", () => {
-		defaultProps.value = false;
-		defaultProps.onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ToggleField {...defaultProps} />
+				<ToggleField {...makeProps({ value: false, onChange })} />
 			</ThemeProvider>,
 		);
 
 		const toggleFieldInput = screen.getByTestId("toggle-field-input");
 		fireEvent.click(toggleFieldInput);
-		expect(defaultProps.onChange).toHaveBeenCalledWith(true);
+		expect(onChange).toHaveBeenCalledWith(true);
 	});
 
 	it("should not call onChange function", () => {
+		const onChange = vi.fn();
+
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ToggleField {...defaultProps} onChange={undefined} />
+				<ToggleField {...makeProps({ onChange })} onChange={undefined} />
 			</ThemeProvider>,
 		);
 
 		const toggleFieldInput = screen.getByTestId("toggle-field-input");
 		fireEvent.click(toggleFieldInput);
-		expect(defaultProps.onChange).not.toHaveBeenCalled();
+		expect(onChange).not.toHaveBeenCalled();
 	});
 });

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";
 
@@ -45,8 +45,15 @@ describe("Tooltip component rendering", () => {
 });
 
 describe("Tooltip events triggering", () => {
+	beforeEach(() => {
+		vi.useFakeTimers();
+	});
+
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
 	it("should render the component and Tip Component is still visible when doing click", () => {
-		jest.useFakeTimers();
 		defaultProps.content = "content";
 		defaultProps.children = <Icon name="modified" size="16px" />;
 
@@ -76,7 +83,7 @@ describe("Tooltip events triggering", () => {
 					<Tooltip {...defaultProps} />
 				</ThemeProvider>,
 			);
-			jest.runAllTimers();
+			vi.runAllTimers();
 		});
 
 		expect(tipComponent).toBeVisible();
@@ -91,13 +98,12 @@ 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();
 		defaultProps.content = "content";
 		defaultProps.children = <Icon name="modified" size="16px" />;
 
@@ -128,7 +134,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", () => {