Support anonymous custom element constructors (#15138)

CHANGELOG.md

@@ -69,6 +69,7 @@
 - `[jest-runtime]` Properly handle re-exported native modules in ESM via CJS ([#14589](https://github.com/jestjs/jest/pull/14589))
 - `[jest-util]` Make sure `isInteractive` works in a browser ([#14552](https://github.com/jestjs/jest/pull/14552))
 - `[pretty-format]` [**BREAKING**] Print `ArrayBuffer` and `DataView` correctly ([#14290](https://github.com/jestjs/jest/pull/14290))
+- `[pretty-format]` Fixed a bug where "anonymous custom elements" were not being printed as expected. ([#15138](https://github.com/jestjs/jest/pull/15138))
 - `[jest-cli]` When specifying paths on the command line, only match against the relative paths of the test files ([#12519](https://github.com/jestjs/jest/pull/12519))
   - [**BREAKING**] Changes `testPathPattern` configuration option to `testPathPatterns`, which now takes a list of patterns instead of the regex.
   - [**BREAKING**] `--testPathPattern` is now `--testPathPatterns`

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

@@ -357,12 +357,14 @@ Testing.`;
     customElements.define('custom-paragraph', CustomParagraphElement, {
       extends: 'p',
     });
+    customElements.define('anonymous-element', class extends HTMLElement {});
 
     const parent = document.createElement('div');
     parent.innerHTML = [
       '<custom-element></custom-element>',
       '<custom-extended-element></custom-extended-element>',
       '<p is="custom-paragraph"></p>',
+      '<anonymous-element></anonymous-element>',
     ].join('');
 
     expect(parent).toPrettyPrintTo(
@@ -373,6 +375,7 @@ Testing.`;
         '  <p',
         '    is="custom-paragraph"',
         '  />',
+        '  <anonymous-element />',
         '</div>',
       ].join('\n'),
     );

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

@@ -30,24 +30,29 @@ const testHasAttribute = (val: any) => {
   }
 };
 
+const isCustomElement = (val: any) => {
+  const tagName = val?.tagName;
+  return (
+    (typeof tagName === 'string' && tagName.includes('-')) ||
+    testHasAttribute(val)
+  );
+};
+
 const testNode = (val: any) => {
   const constructorName = val.constructor.name;
-  const {nodeType, tagName} = val;
-  const isCustomElement =
-    (typeof tagName === 'string' && tagName.includes('-')) ||
-    testHasAttribute(val);
+  const {nodeType} = val;
 
   return (
     (nodeType === ELEMENT_NODE &&
-      (ELEMENT_REGEXP.test(constructorName) || isCustomElement)) ||
+      (ELEMENT_REGEXP.test(constructorName) || isCustomElement(val))) ||
     (nodeType === TEXT_NODE && constructorName === 'Text') ||
     (nodeType === COMMENT_NODE && constructorName === 'Comment') ||
     (nodeType === FRAGMENT_NODE && constructorName === 'DocumentFragment')
   );
 };
 
 export const test: NewPlugin['test'] = (val: any) =>
-  val?.constructor?.name && testNode(val);
+  (val?.constructor?.name || isCustomElement(val)) && testNode(val);
 
 type HandledType = Element | Text | Comment | DocumentFragment;