feat: pretty-print web components properly

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ### Features
 
+- `[pretty-format]` Added support for serializing custom elements (web components) ([#10217](https://github.com/facebook/jest/pull/10237))
+
 ### Fixes
 
 - `[expect]` Match symbols and bigints in `any()` ([#10223](https://github.com/facebook/jest/pull/10223))

packages/pretty-format/src/__tests__/DOMElement.test.ts

@@ -344,6 +344,37 @@ Testing.`;
     );
   });
 
+  it('supports custom elements', () => {
+    class CustomElement extends HTMLElement {}
+    class CustomParagraphElement extends HTMLParagraphElement {}
+    class CustomExtendedElement extends CustomElement {}
+
+    customElements.define('custom-element', CustomElement);
+    customElements.define('custom-extended-element', CustomExtendedElement);
+    customElements.define('custom-paragraph', CustomParagraphElement, {
+      extends: 'p',
+    });
+
+    const parent = document.createElement('div');
+    parent.innerHTML = [
+      '<custom-element></custom-element>',
+      '<custom-extended-element></custom-extended-element>',
+      '<p is="custom-paragraph"></p>',
+    ].join('');
+
+    expect(parent).toPrettyPrintTo(
+      [
+        '<div>',
+        '  <custom-element />',
+        '  <custom-extended-element />',
+        '  <p',
+        '    is="custom-paragraph"',
+        '  />',
+        '</div>',
+      ].join('\n'),
+    );
+  });
+
   describe('matches constructor name of SVG elements', () => {
     // Too bad, so sad, element.constructor.name of SVG elements
     // is HTMLUnknownElement in jsdom v9 and v10

packages/pretty-format/src/plugins/DOMElement.ts

@@ -23,17 +23,22 @@ const FRAGMENT_NODE = 11;
 
 const ELEMENT_REGEXP = /^((HTML|SVG)\w*)?Element$/;
 
-const testNode = (nodeType: number, name: string) =>
-  (nodeType === ELEMENT_NODE && ELEMENT_REGEXP.test(name)) ||
-  (nodeType === TEXT_NODE && name === 'Text') ||
-  (nodeType === COMMENT_NODE && name === 'Comment') ||
-  (nodeType === FRAGMENT_NODE && name === 'DocumentFragment');
+const testNode = (val: any) => {
+  const constructorName = val.constructor.name;
+  const {nodeType, tagName = ''} = val;
+  const isCustomElement = tagName.includes('-') || val.hasAttribute?.('is');
+
+  return (
+    (nodeType === ELEMENT_NODE &&
+      (ELEMENT_REGEXP.test(constructorName) || isCustomElement)) ||
+    (nodeType === TEXT_NODE && constructorName === 'Text') ||
+    (nodeType === COMMENT_NODE && constructorName === 'Comment') ||
+    (nodeType === FRAGMENT_NODE && constructorName === 'DocumentFragment')
+  );
+};
 
 export const test: NewPlugin['test'] = (val: any) =>
-  val &&
-  val.constructor &&
-  val.constructor.name &&
-  testNode(val.nodeType, val.constructor.name);
+  val?.constructor?.name && testNode(val);
 
 type HandledType = Element | Text | Comment | DocumentFragment;