@griddo/ax 12.4.0 → 12.5.0

package/src/__tests__/components/TableFilters/LiveFilter/LiveFilter.test.tsx

@@ -14,14 +14,12 @@ import { IQueryValue } from "@ax/types";
 afterEach(cleanup);
 vi.mock("axios");
 const mockedAxios = axios as MockedFunction<typeof axios>;
-const defaultProps = mock<ILiveFilterProps>();
+const makeProps = (overrides: Partial<ILiveFilterProps> = {}): ILiveFilterProps =>
+	Object.assign(mock<ILiveFilterProps>(), overrides);
 
 describe("LiveFilter component rendering", () => {
 	it("should render live filter", async () => {
-		defaultProps.value = [{ value: "all", label: "All" }];
 		const filterItems = vi.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
-
-		defaultProps.filterItems = filterItems;
 		const data = {
 			data: [
 				{ id: 1, title: "Offline", status: "offline" },
@@ -42,7 +40,7 @@ describe("LiveFilter component rendering", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<LiveFilter {...defaultProps} />
+					<LiveFilter {...makeProps({ value: [{ value: "all", label: "All" }], filterItems: filterItems })} />
 				</ThemeProvider>,
 			);
 		});
@@ -53,11 +51,8 @@ describe("LiveFilter component rendering", () => {
 	});
 
 	it("should render the component with no options", async () => {
-		defaultProps.value = [{ value: "all", label: "All" }];
 		const filterItems = vi.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
-		defaultProps.filterItems = filterItems;
-
 		const data = {
 			data: [],
 			status: 500,
@@ -71,7 +66,7 @@ describe("LiveFilter component rendering", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<LiveFilter {...defaultProps} />
+					<LiveFilter {...makeProps({ value: [{ value: "all", label: "All" }], filterItems: filterItems })} />
 				</ThemeProvider>,
 			);
 		});
@@ -90,10 +85,7 @@ describe("LiveFilter component rendering", () => {
 
 describe("LiveFilter events", () => {
 	it("should render check group on click", async () => {
-		defaultProps.value = [{ value: "all", label: "All" }];
 		const filterItemsMock = vi.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
-
-		defaultProps.filterItems = filterItemsMock;
 		const data = {
 			data: [
 				{ id: 1, title: "Offline", status: "offline" },
@@ -113,7 +105,7 @@ describe("LiveFilter events", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<LiveFilter {...defaultProps} />
+					<LiveFilter {...makeProps({ value: [{ value: "all", label: "All" }], filterItems: filterItemsMock })} />
 				</ThemeProvider>,
 			);
 		});
@@ -130,10 +122,7 @@ describe("LiveFilter events", () => {
 	});
 
 	it("should check option on click", async () => {
-		defaultProps.value = [{ value: "all", label: "All" }];
 		const filterItemsMock = vi.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
-
-		defaultProps.filterItems = filterItemsMock;
 		const data = {
 			data: [
 				{ id: 1, title: "Offline", status: "offline" },
@@ -154,7 +143,7 @@ describe("LiveFilter events", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<LiveFilter {...defaultProps} />
+					<LiveFilter {...makeProps({ value: [{ value: "all", label: "All" }], filterItems: filterItemsMock })} />
 				</ThemeProvider>,
 			);
 		});
@@ -173,10 +162,7 @@ describe("LiveFilter events", () => {
 	});
 
 	it("should uncheck selected option on click and select 'All' option", async () => {
-		defaultProps.value = [{ value: "all", label: "All" }];
 		const filterItemsMock = vi.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
-
-		defaultProps.filterItems = filterItemsMock;
 		const data = {
 			data: [
 				{ id: 1, title: "Offline", status: "offline" },
@@ -197,7 +183,7 @@ describe("LiveFilter events", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<LiveFilter {...defaultProps} />
+					<LiveFilter {...makeProps({ value: [{ value: "all", label: "All" }], filterItems: filterItemsMock })} />
 				</ThemeProvider>,
 			);
 		});
@@ -221,10 +207,7 @@ describe("LiveFilter events", () => {
 	});
 
 	it("should call filterItems action on change", async () => {
-		defaultProps.value = [{ value: "all", label: "All" }];
 		const filterItemsMock = vi.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
-
-		defaultProps.filterItems = filterItemsMock;
 		const data = {
 			data: [
 				{ id: 1, title: "Offline", status: "offline" },
@@ -245,7 +228,7 @@ describe("LiveFilter events", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<LiveFilter {...defaultProps} />
+					<LiveFilter {...makeProps({ value: [{ value: "all", label: "All" }], filterItems: filterItemsMock })} />
 				</ThemeProvider>,
 			);
 		});
@@ -261,10 +244,7 @@ describe("LiveFilter events", () => {
 	});
 
 	it("should render live filter with filter options", async () => {
-		defaultProps.value = [{ value: "all", label: "All" }];
 		const filterItems = vi.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
-		defaultProps.filterOptions = ["offline", "active", "scheduled"];
-		defaultProps.filterItems = filterItems;
 		const data = {
 			data: [
 				{ id: 1, title: "Offline", status: "offline" },
@@ -285,7 +265,13 @@ describe("LiveFilter events", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<LiveFilter {...defaultProps} />
+					<LiveFilter
+						{...makeProps({
+							value: [{ value: "all", label: "All" }],
+							filterOptions: ["offline", "active", "scheduled"],
+							filterItems: filterItems,
+						})}
+					/>
 				</ThemeProvider>,
 			);
 		});

package/src/__tests__/components/TableFilters/StatusFilter/StatusFilter.test.tsx

@@ -10,18 +10,22 @@ import StatusFilter, { IStatusFilterProps } from "@ax/components/TableFilters/St
 import { IQueryValue } from "@ax/types";
 
 afterEach(cleanup);
-const defaultProps = mock<IStatusFilterProps>();
+const makeProps = (overrides: Partial<IStatusFilterProps> = {}): IStatusFilterProps =>
+	Object.assign(mock<IStatusFilterProps>(), overrides);
 describe("StatusFilter component rendering", () => {
 	it("should render date filter", () => {
 		const onClickMock = vi.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
-		defaultProps.sortedState = { isAscending: false, sortedByDate: false, sortedByTitle: false, sortedByURL: false };
-		defaultProps.sortItems = onClickMock;
-		defaultProps.isStructuredData = false;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<StatusFilter {...defaultProps} />
+				<StatusFilter
+					{...makeProps({
+						sortedState: { isAscending: false, sortedByDate: false, sortedByTitle: false, sortedByURL: false },
+						sortItems: onClickMock,
+						isStructuredData: false,
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -33,13 +37,16 @@ describe("StatusFilter component rendering", () => {
 	it("should render interactive arrow if not filter selected", () => {
 		const onClickMock = vi.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
-		defaultProps.sortedState = { isAscending: false, sortedByDate: false, sortedByTitle: false, sortedByURL: false };
-		defaultProps.sortItems = onClickMock;
-		defaultProps.isStructuredData = false;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<StatusFilter {...defaultProps} />
+				<StatusFilter
+					{...makeProps({
+						sortedState: { isAscending: false, sortedByDate: false, sortedByTitle: false, sortedByURL: false },
+						sortItems: onClickMock,
+						isStructuredData: false,
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -50,13 +57,16 @@ describe("StatusFilter component rendering", () => {
 	it("should render FullArrowDown icon if is filtered by most recent", () => {
 		const onClickMock = vi.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
-		defaultProps.sortedState = { isAscending: false, sortedByDate: true, sortedByTitle: false, sortedByURL: false };
-		defaultProps.sortItems = onClickMock;
-		defaultProps.isStructuredData = false;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<StatusFilter {...defaultProps} />
+				<StatusFilter
+					{...makeProps({
+						sortedState: { isAscending: false, sortedByDate: true, sortedByTitle: false, sortedByURL: false },
+						sortItems: onClickMock,
+						isStructuredData: false,
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -68,12 +78,15 @@ describe("StatusFilter component rendering", () => {
 describe("StatusFilter events", () => {
 	it("should render check group on click", () => {
 		const onClickMock = vi.fn();
-		defaultProps.sortedState = { isAscending: false, sortedByDate: false };
-		defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
-			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<StatusFilter {...defaultProps} />
+				<StatusFilter
+					{...makeProps({
+						sortedState: { isAscending: false, sortedByDate: false },
+						sortItems: onClickMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+							((orderPointer: IQueryValue[], isAscendent: boolean) => any),
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -88,12 +101,15 @@ describe("StatusFilter events", () => {
 
 	it("should call sortItems function with 'modified, true' as param when it's not structured data and is ascending", async () => {
 		const onClickMock = vi.fn();
-		defaultProps.sortedState = { isAscending: false, sortedByDate: false };
-		defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
-			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<StatusFilter {...defaultProps} />
+				<StatusFilter
+					{...makeProps({
+						sortedState: { isAscending: false, sortedByDate: false },
+						sortItems: onClickMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+							((orderPointer: IQueryValue[], isAscendent: boolean) => any),
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -114,14 +130,17 @@ describe("StatusFilter events", () => {
 
 	it("should call sortItems function with 'date, true' as param when it's not structured data and is asceding", async () => {
 		const onClickMock = vi.fn();
-		defaultProps.sortedState = { isAscending: false, sortedByDate: false };
-		defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
-			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
-		defaultProps.isStructuredData = true;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<StatusFilter {...defaultProps} />
+				<StatusFilter
+					{...makeProps({
+						sortedState: { isAscending: false, sortedByDate: false },
+						sortItems: onClickMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+							((orderPointer: IQueryValue[], isAscendent: boolean) => any),
+						isStructuredData: true,
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -141,14 +160,17 @@ describe("StatusFilter events", () => {
 
 	it("should call sortItems function with 'modified, false' as param when it's not structured data and is not ascending", async () => {
 		const onClickMock = vi.fn();
-		defaultProps.sortedState = { isAscending: false, sortedByDate: false };
-		defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
-			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
-		defaultProps.isStructuredData = false;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<StatusFilter {...defaultProps} />
+				<StatusFilter
+					{...makeProps({
+						sortedState: { isAscending: false, sortedByDate: false },
+						sortItems: onClickMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+							((orderPointer: IQueryValue[], isAscendent: boolean) => any),
+						isStructuredData: false,
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -169,14 +191,17 @@ describe("StatusFilter events", () => {
 
 	it("should call sortItems function with 'date, false' as param when it's not structured data and is not asceding", async () => {
 		const onClickMock = vi.fn();
-		defaultProps.sortedState = { isAscending: false, sortedByDate: false };
-		defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
-			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
-		defaultProps.isStructuredData = true;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<StatusFilter {...defaultProps} />
+				<StatusFilter
+					{...makeProps({
+						sortedState: { isAscending: false, sortedByDate: false },
+						sortItems: onClickMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+							((orderPointer: IQueryValue[], isAscendent: boolean) => any),
+						isStructuredData: true,
+					})}
+				/>
 			</ThemeProvider>,
 		);
 

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

@@ -11,18 +11,15 @@ import Tabs, { ITabsProps } from "@ax/components/Tabs";
 
 afterEach(cleanup);
 
-const defaultProps = mock<ITabsProps>();
+const makeProps = (overrides: Partial<ITabsProps> = {}): ITabsProps => Object.assign(mock<ITabsProps>(), overrides);
 
 describe("Tabs component rendering", () => {
 	it("should render tabs", () => {
-		defaultProps.tabs = ["tab1", "tab2"];
-		defaultProps.active = "tab1";
 		const setSelectedTabAction = vi.fn();
-		defaultProps.setSelectedTab = setSelectedTabAction;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Tabs {...defaultProps} />
+				<Tabs {...makeProps({ tabs: ["tab1", "tab2"], active: "tab1", setSelectedTab: setSelectedTabAction })} />
 			</ThemeProvider>,
 		);
 
@@ -34,15 +31,13 @@ describe("Tabs component rendering", () => {
 	});
 
 	it("should render an empty tabs row when no tabs or icons", () => {
-		defaultProps.tabs = undefined;
-		defaultProps.icons = undefined;
-		defaultProps.active = "tab1";
 		const setSelectedTabAction = vi.fn();
-		defaultProps.setSelectedTab = setSelectedTabAction;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Tabs {...defaultProps} />
+				<Tabs
+					{...makeProps({ tabs: undefined, icons: undefined, active: "tab1", setSelectedTab: setSelectedTabAction })}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -52,14 +47,11 @@ describe("Tabs component rendering", () => {
 	});
 
 	it("should call set selected tab action on click", async () => {
-		defaultProps.tabs = ["tab1", "tab2"];
-		defaultProps.active = "tab1";
 		const setSelectedTabAction = vi.fn();
-		defaultProps.setSelectedTab = setSelectedTabAction;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Tabs {...defaultProps} />
+				<Tabs {...makeProps({ tabs: ["tab1", "tab2"], active: "tab1", setSelectedTab: setSelectedTabAction })} />
 			</ThemeProvider>,
 		);
 		const tabs = screen.getAllByTestId("tab");
@@ -68,15 +60,17 @@ describe("Tabs component rendering", () => {
 	});
 
 	it("should render tabs row with icons if icons available", async () => {
-		defaultProps.tabs = undefined;
-		defaultProps.icons = [
-			{ name: "edit", text: "Edit mode" },
-			{ name: "view", text: "Preview mode" },
-		];
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Tabs {...defaultProps} />
+				<Tabs
+					{...makeProps({
+						tabs: undefined,
+						icons: [
+							{ name: "edit", text: "Edit mode" },
+							{ name: "view", text: "Preview mode" },
+						],
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -85,15 +79,17 @@ describe("Tabs component rendering", () => {
 	});
 
 	it("should render tabs row with icons if icons available", async () => {
-		defaultProps.tabs = undefined;
-		defaultProps.icons = [
-			{ name: "edit", text: "Edit mode" },
-			{ name: "view", text: "Preview mode" },
-		];
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Tabs {...defaultProps} />
+				<Tabs
+					{...makeProps({
+						tabs: undefined,
+						icons: [
+							{ name: "edit", text: "Edit mode" },
+							{ name: "view", text: "Preview mode" },
+						],
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -104,15 +100,17 @@ describe("Tabs component rendering", () => {
 	});
 
 	it("should render tooltip with icon's text", async () => {
-		defaultProps.tabs = undefined;
-		defaultProps.icons = [
-			{ name: "edit", text: "Edit mode" },
-			{ name: "view", text: "Preview mode" },
-		];
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Tabs {...defaultProps} />
+				<Tabs
+					{...makeProps({
+						tabs: undefined,
+						icons: [
+							{ name: "edit", text: "Edit mode" },
+							{ name: "view", text: "Preview mode" },
+						],
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -124,17 +122,20 @@ describe("Tabs component rendering", () => {
 	});
 
 	it("should not display icon if doesn't exist", async () => {
-		defaultProps.icons = [
-			{ name: "failed-icon", text: "Edit mode" },
-			{ name: "view", text: "Preview mode" },
-		];
-		defaultProps.active = "edit";
 		const setSelectedTabAction = vi.fn();
-		defaultProps.setSelectedTab = setSelectedTabAction;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Tabs {...defaultProps} />
+				<Tabs
+					{...makeProps({
+						icons: [
+							{ name: "failed-icon", text: "Edit mode" },
+							{ name: "view", text: "Preview mode" },
+						],
+						active: "edit",
+						setSelectedTab: setSelectedTabAction,
+					})}
+				/>
 			</ThemeProvider>,
 		);
 		const tooltips = screen.getAllByTestId("tooltip-component");
@@ -147,14 +148,11 @@ describe("Tabs component rendering", () => {
 
 describe("Tabs component events", () => {
 	it("should set tab as active on click", async () => {
-		defaultProps.tabs = ["tab1", "tab2"];
-		defaultProps.active = "tab1";
 		const setSelectedTabAction = vi.fn();
-		defaultProps.setSelectedTab = setSelectedTabAction;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Tabs {...defaultProps} />
+				<Tabs {...makeProps({ tabs: ["tab1", "tab2"], active: "tab1", setSelectedTab: setSelectedTabAction })} />
 			</ThemeProvider>,
 		);
 		const tabs = screen.getAllByTestId("tab");
@@ -165,18 +163,21 @@ describe("Tabs component events", () => {
 	});
 
 	it("should call set selected tab action on click icon tab", async () => {
-		defaultProps.tabs = undefined;
-		defaultProps.icons = [
-			{ name: "edit", text: "Edit mode" },
-			{ name: "view", text: "Preview mode" },
-		];
-		defaultProps.active = "edit";
 		const setSelectedTabAction = vi.fn();
-		defaultProps.setSelectedTab = setSelectedTabAction;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Tabs {...defaultProps} />
+				<Tabs
+					{...makeProps({
+						tabs: undefined,
+						icons: [
+							{ name: "edit", text: "Edit mode" },
+							{ name: "view", text: "Preview mode" },
+						],
+						active: "edit",
+						setSelectedTab: setSelectedTabAction,
+					})}
+				/>
 			</ThemeProvider>,
 		);
 		const tabs = screen.getAllByTestId("icon-tab");
@@ -185,17 +186,20 @@ describe("Tabs component events", () => {
 	});
 
 	it("should set icon tab as active on click", async () => {
-		defaultProps.icons = [
-			{ name: "edit", text: "Edit mode" },
-			{ name: "view", text: "Preview mode" },
-		];
-		defaultProps.active = "edit";
 		const setSelectedTabAction = vi.fn();
-		defaultProps.setSelectedTab = setSelectedTabAction;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Tabs {...defaultProps} />
+				<Tabs
+					{...makeProps({
+						icons: [
+							{ name: "edit", text: "Edit mode" },
+							{ name: "view", text: "Preview mode" },
+						],
+						active: "edit",
+						setSelectedTab: setSelectedTabAction,
+					})}
+				/>
 			</ThemeProvider>,
 		);
 		const tabs = screen.getAllByTestId("icon-tab");

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

@@ -17,18 +17,27 @@ vi.mock("react-router-dom", async () => ({
 	}),
 }));
 
-const defaultProps = mock<IToastProps>();
+const makeProps = (overrides: Partial<IToastProps> = {}): IToastProps => Object.assign(mock<IToastProps>(), overrides);
 
-describe("Toast component rendering", () => {
+// El spy se instala sobre el setTimeout ya falseado, así que el orden importa.
+// Van en hooks (no en el cuerpo del describe) para que se restauren tras cada
+// test: en el cuerpo se ejecutaban una sola vez al recolectar y dejaban los
+// timers falsos y el spy puestos para el resto del fichero.
+beforeEach(() => {
 	vi.useFakeTimers();
 	vi.spyOn(global, "setTimeout");
+});
 
-	it("should render the component", () => {
-		defaultProps.message = "1 module copied to clipboard";
+afterEach(() => {
+	vi.useRealTimers();
+	vi.restoreAllMocks();
+});
 
+describe("Toast component rendering", () => {
+	it("should render the component", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Toast {...defaultProps} />
+				<Toast {...makeProps({ message: "1 module copied to clipboard" })} />
 			</ThemeProvider>,
 		);
 
@@ -37,11 +46,9 @@ describe("Toast component rendering", () => {
 	});
 
 	it("should render the component's message", () => {
-		defaultProps.message = "1 module copied to clipboard";
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Toast {...defaultProps} />
+				<Toast {...makeProps({ message: "1 module copied to clipboard" })} />
 			</ThemeProvider>,
 		);
 
@@ -50,11 +57,9 @@ describe("Toast component rendering", () => {
 	});
 
 	it("should not render the undo button when no action", () => {
-		defaultProps.message = "1 module copied to clipboard";
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Toast {...defaultProps} />
+				<Toast {...makeProps({ message: "1 module copied to clipboard" })} />
 			</ThemeProvider>,
 		);
 
@@ -65,12 +70,9 @@ describe("Toast component rendering", () => {
 
 describe("Toast component events", () => {
 	it("should render the undo button when action", () => {
-		defaultProps.message = "1 module copied to clipboard";
-		defaultProps.action = vi.fn();
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Toast {...defaultProps} />
+				<Toast {...makeProps({ message: "1 module copied to clipboard", action: vi.fn() })} />
 			</ThemeProvider>,
 		);
 
@@ -79,11 +81,9 @@ describe("Toast component events", () => {
 	});
 
 	it("should change visibility after 5000 ms", async () => {
-		defaultProps.message = "1 module copied to clipboard";
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Toast {...defaultProps} />
+				<Toast {...makeProps({ message: "1 module copied to clipboard" })} />
 			</ThemeProvider>,
 		);
 
@@ -92,11 +92,9 @@ describe("Toast component events", () => {
 	});
 
 	it("should contain closing animation class on click close button", async () => {
-		defaultProps.message = "1 module copied to clipboard";
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Toast {...defaultProps} />
+				<Toast {...makeProps({ message: "1 module copied to clipboard" })} />
 			</ThemeProvider>,
 		);
 

package/src/__tests__/modules/FramePreview/FramePreview.test.tsx

@@ -103,6 +103,22 @@ afterEach(() => {
 	vi.restoreAllMocks();
 });
 
+// Los valores por defecto se definen dentro de las factorías de `vi.mock`, que
+// solo corren al cargar el módulo, mientras que el `restoreAllMocks` de arriba
+// los borra tras cada test. Los tests que no fijan los suyos dependían de ser
+// los primeros; aquí se rehacen antes de cada uno.
+beforeEach(() => {
+	(hooks.useURLSearchParam as Mock).mockReturnValue(null);
+	(hooks.useToast as Mock).mockReturnValue({
+		isVisible: false,
+		toggleToast: vi.fn(),
+		setIsVisible: vi.fn(),
+		state: "",
+	});
+	(frameUtils.observeAndAddIdsToHeadings as Mock).mockReturnValue(vi.fn());
+	(frameUtils.observeAndHighlightKeywords as Mock).mockReturnValue(vi.fn());
+});
+
 describe("FramePreview rendering", () => {
 	it("should render Loading when isLoading is true from Redux state", async () => {
 		await renderFramePreview(buildStore({ isLoading: true }));