Snapshots of Custom Elements are showing JSON-Nodes instead of HTML

[MarcusNotheis]

• @testing-library/react version: 10.0.4
• Testing Framework and version: Jest 24.9.0, inherited from react-scripts@3.4.1
• DOM Environment: JSDOM16, based on jest-environment-jsdom-sixteen@1.0.3

Relevant code or config:

test("without web component", () => {
  const { asFragment } = render(<App />);
  expect(asFragment()).toMatchSnapshot();
});

test("with web component", () => {
  if (!customElements.get("my-webcomponent")) {
    customElements.define("my-webcomponent", MyWebComponent);
  }
  const { asFragment } = render(<App />);
  expect(asFragment()).toMatchSnapshot();
});

What you did:

I have created a react-app, added @testing-library/react and defined a very basic Web Component. I added this Web Component to my App component and I wanted to snapshot test it.

What happened:

When the Web Component is not defined in the customElement registry (1st test), the snapshot is looking like I would have expected:

exports[`without web component 1`] = `
<DocumentFragment>
  <div
    class="App"
  >
    <h1>
      Hello CodeSandbox
    </h1>
    <h2>
      Start editing to see some magic happen!
    </h2>
    <my-webcomponent
      text="This is my Web Component"
    />
  </div>
</DocumentFragment>
`;

When running the second test where I register my Web Component in the customElement registry first, the snapshot contains not longer the HTML representation of my web component but looks like JSON.stringfy-ied node:

exports[`with web component 1`] = `
<DocumentFragment>
  <div
    class="App"
  >
    <h1>
      Hello CodeSandbox
    </h1>
    <h2>
      Start editing to see some magic happen!
    </h2>
    MyWebComponent {
      "anyOtherInstanceAttribute": "123",
    }
  </div>
</DocumentFragment>
`;

Reproduction:

1. Clone/Download this repository: https://github.com/MarcusNotheis/react-testing-library-custom-elements
2. Install node_modules and run the tests

Problem description:

I think this behavior is problematic because Custom Elements should behave just like regular DOM elements while snapshotting (or why isn't the App div then not displayed as HTMLDivElement-node?). In addition to that is it bloating your snapshots and they might be broken all the time because of some auto-incremented id as internal instance properties of custom elements.

Suggested solution:

I'm not sure where exactly the root cause of this issue is ( I would believe it is in @testing-library/react but it could also be a part of @testing-library/dom or even jest).
Maybe there is a possibility to write a Jest serializer which takes care of this issue?

[zaalbarxx]

In my case this bug leads to crashing whole test suite if error is about to being thrown. After some investigation it turned out that testNode implementation of DOMElement happens to check if node constructor has HTML<something>Element (just like

constructor name is HTMLDivElement) name and if it does not then it assumes it is not an DOM node, and since web components can have different constructor name like for example MyWebComponent it just returns false and does not treat web component node as DOMElement.

So findPlugin method will return null leading to the "dumb" method of printing given object by just printing all key/values from this custom web compoment node.

The question is if there should be a change made to pretty-print to somehow extend/change the regex or maybe to create a new plugin for it and add it to plugin list in @testing-library/dom so custom WC could be properly recognized as actual DOMElement.

[kentcdodds]

Thanks for that research. So it looks like this is a problem with jest and snapshots and not testing library, so I'll close this. Thanks!