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.

React selector not finding component if it is inside nested root container

See original GitHub issue

This is not an issue if it is react 15 , since it is relying on data-reactroot attribute on the element and const rootEls = []'[data-reactroot]')); this code will find all nested root containers.

In react 16 the way to identify root container is using object key el._reactRootContainer and getRootElsReact16(el) only looking for peers not nested containers. For e.g. it will work in below structure <body> <div/> // First root container <div/> // Second root container (peer of first) … </body>

Will not work in below structure (In this case it will find components that is part of first root container , not from second and Third root container) <body> <div> // First root container <div> // Second root container (Nested inside First) </div> <div>// Not a react container </div> <div> // Third root container (Nested inside First) </div> </div> </body>

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

AndreyBelymcommented, Jan 8, 2020

Thank you for the example, I’ve reproduced the issue.

franklinjosecommented, Jan 13, 2020

Thank you that was quick!!

On Mon, Jan 13, 2020 at 4:37 AM Boris Kirov wrote:

Published testcafe-react-selectors@4.0.0

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe .

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS not working for nested routing in react js - Stack Overflow
My CSS file giving status code of 500 on nested routes in react-router-dom but working fine with root route. error on reading css...
Read more >
Testing Nested Container Components in React with Redux
While writing tests for my react-connected components, I discovered a few issue with how to test nested containers.
Read more >
Hooks FAQ - React
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. This page...
Read more >
find | Cypress Documentation
A selector used to filter matching descendent DOM elements. options (Object). Pass in an options object to change the default behavior of .find()...
Read more >
5. Working with the Shadow DOM - Modern JavaScript [Book]
Shadow root child nodes are not returned by DOM queries even if a child node matches the given query selector. Creating a shadow...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found