diff --git a/CHANGELOG.md b/CHANGELOG.md index 823fd6d1d311..8f6a504d25ae 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/packages/pretty-format/src/__tests__/DOMElement.test.ts b/packages/pretty-format/src/__tests__/DOMElement.test.ts index 0c961093ecec..de9a4811e633 100644 --- a/packages/pretty-format/src/__tests__/DOMElement.test.ts +++ b/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 = [ '', '', '

', + '', ].join(''); expect(parent).toPrettyPrintTo( @@ -373,6 +375,7 @@ Testing.`; ' ', + ' ', '', ].join('\n'), ); diff --git a/packages/pretty-format/src/plugins/DOMElement.ts b/packages/pretty-format/src/plugins/DOMElement.ts index ca2fe9631d47..885b30e517b3 100644 --- a/packages/pretty-format/src/plugins/DOMElement.ts +++ b/packages/pretty-format/src/plugins/DOMElement.ts @@ -30,16 +30,21 @@ 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') @@ -47,7 +52,7 @@ const testNode = (val: any) => { }; 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;