Package breaks react testing library out of the box: Invalid insertion of STYLE node
See original GitHub issueIn tooltip/src/index.js, on lines 202 - 208:
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.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:12
- Comments:5
Top Results From Across the Web
Package breaks react testing library out of the box: Invalid ...
When running any basic test using React Testing library on a page that has a Tooltip element, this produces the error: ...
Read more >Package breaks react testing library out of the box: Invalid insertion ...
Package breaks react testing library out of the box : Invalid insertion of STYLE ... querySelector('style[data-react-tooltip]')) { const style = document.
Read more >Setup - Testing Library
If you're running your tests in the browser bundled with webpack (or similar) then React Testing Library should work out of the box...
Read more >React hooks in react library giving Invalid hook call error
Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1....
Read more >Strict Mode - React
It creates a refactoring hazard where you can't change the implementation details of a component because a parent might be reaching into its...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
+1 , I can confirm the same issue - reverting back to 4.2.8 fixed my issue.
The 4.2.17 fixed this issue on my tests