perf(pretty-format): combine DOMElement plugins (#9581)

sheremet-va · web-flow · commit da85a32670f9 · 2026-02-04T10:16:44.000+01:00
diff --git a/packages/pretty-format/src/index.ts b/packages/pretty-format/src/index.ts
@@ -30,7 +30,7 @@ import Immutable from './plugins/Immutable'
 import ReactElement from './plugins/ReactElement'
 import ReactTestComponent from './plugins/ReactTestComponent'
 
-export { createDOMElementFilter } from './plugins/DOMElementFilter'
+export { createDOMElementFilter } from './plugins/DOMElement'
 
 const toString = Object.prototype.toString
 const toISOString = Date.prototype.toISOString
diff --git a/packages/pretty-format/src/plugins/DOMElement.ts b/packages/pretty-format/src/plugins/DOMElement.ts
@@ -65,14 +65,40 @@ function nodeIsFragment(node: HandledType): node is DocumentFragment {
   return node.nodeType === FRAGMENT_NODE
 }
 
-export const serialize: NewPlugin['serialize'] = (
+export interface FilterConfig extends Config {
+  filterNode?: (node: any) => boolean
+}
+
+function filterChildren(children: any[], filterNode?: (node: any) => boolean): any[] {
+  // Filter out text nodes that only contain whitespace to prevent empty lines
+  // This is done regardless of whether a filterNode is provided
+  let filtered = children.filter((node) => {
+    // Filter out text nodes that are only whitespace
+    if (node.nodeType === TEXT_NODE) {
+      const text = node.data || ''
+      // Keep text nodes that have non-whitespace content
+      return text.trim().length > 0
+    }
+    return true
+  })
+
+  // Apply additional user-provided filter if specified
+  if (filterNode) {
+    filtered = filtered.filter(filterNode)
+  }
+
+  return filtered
+}
+
+function serializeDOM(
   node: HandledType,
   config: Config,
   indentation: string,
   depth: number,
   refs: Refs,
   printer: Printer,
-) => {
+  filterNode?: (node: any) => boolean,
+) {
   if (nodeIsText(node)) {
     return printText(node.data, config)
   }
@@ -89,6 +115,14 @@ export const serialize: NewPlugin['serialize'] = (
     return printElementAsLeaf(type, config)
   }
 
+  const children = Array.prototype.slice.call(node.childNodes || node.children)
+  const shadowChildren = (nodeIsFragment(node) || !node.shadowRoot)
+    ? []
+    : Array.prototype.slice.call(node.shadowRoot.children)
+
+  const resolvedChildren = filterNode ? filterChildren(children, filterNode) : children
+  const resolvedShadowChildren = filterNode ? filterChildren(shadowChildren, filterNode) : shadowChildren
+
   return printElement(
     type,
     printProps(
@@ -110,11 +144,11 @@ export const serialize: NewPlugin['serialize'] = (
       refs,
       printer,
     ),
-    ((nodeIsFragment(node) || !node.shadowRoot)
-      ? ''
-      : printShadowRoot(Array.prototype.slice.call(node.shadowRoot.children), config, indentation + config.indent, depth, refs, printer))
+    (resolvedShadowChildren.length > 0
+      ? printShadowRoot(resolvedShadowChildren, config, indentation + config.indent, depth, refs, printer)
+      : '')
     + printChildren(
-      Array.prototype.slice.call(node.childNodes || node.children),
+      resolvedChildren,
       config,
       indentation + config.indent,
       depth,
@@ -126,6 +160,29 @@ export const serialize: NewPlugin['serialize'] = (
   )
 }
 
+export const serialize: NewPlugin['serialize'] = (
+  node: HandledType,
+  config: Config,
+  indentation: string,
+  depth: number,
+  refs: Refs,
+  printer: Printer,
+) => serializeDOM(node, config, indentation, depth, refs, printer)
+
+export function createDOMElementFilter(filterNode?: (node: any) => boolean): NewPlugin {
+  return {
+    test,
+    serialize: (
+      node: HandledType,
+      config: Config,
+      indentation: string,
+      depth: number,
+      refs: Refs,
+      printer: Printer,
+    ) => serializeDOM(node, config, indentation, depth, refs, printer, filterNode),
+  }
+}
+
 const plugin: NewPlugin = { serialize, test }
 
 export default plugin
diff --git a/packages/pretty-format/src/plugins/DOMElementFilter.ts b/packages/pretty-format/src/plugins/DOMElementFilter.ts
