bug: Tests are not rendered properly after version > 4.6.0

[Zorkann]

Prerequisites

• I know how to contribute a proper bug report.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Liquid version

4.6.0 and above

Framework bindings

React

Current behavior

Looks like RTL cannot render liquid components properly. When we are using defineCustomElements() in tests it renders plain JSX element instead of HTML tag but only for some specific tags like <article> | <section> |<header>|<footer> etc. Before version 4.6.0 we did not use defineCustomElements() and everything was rendered properly. Because of that we are not able to generate snapshots and write tests for elements which are children of liquid elements.

1. Using defineCustomElements() and using <article> = invalid
2. Using defineCustomElements() and using <div> = valid
3. Not using defineCustomElements() and using <article> = valid
4. Not using defineCustomElements() and using <div> = valid
5. Not using defineCustomElements() and using <LdCard><article></LdCard> = invalid // Was valid on previous versions
6. Not using defineCustomElements() and using <LdCard><div></LdCard> = valid

So the behaviour is really weird and inconsistent.

Expected behavior

All components and html tags should be rendered properly in jest-dom.

Steps to reproduce

1. Run tests in codesandbox and see different results in the console
2. Follow the comments in the App.test.tsx and test all the cases

Code reproduction URL

https://codesandbox.io/p/github/emdgroup-liquid/liquid-sandbox-cra-tailwind/csb-lqyi2w/draft/fervent-curran?file=/src/App.test.tsx:15,4&selection=[{%22endColumn%22:52,%22endLineNumber%22:8,%22startColumn%22:52,%22startLineNumber%22:8}]

Additional information

No response

[borisdiakur]

TODO:

• Check if this is somehow related to Serializing anonymous classes of custom elements doesnt work with prettyDOM. testing-library/dom-testing-library#1191
  Nope, not related.

• Check first line of code in node_modules/@emdgroup-liquid/liquid/dist/loader/index.js, which seems to be the root cause of the issue:

  // formatted first line of code
  (function () {
    if ("undefined" !== typeof window && void 0 !== window.Reflect && void 0 !== window.customElements) {
      var a = HTMLElement;
      window.HTMLElement = function () {
        return Reflect.construct(a, [], this.constructor)
      };
      HTMLElement.prototype = a.prototype;
      HTMLElement.prototype.constructor = HTMLElement;
      Object.setPrototypeOf(HTMLElement, a)
    }
  })();

  The purpose of this code appears to be to ensure that the HTMLElement constructor works correctly with the customElements API and can be used to define new custom elements in certain environments, which do not support this behavior out of the box. Most likely this is some ES5 related polyfill and we should find a way to get rid of it as it is only needed for old browsers (IE11 and below). It is already possible to import { defineCustomElements } from '@emdgroup-liquid/liquid/dist/loader/index.es2017.js' but it's kinda ugly to use this import. It should actually be used by default as the package.json within the loader is pointing to it. Maybe the actual problem is, that the react output target related code is importing the polyfilled loader...

[borisdiakur]

🎉 This issue has been resolved in version 5.4.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

📦🚀