DOM in React snapshot test has changed

[EmiBemi]

Describe the bug
After updating from 15.7.4 to 15.11.0 my React snapshot tests has changed for HTMLSelectElement and HTMLFormElement. The provided screenshot display how it has changed.

Expected behavior
For snapshots I expect the testing DOM to look exactly like the real DOM.

Screenshots

[capricorn86]

Thank you reporting @EmiBemi! 🙂

I have tried to reproduce this by rendering with react-rest-renderer, and React Testing Library and both worked as expected.

What are you using for rendering React in tests?

Since v15 of Happy DOM, HTMLFormElement is a Proxy. There was some bug fixes done where the wrong reference was used and the target element (which is what the proxy is targeting) was referenced. Perhaps the React renderer you are using doesn't like something with the Proxy.

It would be great if you could provide with some example code of how you run the tests.

[EmiBemi]

Thanks for the response @capricorn86.

I use testing-library/react and vitest.

My test looks like this:
expect(render(<App />).asFragment()).toMatchSnapshot();

[cythrawll]

Hi! ran into this in my remix tests. I made a stack blitz that reproduces. https://stackblitz.com/edit/remix-run-remix-o6ajbc?file=test%2F__snapshots__%2FTestComponet.spec.tsx.snap

I hope it helps.

[hi-ogawa]

Vitest uses constructor.name = 'HTMLxxxElement' to test dom serialization https://github.com/vitest-dev/vitest/blob/5e6de2742f329b7e65fe3dff4827b5134d777009/packages/pretty-format/src/plugins/DOMElement.ts#L42-L43, but this doesn't seem to match for some elements. Is it possible to also fake constructor.name for proxies?

Based on the repro above, this is what I see in constructor.name:

https://stackblitz.com/edit/remix-run-remix-ql5k93?file=test%2FTestComponet.spec.tsx

    const { container } = render(<Stub />);
    console.log([
      container.constructor,
      container.constructor.name,
      container.childNodes[0].constructor,
      container.childNodes[0].constructor.name,
    ]);
// [
//   [class HTMLDivElement extends HTMLElement],
//   'HTMLDivElement',
//   [Function: bound HTMLFormElement],
//   'bound HTMLFormElement'
// ]

[psyvision]

Having this exact problem too!

[is-jonreeves]

This is also impacting a number of our applications and is preventing us upgrading to 15. Occurs for us when using: React 18, React-Testing-Library, Vitest 2 and Happy-DOM 15.

[capricorn86]

Thank you for all responses! They really helped when I debugged 🙂

The fix in v16.2.6 should solve the problem.