@griddo/ax 12.3.0 → 12.5.0

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { CalledWithMock, mock } from "jest-mock-extended";
+import { CalledWithMock, mock } from "vitest-mock-extended";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 
 import TypeFilter, { ITypeFilterProps } from "@ax/components/TableFilters/TypeFilter";
@@ -32,7 +32,7 @@ describe("TypeFilter component rendering", () => {
 			},
 		];
 		defaultProps.pointer = "type";
-		defaultProps.filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
+		defaultProps.filterItems = vi.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -66,7 +66,7 @@ describe("TypeFilter events", () => {
 			},
 		];
 		defaultProps.pointer = "type";
-		defaultProps.filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
+		defaultProps.filterItems = vi.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -104,7 +104,7 @@ describe("TypeFilter events", () => {
 			},
 		];
 		defaultProps.pointer = "type";
-		const onChangeMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
+		const onChangeMock = vi.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 		defaultProps.filterItems = onChangeMock;
 
 		render(
@@ -145,7 +145,7 @@ describe("TypeFilter events", () => {
 			},
 		];
 		defaultProps.pointer = "type";
-		const onChangeMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
+		const onChangeMock = vi.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 		defaultProps.filterItems = onChangeMock;
 
 		render(

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { CalledWithMock, mock } from "jest-mock-extended";
+import { CalledWithMock, mock } from "vitest-mock-extended";
 
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 
@@ -14,7 +14,7 @@ afterEach(cleanup);
 const defaultProps = mock<IUsersFilterProps>();
 describe("UsersFilter component rendering", () => {
 	it("should render users filter", () => {
-		const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+		const onClickMock = vi.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
 		defaultProps.sortedState = { isAscending: true, sortedByTitle: false, sortedByUsers: true };
 
@@ -32,7 +32,7 @@ describe("UsersFilter component rendering", () => {
 	});
 
 	it("should render interactive arrow if not filter selected", () => {
-		const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+		const onClickMock = vi.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
 		defaultProps.sortedState = { isAscending: true, sortedByTitle: false, sortedByUsers: false };
 		defaultProps.sortItems = onClickMock;
@@ -48,7 +48,7 @@ describe("UsersFilter component rendering", () => {
 	});
 
 	it("should not render interactive arrow if filter selected", () => {
-		const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+		const onClickMock = vi.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
 		defaultProps.sortedState = { isAscending: false, sortedByTitle: false, sortedByUsers: true };
 		defaultProps.sortItems = onClickMock;
@@ -64,7 +64,7 @@ describe("UsersFilter component rendering", () => {
 	});
 
 	it("should render FullArrowUp icon if is filtered by ascending users", () => {
-		const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+		const onClickMock = vi.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
 		defaultProps.sortedState = { isAscending: true, sortedByTitle: false, sortedByUsers: true };
 		defaultProps.sortItems = onClickMock;
@@ -82,7 +82,7 @@ describe("UsersFilter component rendering", () => {
 
 describe("UsersFilter events", () => {
 	it("should render check group on click", () => {
-		const onClickMock = jest.fn();
+		const onClickMock = vi.fn();
 		defaultProps.sortedState = { isAscending: true, sortedByTitle: false, sortedByUsers: true };
 		defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
@@ -105,7 +105,7 @@ describe("UsersFilter events", () => {
 	});
 
 	it("should call filterItems with isAscending on click 'Ascendent' option", async () => {
-		const onClickMock = jest.fn();
+		const onClickMock = vi.fn();
 		defaultProps.sortedState = { isAscending: true, sortedByTitle: false, sortedByUsers: true };
 		defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);
@@ -129,7 +129,7 @@ describe("UsersFilter events", () => {
 	});
 
 	it("should call filterItems with isAscending false on click 'Descendent' option", async () => {
-		const onClickMock = jest.fn();
+		const onClickMock = vi.fn();
 		defaultProps.sortedState = { isAscending: true, sortedByTitle: false, sortedByUsers: true };
 		defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
 			((orderPointer: IQueryValue[], isAscendent: boolean) => any);

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

@@ -1,16 +1,16 @@
 import * as React from "react";
 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 globalTheme from "@ax/themes/theme.json";
 import TableList, { ITableListProps } from "@ax/components/TableList";
-import { render, cleanup, screen } from "../../../../config/jest/test-utils";
+import { render, cleanup, screen } from "../../../../config/tests/test-utils";
 
 afterEach(() => {
 	cleanup();
-	jest.resetAllMocks();
+	vi.resetAllMocks();
 });
 
 const initialStore = {
@@ -21,7 +21,7 @@ const initialStore = {
 
 const mockStore = configureStore();
 const defaultProps = mock<ITableListProps>();
-const setPage = jest.fn();
+const setPage = vi.fn();
 
 const pagination = { currPage: 1, itemsPerPage: 50, setPage: setPage, totalItems: 3 };
 

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

@@ -1,8 +1,7 @@
 import * as React from "react";
 
-import "jest-styled-components";
 import { ThemeProvider } from "styled-components";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 
@@ -12,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 = jest.fn();
-		defaultProps.setSelectedTab = setSelectedTabAction;
+		const setSelectedTabAction = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Tabs {...defaultProps} />
+				<Tabs {...makeProps({ tabs: ["tab1", "tab2"], active: "tab1", setSelectedTab: setSelectedTabAction })} />
 			</ThemeProvider>,
 		);
 
@@ -35,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 = jest.fn();
-		defaultProps.setSelectedTab = setSelectedTabAction;
+		const setSelectedTabAction = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Tabs {...defaultProps} />
+				<Tabs
+					{...makeProps({ tabs: undefined, icons: undefined, active: "tab1", setSelectedTab: setSelectedTabAction })}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -53,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 = jest.fn();
-		defaultProps.setSelectedTab = setSelectedTabAction;
+		const setSelectedTabAction = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Tabs {...defaultProps} />
+				<Tabs {...makeProps({ tabs: ["tab1", "tab2"], active: "tab1", setSelectedTab: setSelectedTabAction })} />
 			</ThemeProvider>,
 		);
 		const tabs = screen.getAllByTestId("tab");
@@ -69,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>,
 		);
 
@@ -86,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>,
 		);
 
@@ -105,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>,
 		);
 
@@ -125,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 = jest.fn();
-		defaultProps.setSelectedTab = setSelectedTabAction;
+		const setSelectedTabAction = vi.fn();
 
 		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");
@@ -148,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 = jest.fn();
-		defaultProps.setSelectedTab = setSelectedTabAction;
+		const setSelectedTabAction = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Tabs {...defaultProps} />
+				<Tabs {...makeProps({ tabs: ["tab1", "tab2"], active: "tab1", setSelectedTab: setSelectedTabAction })} />
 			</ThemeProvider>,
 		);
 		const tabs = screen.getAllByTestId("tab");
@@ -166,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 = jest.fn();
-		defaultProps.setSelectedTab = setSelectedTabAction;
+		const setSelectedTabAction = vi.fn();
 
 		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");
@@ -186,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 = jest.fn();
-		defaultProps.setSelectedTab = setSelectedTabAction;
+		const setSelectedTabAction = vi.fn();
 
 		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/Tag/Tag.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import { parseTheme } from "@ax/helpers";
@@ -88,7 +88,7 @@ describe("Tag component rendering", () => {
 	it("should render delete icon when onDeleteAction is defined", () => {
 		defaultProps.type = "fixed";
 		defaultProps.text = "Modules";
-		const deleteAction = jest.fn();
+		const deleteAction = vi.fn();
 		defaultProps.onDeleteAction = deleteAction;
 
 		render(
@@ -106,7 +106,7 @@ describe("Tag component events", () => {
 	it("should called deleteAction when click delete button", () => {
 		defaultProps.type = "fixed";
 		defaultProps.text = "Modules";
-		const deleteAction = jest.fn();
+		const deleteAction = vi.fn();
 		defaultProps.onDeleteAction = deleteAction;
 
 		render(

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import { parseTheme } from "@ax/helpers";
 
@@ -10,25 +10,34 @@ import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);
 
-jest.mock("react-router-dom", () => ({
-	...jest.requireActual("react-router-dom"),
+vi.mock("react-router-dom", async () => ({
+	...(await vi.importActual("react-router-dom")),
 	useLocation: () => ({
 		pathname: "localhost:3000/example/path",
 	}),
 }));
 
-const defaultProps = mock<IToastProps>();
+const makeProps = (overrides: Partial<IToastProps> = {}): IToastProps => Object.assign(mock<IToastProps>(), overrides);
 
-describe("Toast component rendering", () => {
-	jest.useFakeTimers();
-	jest.spyOn(global, "setTimeout");
+// 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 = jest.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__/hooks/modals.test.tsx

@@ -327,7 +327,7 @@ describe("useContextMenu hook", () => {
 
 	it("should prevent default when handleContextMenu is called", () => {
 		const { result } = renderHook(() => useContextMenu());
-		const preventDefaultSpy = jest.fn();
+		const preventDefaultSpy = vi.fn();
 
 		const mouseEvent = {
 			preventDefault: preventDefaultSpy,
@@ -347,7 +347,7 @@ describe("useContextMenu hook", () => {
 
 		act(() => {
 			result.current.handleContextMenu({
-				preventDefault: jest.fn(),
+				preventDefault: vi.fn(),
 				clientX: 100,
 				clientY: 200,
 			} as any);
@@ -367,7 +367,7 @@ describe("useContextMenu hook", () => {
 
 		act(() => {
 			result.current.handleContextMenu({
-				preventDefault: jest.fn(),
+				preventDefault: vi.fn(),
 				clientX: 100,
 				clientY: 200,
 			} as any);
@@ -377,7 +377,7 @@ describe("useContextMenu hook", () => {
 
 		act(() => {
 			result.current.handleContextMenu({
-				preventDefault: jest.fn(),
+				preventDefault: vi.fn(),
 				clientX: 300,
 				clientY: 400,
 			} as any);

package/src/__tests__/hooks/users.test.tsx

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import "@testing-library/jest-dom";
 
 import * as reactRedux from "react-redux";
@@ -7,11 +8,11 @@ import type { PageAccessGrantsSummary } from "@ax/types";
 
 import { renderHook } from "@testing-library/react";
 
-jest.mock("react-redux", () => {
-	const actual = jest.requireActual("react-redux");
+vi.mock("react-redux", async () => {
+	const actual = await vi.importActual("react-redux");
 	return {
 		...actual,
-		useSelector: jest.fn(),
+		useSelector: vi.fn(),
 	};
 });
 
@@ -40,14 +41,14 @@ describe("usePermissionsForPage hook", () => {
 		isSuperAdmin: true,
 	};
 
-	const mockUseSelector = useSelector as jest.MockedFunction<typeof useSelector>;
+	const mockUseSelector = useSelector as MockedFunction<typeof useSelector>;
 
 	const setupMockState = (state: any) => {
 		mockUseSelector.mockImplementation((selector: any) => selector(state));
 	};
 
 	beforeEach(() => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	});
 
 	describe("1. User authentication", () => {

package/src/__tests__/modules/FileDrive/MarkdownFormat.test.tsx

@@ -0,0 +1,58 @@
+import "@testing-library/jest-dom";
+
+import { getFileIcon, parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+
+import userEvent from "@testing-library/user-event";
+import type { Middleware } from "redux";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, render, screen } from "./../../../../config/tests/test-utils";
+import FileDragAndDrop from "./../../../modules/FileDrive/FileDragAndDrop";
+import Type from "./../../../modules/FileDrive/FileFilters/Type";
+
+const middlewares: Middleware[] = [thunk];
+const mockStore = configureStore(middlewares);
+
+const store = mockStore({
+	fileDrive: { isUploading: false, isSuccess: false, isError: false, errorMsg: "" },
+});
+
+const renderDragAndDrop = () =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<FileDragAndDrop siteID="global" handleUpload={vi.fn()} />
+		</ThemeProvider>,
+		{ store },
+	);
+
+afterEach(cleanup);
+
+describe("[UC-AX-manage-filedrive-files] Markdown entre los formatos del File Drive", () => {
+	it("AC7 · la zona de subida admite markdown y lo anuncia entre los formatos válidos", () => {
+		const { container } = renderDragAndDrop();
+
+		const fileInput = container.querySelector('input[type="file"]');
+
+		expect(fileInput?.getAttribute("accept")).toContain(".md");
+		expect(container.textContent).toContain("txt, md");
+	});
+
+	it("AC8 · un markdown se representa con su icono propio y se puede filtrar por tipo", async () => {
+		expect(getFileIcon("md")).toBe("markdown.svg");
+		expect(getFileIcon("md")).not.toBe(getFileIcon("unknown-format"));
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<Type filterItems={vi.fn()} />
+			</ThemeProvider>,
+			{ store },
+		);
+
+		await userEvent.click(screen.getByTestId("type-wrapper"));
+
+		expect(screen.getByText("MD")).toBeInTheDocument();
+	});
+});