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.

[Bluexin]

Oh sorry, it seemed like something related to this suggestion. I'm not sure how to create a sample page for it as I couldn't find out how to replicate the previous behaviour compared to the new one (and still don't know what caused the shift), but I'll report back if I do.

[AndreyBelym]

@Bluexin thank you for your response, I'll wait for it.

[skylarmb]

I am having the same issue. I just upgraded my library version from 2.x to 3.x.

In the above example,

ReactSelector('MyApp').findReact('PortalSubComponent'); 

used to work. Now it doesn't.

[miherlosev]

@skylarmb

I am afraid this information is not sufficient to find the cause of the issue. Could you please provide a small example so that we can reproduce it on our side?

[skylarmb]

@miherlosev Here is our code that used to work on v2.x that breaks on 3.x

rough template structure (abstracted)

<OurForm>
  <Select name='state'>
    <div>
      <Option>
        <div>CA</div>
      </Option>
    </div>
  </Select>
</OurForm>

const Form = ReactSelector('OurForm');
const StateSelect = Form.findReact('Select').withProps({ name: 'state' });
const StateOption = StateSelect.findReact('Option');
// and in the test...
.click(StateSelect)
.click(StateOption.withText('CA')) // breaks
// ...

This produces this error on .click(StateOption.withText('CA')): the specified selector does not match any node in the DOM tree

To get it work I simply changed

const StateOption = StateSelect.findReact('Option');

to

const StateOption = ReactSelector('Option');

Although this does NOT have the same semantic meaning it does work fine in our case (we never show multiple selects with the same values at the same time).

[aleks-pro]

Hello @skylarmb ,

I have not managed to reproduce the issue. Please check the following example which is based on the information you provided:

import { Selector } from 'testcafe';
import { ReactSelector } from 'testcafe-react-selectors';

fixture `New Fixture`
    .page `https://codesandbox.io/s/react-component-hi2jt`;

test('New Test', async t => {
    await t
        .switchToIframe(Selector('#sandbox'));

    const Form = ReactSelector('OurForm');
    const StateSelect = Form.findReact('Select').withProps({ name: 'state' });
    const StateOption = StateSelect.findReact('Option');

    await t
        .click(StateSelect)
        .click(StateOption.withText('CA'));
});

It works on my side. Could you please change it in a way that we can reproduce the problematic behavior?

[github-actions[bot]]

We're closing this issue after a prolonged period of inactivity. If it still affects you, please add a comment to this issue with up-to-date information. Thank you.