web component print abnormally in high version node

[Arichy]

trafficstars

• @testing-library/jest-dom version: 5.16.5
• node version: 18.7.0
• yarn version: 1.22.19

• react-testing-library version: 13.4.0

Relevant code or config:

import React, { useEffect } from 'react';
import { screen, render } from '@testing-library/react';
import '@testing-library/jest-dom';

it('test', () => {
  function Test() {
    useEffect(() => {
      window.customElements.define(
        'a-b',
        class extends HTMLElement {
          connectedCallback() {
            this.innerHTML = `4`;
          }
        }
      );
    }, []);

    return <a-b></a-b>;
  }

  render(<Test />);

  screen.debug();
});

What you did:

I'm testing a react component with web component

What happened:

The dom value printed is very large and even throw RangeError: Invalid string length error due to printComplexValue stackoverflow sometimes.

Reproduction:

1. setup as normal
2. write a test case file as Relevant code or config
3. run this test case

Problem description:

The content in web component is too large. But in older node version like node 14, it's normal

Suggested solution:

[mpash]

Version 18 causes a lot of issues with testing, have you tried v16? 14 would be not great from a security standpoint. I also don't see any maintainers on this package updating issues or pushing any updates as of late so this project. Not sure if that means they think things are stable enough to not warrant attention, but the project could have been moved on from. I know I'm reserching options that fit into the current ecosystem and moving away from these kinds of packages myself.

[Arichy]

Version 18 causes a lot of issues with testing, have you tried v16? 14 would be not great from a security standpoint. I also don't see any maintainers on this package updating issues or pushing any updates as of late so this project. Not sure if that means they think things are stable enough to not warrant attention, but the project could have been moved on from. I know I'm reserching options that fit into the current ecosystem and moving away from these kinds of packages myself.

I tried node 16, it also prints a big object.

[mpash]

Bummer. I'm on v16 and haven't seen an issue myself with screen debug but I also tend use the api a little differently. screen.debug(undefined, 1000) is typically how I try and use it. Forgive me if I don't have the perfect answer I just ran into this myself and thought I'd chime in. Lack of responses on the repo as a whole leads me to believe there isn't much else we have access to as a community.