Add the possibility to search component in a nested component tree

[kirovboris]

[tamlyn]

Is this about being able to do something like ReactSelector('Panel').nth(2).findReact('Button')? If so 👍.

[Yannickvdv]

Is there a workaround for this? in my situation I need to get a child component of a div with multiple 'messages'. As for now im trying to do:

const message = ReactSelector('.MessageList').nth(-1).find('message-body Emojilinkistrippify');

But that results into this error:

1. Cannot obtain information about the node because the specified selector does not match any node in the DOM tree.

Im assuming thats because of this issue?

[kirovboris]

Unfortunately, now it's impossible to get a child component with the .find method. We're currently working to add a corresponding functionality.
For now, you can use a regular Selector or try to search the child component the other way e.g. ReactSelector('Emojilinkistrippify').nth(...).

[lucidtech]

I think I am going to ask the same thing... but slightly differently. It would be nice if ReactSelector returned a ReactSelector. So I can continue breaking down based on React Components instead of switching to regular ol' Selector

const myForm = ReactSelector('Form')
const textFields = myForm('Input').withAttribute('type' : 'text')
const username = textFields.withAttribute('name' : 'username')
const email = textFields.withAttribute('name' : 'email')

[pgoos]

@kirovboris can you re-prioritize this? We have just hit this issue in our project as well:
ReactSelector("smth").nth(index).findReact("smth2")

[kirovboris]

@pgoos, Please check our tests. It already works this way. If you encountered incorrect behavior, please share a simple working example.
 
The issue was about the search for components in React Portal.
E.g.

<MyApp>
    <SomeComponent/>

    <ReactPortal>
        <PortalSubComponent />
    </ReactPortal>
</MyApp>

//Shouldn't work
ReactSelector('MyApp').findReact('PortalSubComponent'); 
//Should work
ReactSelector('ReactPortal').findReact('PortalSubComponent'); 
ReactSelector('PortalSubComponent'); 

[Bluexin]

So I had something real weird happen yesterday, especially seeing the previous comment.
In my tests, using ReactSelector('MyApp').findReact('PortalSubComponent') works.
However using ReactSelector('MyApp').findReact('PortalSubComponent').findReact('SomeSubComponent') used to work, until yesterday. Regardless of whether said SomeSubComponent is a direct subcomponent, or nested deep down.

I'm still investigating to find what changed in our environment, because the relevant libraries weren't updated (AFAIK).

For now, just inserting a .find('*') between findReacts seems to "restore" previous functionality.

[AndreyBelym]

@Bluexin thank you for using TestCafe and the React selectors plugin. If you provide a sample page, we can try to help you find the cause of the problem. But it's better to create a new issue as a bug report to keep this issue focused on the suggested enhancement.