ENG-3971: clean up jest console error noise in admin-ui (#8277)

Author: gilluminate

changelog/8277-clean-up-jest-console-noise.yaml

@@ -0,0 +1,4 @@
+type: Developer Experience
+description: Cleaned up jest console error noise in admin-ui.
+pr: 8277
+labels: []

clients/admin-ui/__tests__/jest.setup.ts

@@ -20,21 +20,23 @@ if (
   NodeList.prototype.includes = Array.prototype.includes;
 }
 
-// nwsapi 2.2.18 + jsdom: when antd v6 stylesheets contain `:has()` selectors,
-// the resolver crashes inside `getComputedStyle` (called by Chakra's
-// color-mode-provider on mount). Wrap `getComputedStyle` so a thrown selector
-// returns an empty CSSStyleDeclaration instead of breaking the render.
+// Wrap `getComputedStyle` for two jsdom limitations:
+//   1. jsdom doesn't implement pseudo-element styles, so any `pseudoElt`
+//      argument triggers a "Not implemented: window.computedStyle(elt,
+//      pseudoElt)" log via its VirtualConsole. @rc-component's scrollbar
+//      measurement passes one, so we drop it (pseudo-element styles aren't
+//      available in jsdom anyway).
+//   2. nwsapi 2.2.18 crashes resolving antd v6's `:has()` selectors, so fall
+//      back to an empty CSSStyleDeclaration when the underlying call throws.
 if (typeof window !== "undefined") {
   const originalGetComputedStyle = window.getComputedStyle.bind(window);
-  window.getComputedStyle = ((
-    elt: Element,
-    pseudoElt?: string | null,
-  ): CSSStyleDeclaration => {
+  window.getComputedStyle = ((elt: Element): CSSStyleDeclaration => {
     try {
-      return originalGetComputedStyle(elt, pseudoElt ?? undefined);
+      return originalGetComputedStyle(elt);
     } catch {
       return {
         getPropertyValue: () => "",
+        length: 0,
       } as unknown as CSSStyleDeclaration;
     }
   }) as typeof window.getComputedStyle;
@@ -60,3 +62,30 @@ if (typeof window !== "undefined") {
 }
 
 installMessageChannelMock();
+
+// Filter console.error output for known noise that doesn't indicate a real bug.
+// React passes its warnings as a format string + substitutions (e.g.
+// `console.error("An update to %s inside a test...", "BaseSelect")`), so we
+// match against the unformatted first argument.
+//   - antd List deprecation warning (no drop-in replacement exists yet)
+//   - rc-trigger's "same shadow root" warning (jsdom doesn't implement shadow DOM)
+//   - `NaN` height from antd-x Sender/Bubble.List measuring DOM that jsdom can't lay out
+//   - React `act()` warnings from async updates in antd Select / next/dynamic /
+//     rc-trigger that fire after the test assertion and can't be reasonably awaited
+const SUPPRESSED_CONSOLE_ERRORS = [
+  "[antd: List] The `List` component is deprecated",
+  "trigger element and popup element should in same shadow root",
+  "`NaN` is an invalid value for the `%s` css style property",
+  "An update to %s inside a test was not wrapped in act",
+];
+
+/* eslint-disable no-console */
+const originalConsoleError = console.error;
+console.error = (...args: unknown[]) => {
+  const message = String(args[0] ?? "");
+  if (SUPPRESSED_CONSOLE_ERRORS.some((pattern) => message.includes(pattern))) {
+    return;
+  }
+  originalConsoleError(...args);
+};
+/* eslint-enable no-console */

clients/admin-ui/__tests__/utils/iso-3166-mock.ts

@@ -1,3 +1,5 @@
-export const iso3166 = {
-  esModule: true,
+export const iso3166Mock = {
+  __esModule: true,
+  iso31661: [],
+  iso31662: [],
 };

clients/admin-ui/package.json

@@ -69,7 +69,7 @@
     "motion": "^12.23.26",
     "narrow-minded": "^1.2.1",
     "next": "^16.2.0",
-    "nuqs": "^2.8.8",
+    "nuqs": "^2.8.9",
     "papaparse": "^5.5.3",
     "query-string": "^9.0.0",
     "react": "^19.2.0",

clients/admin-ui/src/features/integrations/configure-jira/__tests__/JiraConfigTab.test.tsx

@@ -40,6 +40,8 @@ jest.mock("fidesui", () => ({
     message,
     description,
     action,
+    showIcon: _showIcon,
+    type: _type,
     ...props
   }: Record<string, unknown>) => (
     <div data-testid="alert" {...props}>
@@ -48,8 +50,17 @@ jest.mock("fidesui", () => ({
       {action as React.ReactNode}
     </div>
   ),
-  Button: ({ children, ...props }: Record<string, unknown>) => (
-    <button type="button" {...props}>
+  Button: ({
+    children,
+    htmlType,
+    loading: _loading,
+    ...props
+  }: Record<string, unknown>) => (
+    <button
+      // eslint-disable-next-line react/button-has-type
+      type={(htmlType as "button" | "submit" | "reset" | undefined) ?? "button"}
+      {...props}
+    >
       {children as React.ReactNode}
     </button>
   ),

clients/admin-ui/tsconfig.json

@@ -37,8 +37,11 @@
   "include": [
     "next-env.d.ts",
     "app-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
+    "*.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "__tests__/**/*.ts",
+    "__tests__/**/*.tsx",
     "**/*.d.ts",
     ".next/types/**/*.ts",
     ".next/dev/types/**/*.ts"