Accessing "nested" components

[gregfenton]

I am using redux-form that has a <Field> component. It actually doesn't render the input, instead it offers a component 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 a name property, and the rendered component gets a set of properties passed to it that include that name. In other words, the name is nested in another property:

   <Field name="workEmail" component={MyEmailInput} ... />

and <MyEmailInput> gets the props:

   input: { name: "workEmail", onBlur = f(), onChange = f(), ... },
   meta: { active: false, autofill: true, ... },

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.

[abhinaba-ghosh]

@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.

[gregfenton]

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!!

[abhinaba-ghosh]

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.