React unit tests failing with node 16

[ashleyryan]

Describe the bug

Something in node 16 can make jest snapshot tests (or any tests that log the output of the dom) fail in node 16. Unfortunately, it appears to be the combination of node 16 plus some other setting/dependency because it doesn't happen all the time with node 16.

How to reproduce

This happens in

https://github.com/steve-haar/core/tree/topic/beta-repo-redo

Steps to reproduce the behavior:

1. nvm use 16
2. npm install
3. npm build:ci

Note that the react snapshot tests fail for tests that have nested web-components.

Expected behavior

Versions

Clarity project:

• Clarity Core
• Clarity Angular/UI

Clarity version:

• v3.x
• v4.x
• v5.x
• v6.x

Framework:

• Angular
• React
• Vue
• Other:

Additional notes

In the clarity react tests, it only seems to happen with nested web components (Accordion in AccordionGroup, for example). But others have reported it happening with CdsTag, CdsInput, etc.

[ssapra]

I was able to reproduce it with just CdsInput in https://github.com/ssapra/log-cds-repro.

jest 27, jest-dom 5.16.4, react 17, typescript 4.6

[ashleyryan]

I can reproduce this with jsdom and pretty-format (the library jest uses to format/log the dom output): https://github.com/ashleyryan/jsdom-starter/tree/dom-format

The .txt files show the difference between node 14 and node 16

However, when I copy/paste the component code into the repo directly (I tried with cds-card), it prints fine. The only difference is that I don't have the styles imported from scss files

[steve-haar]

Also, this project will not build on Windows with Node 14, but will build on Windows with Node 16. So, once we get this issue fixed and update Node, the Windows build will work.

[ashleyryan]

Thanks for the repro repo @ssapra. I pulled it down and tried it with one of our v6 beta versions and it runs fine in node 16 there. So this only seems to be an issue with v5 - and at this point here have been too many changes in v6 for me to isolate the exact change to backport it to v5.

We expect to release v6 this week, so once you upgrade you'll be able to use node 16

[ssapra]

Thanks for the follow up. You're right, I tried the v6 beta and it runs fine. We'll upgrade to node 16 after we can upgrade core/react to v6.

Might want to update the list of affected Clarity versions in the description to v5.

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.