-
-
Notifications
You must be signed in to change notification settings - Fork 28
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Accessing "nested" components #5
Comments
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. |
I built a simple CRA app and an associated Cypress test spec that uses 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 @abhinaba-ghosh - many thank yous for your contribution!! |
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. |
I am using
redux-form
that has a<Field>
component. It actually doesn't render the input, instead it offers acomponent
property where another component is used to render the input. This is a common pattern in React, as it is also seen in Formik's Field element and other places.The issue is that the
<Field>
has aname
property, and the rendered component gets a set of properties passed to it that include that name. In other words, thename
is nested in another property:and
<MyEmailInput>
gets the props:Is there some way to get a selector on MyEmailInput whose input.name property is "workEmail" ? I can't figure out if it is possible or what the syntax would be.
For now I am using
cy.get("input[name=workEmail]")
but then I'm not really exercising the React model, but more the HTML output.The text was updated successfully, but these errors were encountered: