question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

In 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:closed
  • Created 3 years ago
  • Reactions:12
  • Comments:5

github_iconTop GitHub Comments

11reactions
hhorton2commented, Mar 16, 2021

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

1reaction
willemarcelcommented, Apr 13, 2021

The 4.2.17 fixed this issue on my tests

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found