Fixed a bug when WatchTextContent didnt work with a routed component

[peterhudec]

Description of change

The method to convert React vdom to text was not working when the vdom contained routed components. This PR fixes this by switching back to the original mechanism, but with a reliable way to make the children—which are rendered, but hidden—inaccessible to Cypress.

Also improved tests which also check that the component doesn't throw when unmounted and that it doesn't leak its children to Cypress.

Test instructions

1. Use the component with one of the react-router components:

    <WatchTextContent onTextContentChange={console.log}>
      <Link to="foo">foo</Link>
    </WatchTextContent>

2. There should be no error in the console (before this PR therew would be the "Invariant failed: You should not use <Link> outside a <Router>" error)

Checklist

• Has the branch been rebased to main?
• Automated tests (Any of the following when applicable: Unit, Functional or End-to-End)
• Manual compatibility testing (Browsers: Chrome, Firefox, Edge, Safari)

[cypress]

Passing run #50503 ↗︎

0

76

7

0

0

Details:

Fixed a bug when WatchTextContent didnt work with a routed component
Project: data-hub-frontend	Commit: 600973fa22
Status: Passed	Duration: 08:36 💡
Started: Jan 25, 2024 6:13 PM	Ended: Jan 25, 2024 6:22 PM

Review all test suite changes for PR #6463 ↗︎