diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx index 51521c3c41..10a58a83dc 100644 --- a/src/test/datepicker_test.test.tsx +++ b/src/test/datepicker_test.test.tsx @@ -922,6 +922,9 @@ describe("DatePicker", () => { }); it("should not apply the calendarIconClassname to calendar icon with calendarIconClassName", () => { + // Suppress expected deprecation warning + const warnSpy = jest.spyOn(console, "warn").mockImplementation(() => {}); + const customClassName = "customClassName"; const customClassname = "customClassname"; const { container } = render( @@ -942,9 +945,14 @@ describe("DatePicker", () => { expect(calendarIcon?.classList.contains(customClassName)).toBe(true); expect(calendarIcon?.classList.contains(customClassname)).toBe(false); + + warnSpy.mockRestore(); }); it("should apply the calendarIconClassname to calendar icon without calendarIconClassName", () => { + // Suppress expected deprecation warning + const warnSpy = jest.spyOn(console, "warn").mockImplementation(() => {}); + const customClassname = "customClassName"; const { container } = render( { ); expect(calendarIcon?.classList.contains(customClassname)).toBe(true); + + warnSpy.mockRestore(); }); it("should set the type attribute on the clear button to button", () => { diff --git a/src/test/helper_components/shadow_root.tsx b/src/test/helper_components/shadow_root.tsx index 098d9bb0f6..5b629577be 100644 --- a/src/test/helper_components/shadow_root.tsx +++ b/src/test/helper_components/shadow_root.tsx @@ -1,34 +1,28 @@ import React, { type FC, type PropsWithChildren, - useLayoutEffect, - useRef, + useCallback, useState, } from "react"; -import { createPortal, flushSync } from "react-dom"; +import { createPortal } from "react-dom"; const ShadowRoot: FC = ({ children }) => { const [shadowRoot, setShadowRoot] = useState(null); - const containerRef = useRef(null); - const isInitializedRef = useRef(false); - - useLayoutEffect(() => { - const container = containerRef.current; - if (isInitializedRef.current || !container) { - return; - } - - const root = - container.shadowRoot ?? container.attachShadow({ mode: "open" }); - isInitializedRef.current = true; - // Use flushSync to synchronously update state within effect, avoiding cascading renders - // while ensuring the shadow root is available immediately for tests - flushSync(() => setShadowRoot(root)); - }, []); + const containerRefCallback = useCallback( + (container: HTMLDivElement | null) => { + if (!container) { + return; + } + const root = + container.shadowRoot ?? container.attachShadow({ mode: "open" }); + setShadowRoot(root); + }, + [], + ); return ( -
+
{shadowRoot && createPortal(children, shadowRoot)}
); diff --git a/src/test/index.ts b/src/test/index.ts index fc77b0144f..8d0584819b 100644 --- a/src/test/index.ts +++ b/src/test/index.ts @@ -7,19 +7,22 @@ expect.extend(toHaveNoViolations); const originalError = console.error; beforeAll(() => { console.error = (...args) => { - // Check the first argument (the error message) - const firstArg = args[0]; - const firstArgStr = - typeof firstArg === "string" - ? firstArg - : firstArg instanceof Error - ? firstArg.message - : String(firstArg); + // Convert all arguments to a single string for checking + const fullMessage = args + .map((arg) => + typeof arg === "string" + ? arg + : arg instanceof Error + ? arg.message + : String(arg), + ) + .join(" "); - // Suppress floating-ui act warnings + // Suppress floating-ui act warnings - these come from @floating-ui/react-dom + // internally using flushSync, which is expected behavior if ( - firstArgStr.includes("An update to withFloating(PopperComponent)") && - firstArgStr.includes("inside a test was not wrapped in act") + fullMessage.includes("withFloating(PopperComponent)") && + fullMessage.includes("not wrapped in act") ) { return; }