prettyDom returns incorrect html for form with happy-dom

[gkiely]

• @testing-library/dom version: 6.6.3
• Testing Framework and version: vitest (or any other)
• DOM Environment: happy-dom

Relevant code or config:

https://github.com/gkiely/vite-project/blob/main/src/App.test.tsx

Reproduction:

1. git clone https://github.com/gkiely/vite-project
2. npm i
3. Update package.json: "test": "vitest --environment happy-dom"
4. npm test # incorrect output for happy-dom

Problem description:

Makes it difficult to debug issues

[gkiely]

For reference, using:

render(
  <form role="form">
    <div>test</div>
    <input type="text" />
    <button type="submit">submit</button>
  </form>
);

Input:

const form = screen.getByRole('form');
screen.debug(Array.from(form.children));

Output:

<div>
  test
</div>
<input
  type="text"
/>
<button
  type="submit"
>
  submit
</button>

Input:

const form = screen.getByRole('form');
screen.debug(form);

Output:

bound HTMLFormElement {
  "0": <input
    type="text"
  />,
  "1": <button
    type="submit"
  >
    submit
  </button>,
}