jestjs / jest

Delightful JavaScript Testing.
https://jestjs.io
MIT License
44.12k stars 6.44k forks source link

[Bug]: Jest fails to serialize custom elements with anonymous constructors #15137

Closed KonnorRogers closed 3 months ago

KonnorRogers commented 3 months ago

Version

latest

Steps to reproduce

Reproduction here:

https://github.com/testing-library/dom-testing-library/issues/1191#issue-1465496571

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

https://github.com/jestjs/jest/blob/c54bccd657fb4cf060898717c09f633b4da3eec4/packages/pretty-format/src/plugins/DOMElement.ts#L49-L50

- 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
github-actions[bot] commented 1 month ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.