In my react application I have a form with a dropdown select. Depending on the selected Option different inputs are rendered.
const [templateType, setTemplateType] = useState(""); const { register, formState: { errors }, setValue, } = useFormContext(); ... <FormControl> <InputLabel>Template Typ</InputLabel> <Select id="SelectTemplateType" className="custom-input" {...register("templateType", { required: true })} label="Template Typ" value={templateType} onChange={(e) => setTemplateType(e.target.value)} error={errors.templateType} > {TEMPLATE_TYPES.map((option) => ( <MenuItem value={option.value}>{option.label}</MenuItem> ))} </Select> {errors.templateType && ( <FormHelperText sx={{ color: "#d32f2f" }}> Eintrag darf nicht leer sein! </FormHelperText> )} </FormControl> <TemplateFormSwitch templateType={templateType} /> The TemplateFormSwitch returns different form-components depending on the selected templateType.
I'm using react-hook-form with FormProvider and useFormContext because my form is split up over multiple components/files.
I tried to write a Cypress-Test, by first clicking the select and then clicking on the desired option:
cy.get('#SelectTemplateType').click({ force: true }) cy.get('[data-value="Text"]').click({ force: true }); //Entering Test values to TextFields cy.get('#mui-1').type("Test"); cy.get('#mui-2').type("HelloWorld"); Then when I try to submit my form all textfields get validated correctly. But somehow the select with the templateType doesn't validate and the submit action gets blocked.
Weirdly when I click manually in the application everything works fine and the templateType select gets validated correctly.
What do I need to do/change in order to test the MUI select correctly and trigger the react-hook-form validation accordingly, like I would if I test manually?
