Quiero probar mi siguiente evento Seleccionar y simular en cambio. pero actualmente el onchange no está funcionando. Al seleccionar cierta opción del menú desplegable, quiero mostrar un campo de entrada, pero no puedo simular un evento de cambio. Todo funciona bien en el archivo JSX. pero no se simuló correctamente en el archivo de prueba.

 const accType = watch('accountType'); <Controller control={control} name="accountType" label="Account Type" rules={{ required: true }} render={({ onChange, ref }) => ( <Select onChange={(e) => onChange(e.target.value)} className={styles.w100} defaultValue={bankAccountTypes[0]} > {bankAccountTypes.map((type) => ( <MenuItem key={type} value={type}> {type} </MenuItem> ))} </Select> )} /> { accType === 'NRO Savings Account' ? ( <Grid item={true} xs={12} className={`${styles.fieldItem}`}> <TextField InputLabelProps={{ shrink: true }} className={styles.w100} type="text" name="country" required={true} label="Country" inputRef={register({ required: true })} /> </Grid> ) : null }

A continuación se muestra mi archivo de prueba

 // Country Field should be hidden let country = component.find({ name: 'country' }); expect(country).toHaveLength(0); // Simulate Account type field to display Country Dropdown await act(async () => { accountType.simulate('change', { value: 'NRO Savings Account' }); }); // Country field should be present now country = component.find({ name: 'country' }); expect(country).toHaveLength(1); //Expected length: 1 //Received length: 0

Estoy usando Jest y Enzyme aquí en React