cy.react/cy.getreact fail to find component mounted with @cypress/react after 1st test

[DaveHarlow]

Steps to Reproduce:

1. Mount a component in 3 tests in the same file using @cypress/react
2. Use cypress-react-selector to attempt to find the component in each test
3. Run the tests in Cypress

Expected Results
Component found each time

Actual Results
Component is reliably found on the first test, always fails on the second and fails on the 3rd about 2/3rds of the time

I've added an example at https://github.com/DaveHarlow/cypress-react-selector-issue

[abhinaba-ghosh]

Hey @DaveHarlow Thanks for raising the concern with the maximum details possible. Appreciate it. I will spend some time over the weekend to dig deeper.

[chdg61]

Hello.
I have the same problem.
Have you not done this task yet?

I use version 2.3.7

[abhinaba-ghosh]

Hi @chdg61 , i am really busy with day to day activities. But will definitely have a look in the upcoming weekend.

Till then have a look in this example https://github.com/abhinaba-ghosh/cypress-react-selector/blob/master/component/components/ProductsList.spec.js

[chdg61]

OK. I see. I found out a problem. If I use resq$ without this wrapper then I get the same result.
The first test is correct, others are not.

I tried running native resq$ by example:

waitToLoadReact(2000).then(() => {
    const component = resq$('MyComponent');
    console.log('component', component);
});

As result, the first request has returned the correct data as ReactComponent.
But the second request has returned only that object:

{
_nodes: e(0),
}

[abhinaba-ghosh]

Hey @chdg61 you have to mount and waitForReact before each test. Can you confirm the same?

[chdg61]

Yes. I call mount and waitForReact inside a test. Because I have different components and props for render for each test.

I've played with resq$ library and found out that if I use this library without calling waitToLoadReact so it works correctly.

So this library lets use root element as the second argument: resq$('My*Component', root);

After was looking at the code of your library I tried to replace cy.react to cy.get('#__cy_root').react and cy.getReact to cy.get('#__cy_root').getReact. And that has worked as well.

[chdg61]

If I will have free time I will try to make PR to fix it.

Sure, If I can understand all code and context inside the library :)

[abhinaba-ghosh]

@chdg61 , that will be appreciated. Just wanted to check something, have you configured the root inside of your cypress.json file as depicted here

If it is properly defined in the cypress.json, you don't need to place the workaround. The library will take care of it automatically.

[chdg61]

Hm... You are right. I didn't it.

Now it's OK. I've added the environment and remove get("#__cy_root") and it's working.

Thank you.

I think that param of the environment must be required if a user uses @cypress/react

[abhinaba-ghosh]

@chdg61 I am glad that it worked. Thanks again for digging deep into it.

@DaveHarlow I invested in your attached codebase and figured out the root information is missing. Let's add and retry the tests. Feel free to open this ticket if the issue still persists.