React-tooltip: Package breaks react testing library out of the box: Invalid insertion of STYLE node

Created on 12 Mar 2021 · 5Comments · Source: wwayne/react-tooltip

In tooltip/src/index.js, on lines 202 - 208:
```javascript
if (!domRoot.querySelector('style[data-react-tooltip]')) {
const style = document.createElement('style');
style.textContent = baseCss;
style.setAttribute('data-react-tooltip', 'true');

  domRoot.appendChild(style);
}

```

When running any basic test using React Testing library on a page that has a Tooltip element, this produces the error: HierarchyRequestError: Invalid insertion of STYLE node in #document node.

I've tried manually adding the baseCss, manually adding style tag, and/or manually adding an attribute on the tooltip itself or its targeted JSX tag with style={{'data-react-tooltip':true}}, to no avail. Commenting out these lines in the package allows the testing suite to run fine, but I'm not sure how to arrange my code so that the querySelector returns a tag and avoids this code block inserting an invalid style node.

Source

halented

👍12

Most helpful comment

+1 , I can confirm the same issue - reverting back to 4.2.8 fixed my issue.

hhorton2 on 16 Mar 2021

👍11

All 5 comments

Also having this problem while trying to update from Version 3.11.6 to 4.2.16 tests that were previously passing are now all failing with this error.