Accessing "nested" components about cypress-react-selector HOT 3 CLOSED

@gregfenton ,

That's a very good use case.

I really don't know if your components undergo minifications or not when it renders in the UI. You can try something like below:

cy.react('MyEmailInput', {input:{name:"workEmail"}}).should(....) // do your job

// or you can go wild card
cy.react('*', {input:{name:"workEmail"}}).should(....)

Now, you can also make use of Chrome React Dev Tools to actually spy on the component and props. I have given a demo here to show how I am getting the component and props for my sample test cases.

If you need further help, would you mind sharing a mini-repo and I can play with that? Let me know if any of these suggestions work for you.

from cypress-react-selector.

I built a simple CRA app and an associated Cypress test spec that uses cy.react().

Hopefully people will find some of the info herein useful. Feel free to borrow or steal into the cypress-react docs or examples however you see fit. See the README for instructions.

https://github.com/gregfenton/example-cypress-react-selector-formik

One recommendation for the cypress-react-selector doc is to have more than just { someBooleanProp: true }, { someBooleanState: true } listed in the examples. It gave me the impression that the properties had to be boolean and primative. This example repo shows that cy.react() is more complex than that.

@abhinaba-ghosh - many thank yous for your contribution!!

from cypress-react-selector.

Hi @gregfenton , your example looks great and definitely will force me to update the manual. Feel free to raise PRs if you see there is a lack in the documentation, example, or process. Again, I cant thank you enough for the working example.

from cypress-react-selector.