[Bug]: Jest fails to serialize custom elements with anonymous constructors #15137
Description
Version
latest
Steps to reproduce
Reproduction here:
testing-library/dom-testing-library#1191 (comment)
class MyElement extends HTMLElement {}
window.customElements.define("my-element", class extends MyElement {})
window.customElements.get("my-element").name // => ""
export default () => <my-element></my-element>
test("Render app", () => {
render(<App />)
snapshot()
})Expected behavior
Should properly serialize a custom element to HTML tags
Actual behavior
Renders the entire JS object
https://github.com/KonnorRogers/shoelace-nextjs-lazy/blob/main/app/__snapshots__/page.test.tsx.snap
Additional context
The test function in pretty-format expects the constructor to have a name
jest/packages/pretty-format/src/plugins/DOMElement.ts
Lines 49 to 50 in c54bccd
- export const test: NewPlugin['test'] = (val: any) =>
- val?.constructor?.name && testNode(val);
+ export const test: NewPlugin['test'] = (val: any) =>
+ val?.constructor && testNode(val);Environment
System:
OS: macOS 14.4
CPU: (8) arm64 Apple M1 Pro
Binaries:
Node: 20.9.0 - ~/.asdf/installs/nodejs/20.9.0/bin/node
Yarn: 4.0.1 - ~/.asdf/installs/nodejs/20.9.0/bin/yarn
npm: 10.1.0 - ~/.asdf/plugins/nodejs/shims/npm
pnpm: 9.1.1 - ~/.asdf/installs/nodejs/20.9.0/bin/pnpm
npmPackages:
jest: ^29.7.0 => 29.7.0