pretty-format fails to catch polyfilled ES5 HTMLElement, OOMs

[gmarinov]

Describe the bug

Code like this still exists in the wild:

https://github.com/stenciljs/core/blob/main/src/client/polyfills/es5-html-element.js , or stable link

Pretty version below (note, in the above, the function name has been dropped):

https://github.com/stenciljs/core/blob/b00bed6ea133dcc6e56be18d8f0f7f716e241ae9/src/client/polyfills/es5-html-element.js#L16-L18

...which then causes pretty-format to miss html elements other than div:

https://github.com/vitest-dev/vitest/blob/main/packages/pretty-format/src/plugins/DOMElement.ts#L44

Because there's no val.constructor.name, just val.constructor.prototype is the original HTMLElement and the function name has not necessarily been set (and is not present in this case). This is fine for custom elements e.g. <my-element>, but elements like <header> break as the HTMLElement prototype has been mashed.

On any complex project, the circular dependencies kill the snapshotter with "invalid string length" as heap exceeds ~1000MB.

I understand this isn't entirely vitest's problem, but legacy NPM libraries like e.g. Duet DS using the above don't change.

Reproduction

StackBlitz: https://stackblitz.com/edit/vitest-dev-vitest-fco5oxj6

System Info

Node 20, 22, 24
React 18
Vitest 2, 3, 4
ESBuild

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.