From 98ffa30222c5f124e13df2bbeeca3510fd6abd28 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Mon, 28 Sep 2026 11:43:39 +0200 Subject: [PATCH 1/7] fix contextualmenu tests in react19 --- .../contextual-menu/ContextualMenu.test.tsx | 43 +++++++++++-------- 1 file changed, 24 insertions(+), 19 deletions(-) diff --git a/packages/lib/src/contextual-menu/ContextualMenu.test.tsx b/packages/lib/src/contextual-menu/ContextualMenu.test.tsx index 06958825d0..ea134bc05f 100644 --- a/packages/lib/src/contextual-menu/ContextualMenu.test.tsx +++ b/packages/lib/src/contextual-menu/ContextualMenu.test.tsx @@ -31,12 +31,13 @@ const groups = [ ]; describe("Contextual menu component tests", () => { - test("Single — Renders with correct aria attributes", () => { + test("Single — Renders with correct aria attributes", async () => { + const user = userEvent.setup(); const { getAllByRole, getByRole } = render(); expect(getAllByRole("menuitem").length).toBe(4); const actions = getAllByRole("button"); if (actions[0] != null) { - userEvent.click(actions[0]); + await user.click(actions[0]); } expect(actions[0]?.getAttribute("aria-pressed")).toBeTruthy(); expect(getByRole("menu")).toBeTruthy(); @@ -52,39 +53,41 @@ describe("Contextual menu component tests", () => { const item = getByRole("button"); expect(item.getAttribute("aria-pressed")).toBeTruthy(); }); - test("Group — Group items collapse when clicked", () => { + test("Group — Group items collapse when clicked", async () => { + const user = userEvent.setup(); const { queryByText, getByText } = render(); - userEvent.click(getByText("Grouped Item 1")); + await user.click(getByText("Grouped Item 1")); expect(getByText("Item 1")).toBeTruthy(); expect(getByText("Grouped Item 2")).toBeTruthy(); - userEvent.click(getByText("Grouped Item 2")); + await user.click(getByText("Grouped Item 2")); expect(getByText("Item 2")).toBeTruthy(); expect(getByText("Item 3")).toBeTruthy(); - userEvent.click(getByText("Grouped Item 1")); + await user.click(getByText("Grouped Item 1")); expect(queryByText("Item 1")).toBeFalsy(); expect(queryByText("Item 2")).toBeFalsy(); expect(queryByText("Item 3")).toBeFalsy(); }); - test("Group — Renders with correct aria attributes", () => { + test("Group — Renders with correct aria attributes", async () => { + const user = userEvent.setup(); const { getAllByRole } = render(); const group1 = getAllByRole("button")[0]; if (group1 != null) { - userEvent.click(group1); + await user.click(group1); } expect(group1?.getAttribute("aria-expanded")).toBeTruthy(); expect(group1?.getAttribute("aria-controls")).toBe(group1?.nextElementSibling?.id); const expandedGroupItem1 = getAllByRole("button")[2]; if (expandedGroupItem1 != null) { - userEvent.click(expandedGroupItem1); + await user.click(expandedGroupItem1); } const expandedGroupedItem2 = getAllByRole("button")[6]; if (expandedGroupedItem2 != null) { - userEvent.click(expandedGroupedItem2); + await user.click(expandedGroupedItem2); } expect(getAllByRole("menuitem").length).toBe(10); const optionToBeClicked = getAllByRole("button")[4]; if (optionToBeClicked != null) { - userEvent.click(optionToBeClicked); + await user.click(optionToBeClicked); } expect(optionToBeClicked?.getAttribute("aria-pressed")).toBeTruthy(); }); @@ -99,39 +102,41 @@ describe("Contextual menu component tests", () => { expect(getByText("Tested item")).toBeTruthy(); expect(getAllByRole("button")[1]?.getAttribute("aria-pressed")).toBeTruthy(); }); - test("Group — Collapsed groups render as selected when containing a selected item", () => { + test("Group — Collapsed groups render as selected when containing a selected item", async () => { + const user = userEvent.setup(); const { getAllByRole } = render(); const group1 = getAllByRole("button")[0]; if (group1 != null) { - userEvent.click(group1); + await user.click(group1); } const group2 = getAllByRole("button")[2]; if (group2 != null) { - userEvent.click(group2); + await user.click(group2); } const item = getAllByRole("button")[3]; if (item != null) { - userEvent.click(item); + await user.click(item); } expect(item?.getAttribute("aria-pressed")).toBeTruthy(); expect(group1?.getAttribute("aria-pressed")).toBe("false"); expect(group2?.getAttribute("aria-pressed")).toBe("false"); if (group2 != null) { - userEvent.click(group2); + await user.click(group2); } expect(group2?.getAttribute("aria-pressed")).toBe("true"); if (group1 != null) { - userEvent.click(group1); + await user.click(group1); } expect(group1?.getAttribute("aria-pressed")).toBe("true"); }); - test("Sections — Renders with correct aria attributes", () => { + test("Sections — Renders with correct aria attributes", async () => { + const user = userEvent.setup(); const { getAllByRole, getByText } = render(); expect(getAllByRole("region").length).toBe(2); expect(getAllByRole("menuitem").length).toBe(6); const actions = getAllByRole("button"); if (actions[0] != null) { - userEvent.click(actions[0]); + await user.click(actions[0]); } expect(actions[0]?.getAttribute("aria-pressed")).toBeTruthy(); expect(getAllByRole("menu").length).toBe(2); From 9d9170833551c52c1cb8598aa1f2a9980b7b1585 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Mon, 28 Sep 2026 11:46:04 +0200 Subject: [PATCH 2/7] fix navigation tree tests in react19 --- .../navigation-tree/NavigationTree.test.tsx | 44 +++++++++++-------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/packages/lib/src/navigation-tree/NavigationTree.test.tsx b/packages/lib/src/navigation-tree/NavigationTree.test.tsx index 643172d3cb..7cdfda2168 100644 --- a/packages/lib/src/navigation-tree/NavigationTree.test.tsx +++ b/packages/lib/src/navigation-tree/NavigationTree.test.tsx @@ -31,12 +31,13 @@ const groups = [ ]; describe("Navigation tree component tests", () => { - test("Single — Renders with correct aria attributes", () => { + test("Single — Renders with correct aria attributes", async () => { + const user = userEvent.setup(); const { getAllByRole, getByRole } = render(); expect(getAllByRole("menuitem").length).toBe(4); const actions = getAllByRole("button"); if (actions[0] != null) { - userEvent.click(actions[0]); + await user.click(actions[0]); } expect(actions[0]?.getAttribute("aria-pressed")).toBeTruthy(); expect(getByRole("menu")).toBeTruthy(); @@ -52,39 +53,42 @@ describe("Navigation tree component tests", () => { const item = getByRole("button"); expect(item.getAttribute("aria-pressed")).toBeTruthy(); }); - test("Group — Group items collapse when clicked", () => { + test("Group — Group items collapse when clicked", async () => { + const user = userEvent.setup(); const { queryByText, getByText } = render(); - userEvent.click(getByText("Grouped Item 1")); + await user.click(getByText("Grouped Item 1")); expect(getByText("Item 1")).toBeTruthy(); expect(getByText("Grouped Item 2")).toBeTruthy(); - userEvent.click(getByText("Grouped Item 2")); + await user.click(getByText("Grouped Item 2")); expect(getByText("Item 2")).toBeTruthy(); expect(getByText("Item 3")).toBeTruthy(); - userEvent.click(getByText("Grouped Item 1")); + await user.click(getByText("Grouped Item 1")); expect(queryByText("Item 1")).toBeFalsy(); expect(queryByText("Item 2")).toBeFalsy(); expect(queryByText("Item 3")).toBeFalsy(); }); - test("Group — Renders with correct aria attributes", () => { + test("Group — Renders with correct aria attributes", async () => { + const user = userEvent.setup(); + const { getAllByRole } = render(); const group1 = getAllByRole("button")[0]; if (group1 != null) { - userEvent.click(group1); + await user.click(group1); } expect(group1?.getAttribute("aria-expanded")).toBeTruthy(); expect(group1?.getAttribute("aria-controls")).toBe(group1?.nextElementSibling?.id); const expandedGroupItem1 = getAllByRole("button")[2]; if (expandedGroupItem1 != null) { - userEvent.click(expandedGroupItem1); + await user.click(expandedGroupItem1); } const expandedGroupedItem2 = getAllByRole("button")[6]; if (expandedGroupedItem2 != null) { - userEvent.click(expandedGroupedItem2); + await user.click(expandedGroupedItem2); } expect(getAllByRole("menuitem").length).toBe(10); const optionToBeClicked = getAllByRole("button")[4]; if (optionToBeClicked != null) { - userEvent.click(optionToBeClicked); + await user.click(optionToBeClicked); } expect(optionToBeClicked?.getAttribute("aria-pressed")).toBeTruthy(); }); @@ -99,39 +103,41 @@ describe("Navigation tree component tests", () => { expect(getByText("Tested item")).toBeTruthy(); expect(getAllByRole("button")[1]?.getAttribute("aria-pressed")).toBeTruthy(); }); - test("Group — Collapsed groups render as selected when containing a selected item", () => { + test("Group — Collapsed groups render as selected when containing a selected item", async () => { + const user = userEvent.setup(); const { getAllByRole } = render(); const group1 = getAllByRole("button")[0]; if (group1 != null) { - userEvent.click(group1); + await user.click(group1); } const group2 = getAllByRole("button")[2]; if (group2 != null) { - userEvent.click(group2); + await user.click(group2); } const item = getAllByRole("button")[3]; if (item != null) { - userEvent.click(item); + await user.click(item); } expect(item?.getAttribute("aria-pressed")).toBeTruthy(); expect(group1?.getAttribute("aria-pressed")).toBe("false"); expect(group2?.getAttribute("aria-pressed")).toBe("false"); if (group2 != null) { - userEvent.click(group2); + await user.click(group2); } expect(group2?.getAttribute("aria-pressed")).toBe("true"); if (group1 != null) { - userEvent.click(group1); + await user.click(group1); } expect(group1?.getAttribute("aria-pressed")).toBe("true"); }); - test("Sections — Renders with correct aria attributes", () => { + test("Sections — Renders with correct aria attributes", async () => { + const user = userEvent.setup(); const { getAllByRole, getByText } = render(); expect(getAllByRole("region").length).toBe(2); expect(getAllByRole("menuitem").length).toBe(6); const actions = getAllByRole("button"); if (actions[0] != null) { - userEvent.click(actions[0]); + await user.click(actions[0]); } expect(actions[0]?.getAttribute("aria-pressed")).toBeTruthy(); expect(getAllByRole("menu").length).toBe(2); From 971eb0c36029fb2e36420bf24a05b0d244b90265 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Mon, 28 Sep 2026 12:18:43 +0200 Subject: [PATCH 3/7] fix breadcrumbs tests --- .../lib/src/breadcrumbs/Breadcrumbs.test.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/lib/src/breadcrumbs/Breadcrumbs.test.tsx b/packages/lib/src/breadcrumbs/Breadcrumbs.test.tsx index d04f6af56a..98400eca25 100644 --- a/packages/lib/src/breadcrumbs/Breadcrumbs.test.tsx +++ b/packages/lib/src/breadcrumbs/Breadcrumbs.test.tsx @@ -1,5 +1,4 @@ -import { render } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; +import { fireEvent, render } from "@testing-library/react"; import DxcBreadcrumbs from "./Breadcrumbs"; global.ResizeObserver = jest.fn().mockImplementation(() => ({ @@ -39,7 +38,7 @@ describe("Breadcrumbs component tests", () => { const dropdown = getByRole("button"); expect(queryByText("User Menu")).toBeFalsy(); expect(queryByText("Preferences")).toBeFalsy(); - userEvent.click(dropdown); + fireEvent.click(dropdown); expect(getByText("User Menu")).toBeTruthy(); expect(getByText("Preferences")).toBeTruthy(); }); @@ -51,7 +50,7 @@ describe("Breadcrumbs component tests", () => { expect(queryByText("Home")).toBeFalsy(); expect(queryByText("User Menu")).toBeFalsy(); expect(queryByText("Preferences")).toBeFalsy(); - userEvent.click(dropdown); + fireEvent.click(dropdown); expect(getByText("Home")).toBeTruthy(); expect(getByText("User Menu")).toBeTruthy(); expect(getByText("Preferences")).toBeTruthy(); @@ -73,7 +72,7 @@ describe("Breadcrumbs component tests", () => { ]} /> ); - userEvent.click(getByText("Home")); + fireEvent.click(getByText("Home")); expect(onItemClick).toHaveBeenCalledWith("/home"); }); test("The onClick prop from an item is properly called (collapsed)", () => { @@ -89,8 +88,8 @@ describe("Breadcrumbs component tests", () => { itemsBeforeCollapse={2} /> ); - userEvent.click(getByRole("button")); - userEvent.click(getByText("Preferences")); + fireEvent.click(getByRole("button")); + fireEvent.click(getByText("Preferences")); expect(onItemClick).toHaveBeenCalledWith("/"); }); test("handleOnClick prevents default and calls onClick when href is provided", () => { @@ -105,7 +104,7 @@ describe("Breadcrumbs component tests", () => { /> ); const homeLink = getByText("Home"); - userEvent.click(homeLink); + fireEvent.click(homeLink); expect(onItemClick).toHaveBeenCalledWith("/home"); }); test("handleOnMouseEnter sets title when text overflows", () => { @@ -124,8 +123,7 @@ describe("Breadcrumbs component tests", () => { Object.defineProperty(currentPageElement, "scrollWidth", { value: 200, configurable: true }); Object.defineProperty(currentPageElement, "clientWidth", { value: 100, configurable: true }); - // Simulate mouse enter - userEvent.hover(currentPageElement); + fireEvent.mouseEnter(currentPageElement); // Check if title is set when there's overflow expect(currentPageElement.title).toBe("Very Long Current Page Label That Should Overflow"); From 0f07ca6710954df970c26ac4b93dcccc16b0aba6 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Mon, 28 Sep 2026 12:22:19 +0200 Subject: [PATCH 4/7] fix paginator tests --- packages/lib/src/paginator/Paginator.test.tsx | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/lib/src/paginator/Paginator.test.tsx b/packages/lib/src/paginator/Paginator.test.tsx index 9087431b9b..c6ca804047 100644 --- a/packages/lib/src/paginator/Paginator.test.tsx +++ b/packages/lib/src/paginator/Paginator.test.tsx @@ -1,5 +1,4 @@ -import { render } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; +import { fireEvent, render } from "@testing-library/react"; import DxcPaginator from "./Paginator"; global.ResizeObserver = jest.fn().mockImplementation(() => ({ @@ -55,11 +54,11 @@ describe("Paginator component tests", () => { ); const goToPageSelect = getAllByRole("combobox")[0]; if (goToPageSelect) { - userEvent.click(goToPageSelect); + fireEvent.click(goToPageSelect); } const goToPageOption = getByText("2"); if (goToPageOption) { - userEvent.click(goToPageOption); + fireEvent.click(goToPageOption); } expect(onClick).toHaveBeenCalledWith(2); }); @@ -71,7 +70,7 @@ describe("Paginator component tests", () => { ); const nextButton = getAllByRole("button")[2]; if (nextButton) { - userEvent.click(nextButton); + fireEvent.click(nextButton); } expect(onClick).toHaveBeenCalled(); }); @@ -91,11 +90,11 @@ describe("Paginator component tests", () => { ); const select = getAllByText("10")[0]; if (select) { - userEvent.click(select); + fireEvent.click(select); } const itemPerPageOption = getByText("15"); if (itemPerPageOption) { - userEvent.click(itemPerPageOption); + fireEvent.click(itemPerPageOption); } expect(onClick).toHaveBeenCalledWith(15); }); @@ -108,7 +107,7 @@ describe("Paginator component tests", () => { const nextButton = getAllByRole("button")[2]; expect(nextButton?.hasAttribute("disabled")).toBeTruthy(); if (nextButton) { - userEvent.click(nextButton); + fireEvent.click(nextButton); } expect(onClick).toHaveBeenCalledTimes(0); }); @@ -121,7 +120,7 @@ describe("Paginator component tests", () => { const lastButton = getAllByRole("button")[3]; expect(lastButton?.hasAttribute("disabled")).toBeTruthy(); if (lastButton) { - userEvent.click(lastButton); + fireEvent.click(lastButton); } expect(onClick).toHaveBeenCalledTimes(0); }); @@ -134,7 +133,7 @@ describe("Paginator component tests", () => { const lastButton = getAllByRole("button")[0]; expect(lastButton?.hasAttribute("disabled")).toBeTruthy(); if (lastButton) { - userEvent.click(lastButton); + fireEvent.click(lastButton); } expect(onClick).toHaveBeenCalledTimes(0); }); @@ -147,7 +146,7 @@ describe("Paginator component tests", () => { const lastButton = getAllByRole("button")[1]; expect(lastButton?.hasAttribute("disabled")).toBeTruthy(); if (lastButton) { - userEvent.click(lastButton); + fireEvent.click(lastButton); } expect(onClick).toHaveBeenCalledTimes(0); }); From e3b5d3988da63fbb082e37a1d7431830413c5650 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Mon, 28 Sep 2026 13:44:35 +0200 Subject: [PATCH 5/7] fix dialog tests in react19 --- packages/lib/src/dialog/Dialog.test.tsx | 66 ++++++++++++------------- 1 file changed, 32 insertions(+), 34 deletions(-) diff --git a/packages/lib/src/dialog/Dialog.test.tsx b/packages/lib/src/dialog/Dialog.test.tsx index 0dfb248314..62fb3f7098 100644 --- a/packages/lib/src/dialog/Dialog.test.tsx +++ b/packages/lib/src/dialog/Dialog.test.tsx @@ -1,4 +1,4 @@ -import { fireEvent, render, waitFor } from "@testing-library/react"; +import { fireEvent, render } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import DxcButton from "../button/Button"; import DxcCard from "../card/Card"; @@ -76,7 +76,7 @@ describe("Dialog component tests", () => { ); const calendarAction = getByRole("combobox"); - userEvent.click(calendarAction); + fireEvent.click(calendarAction); fireEvent.keyDown(document.activeElement!, { key: "Escape", code: "Escape", @@ -88,14 +88,15 @@ describe("Dialog component tests", () => { }); describe("Dialog component: Focus lock tests", () => { - test("Close action: when there's no focusable content, the focus never leaves the close action (unless you click outside)", () => { + test("Close action: when there's no focusable content, the focus never leaves the close action (unless you click outside)", async () => { + const user = userEvent.setup({ delay: null }); const onClick = jest.fn(); const { getByRole } = render(example-dialog); const button = getByRole("button"); const dialog = getByRole("dialog"); expect(document.activeElement).toEqual(button); expect(button.getAttribute("aria-label")).toBe("Close dialog"); - userEvent.tab(); + await user.tab(); expect(document.activeElement).toEqual(button); fireEvent.keyDown(dialog, { key: "Tab", shiftKey: true }); expect(document.activeElement).toEqual(button); @@ -202,9 +203,12 @@ describe("Dialog component: Focus lock tests", () => { const inputs = getAllByRole("textbox"); const button = getByRole("button"); expect(document.activeElement).toEqual(inputs[1]); - userEvent.tab(); + const focusGuards = getByRole("dialog").querySelectorAll(":scope > div[tabindex='0']"); + expect(focusGuards).toHaveLength(2); + + fireEvent.focus(focusGuards[0]!); expect(document.activeElement).toEqual(button); - userEvent.tab(); + fireEvent.focus(focusGuards[1]!); expect(document.activeElement).toEqual(inputs[1]); }); test("Focus jumps disabled components and negative tabIndexes when autofocusing first item", () => { @@ -238,13 +242,16 @@ describe("Dialog component: Focus lock tests", () => { const closeAction = getByRole("button"); const textarea = getByRole("textbox"); expect(document.activeElement).toEqual(textarea); - userEvent.tab(); - userEvent.tab(); + const focusGuards = getByRole("dialog").querySelectorAll(":scope > div[tabindex='0']"); + expect(focusGuards).toHaveLength(2); + + fireEvent.focus(focusGuards[0]!); expect(document.activeElement).toEqual(closeAction); - userEvent.tab(); + fireEvent.focus(focusGuards[1]!); expect(document.activeElement).toEqual(textarea); }); - test("'display: none;', 'visibility: hidden;' and 'type = 'hidden'' elements are never autofocused", () => { + test("'display: none;', 'visibility: hidden;' and 'type = 'hidden'' elements are never autofocused", async () => { + const user = userEvent.setup({ delay: null }); // TODO: Solve this // If we don't have an Onclick function, the Close Icon will be a
instead of a