Specify data-cy value to mui textInput helper

jack13 0
Viewed 19

I am trying to set the cypress "data-cy" to an helper text for a mui TextField. I was able to change the style of this helper text by passing a style property to FormHelperTextProps :

FormHelperTextProps={{
                  style: {
                    myStyle
                  },
                }}

But I don't know how to specify a custom prop such as data-cy, I tried to simply add it after style property but does not have a "data-cy" property. Using the classes property to set it has the same issue

react-tsx cypress react-props material-ui testing
1 Answers

You could use inputProps and then pass your data-cy value

<TextField
  // ..
  inputProps={{ "data-cy": "input-xyz" }}
/>

Select in your cypress test

cy.get("[data-cy=input-xyz]").type("foo bar");
hgb1230
Related