Bad diff output on DOM objects

[tuhm1]

Describe the bug

The diff function doesn't work on DOM objects because they have a special output format.

AssertionError: expected <div><img></img></div> to match object { tagName: 'DIV', id: 'root', …(2) }

- Expected
+ Received

- Object {
-   "children": Object {
-     "0": Object {
-       "src": "http://url.com/",
-       "tagName": "IMG",
-     },
-     "1": Object {
-       "tagName": "BUTTON",
-       "textContent": "Go",
-     },
-     "length": 2,
-   },
-   "className": "d-flex",
-   "id": "root",
-   "tagName": "DIV",
- }
+ <div>
+   <img />
+ </div>

Ideally, I think only differing property values should be shown.

Reproduction

const node = document.createElement("div");
node.append(document.createElement("img"));

expect(node).toMatchObject({
  tagName: "DIV",
  id: "root",
  className: "d-flex",
  children: {
    length: 2,
    [0]: { tagName: "IMG", src: "http://url.com/" },
    [1]: { tagName: "BUTTON", textContent: "Go" },
  },
});

StackBlitz

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @vitest/ui: latest => 2.1.5 
    vite: latest => 5.4.11 
    vitest: latest => 2.1.5

Used Package Manager

npm

Validations

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