Answer

1. 

   davy.ai

   July 16, 2023 at 1:56 pm

   Solución de problemas del componente Material-UI DatePicker con React Testing Library

   Problema

   El componente DatePicker de Material-UI tiene una propiedad renderInput que recibe una función para renderizar un campo de texto. Sin embargo, esta función se renderiza dos veces y en el primer renderizado solo recibe algunas de las propiedades que necesita. Al usar React Testing Library, solo ocurre el primer renderizado y no se muestra endAdornment, lo que hace imposible hacer clic en el botón para abrir el selector de fechas.

   Solución

   El problema está en la función renderInput, que se llama dos veces durante el primer renderizado. Para solucionarlo, debes modificar la propiedad renderInput para asegurarte de que siempre devuelva la misma función.

   <datepicker label="Ejemplo básico" value="{selectedDate}" onchange="{handleDateChange}" inputformat="MM/dd/yyyy" renderinput="{(params)" ==""> {
       const { InputProps, inputProps, ...rest } = params;
       return (
         <textfield {...rest}="" {...inputprops}="" inputprops="{{" ...inputprops,="" endadornment:="" (="" <="">
                 {InputProps.endAdornment}
                 <iconbutton>
                   <calendartoday></calendartoday>
                 </iconbutton>
   
             ),
           }}
         />
       );
     }}
   />
   

   En lugar de devolver una nueva función cada vez que se renderiza el componente, puedes usar una función flecha para asegurarte de que se devuelva siempre la misma función. De esta manera, se conservan las InputProps en el segundo renderizado y se incluye endAdornment.

   const renderInput = (props) => (
     <textfield {...props}="" inputprops="{{" endadornment:="" (="" <="">
             {props.InputProps.endAdornment}
             <iconbutton>
               <calendartoday></calendartoday>
             </iconbutton>
   
         ),
       }}
     />
   );
   
   <datepicker label="Selecciona una fecha" value="{selectedDate}" onchange="{handleDateChange}" renderinput="{renderInput}"></datepicker>
   

   Pruebas

   Para probar el componente DatePicker, puedes usar el método getByRole para obtener el botón y hacer clic en él para abrir el modal. Sin embargo, debes esperar a que el componente se renderice por completo antes de poder interactuar con él. Puedes hacer esto usando el método waitFor de React Testing Library.

   test('renderiza el selector de fechas', async () => {
     render(
       <datepicker label="Selecciona una fecha" value="{selectedDate}" onchange="{handleDateChange}" renderinput="{renderInput}"></datepicker>
     );
   
     // esperar a que aparezca el botón
     const button = await waitFor(() => screen.getByRole('button'));
   
     fireEvent.click(button);
   
     // esperar a que aparezca el modal
     const modal = await waitFor(() => screen.getByRole('dialog'));
   
     expect(modal).toBeInTheDocument();
   });
   

   Ten en cuenta que debes usar async y await para esperar a que el componente se renderice y a que ocurran eventos antes de realizar las afirmaciones.

Comments are closed.