¿Cómo puedo escribir en la entrada de TextField en el selector de fechas de MUI con el user-event react-testing-library? Puedo ver que se está aplicando una máscara
userEvent.type(inputEl, '1') y userEvent.keyboard('1') . En ambos casos, la entrada permanece vacía.
Mi suposición actual es que una nueva representación reemplaza mi actualización con el estado vacío de un componente de orden superior (lo que tiene sentido, según la aplicación, la máscara de formato de fecha a la entrada).
El ejemplo de documentación funciona como se esperaba, por lo que mi problema es específico del selector de fechas de MUI .
Se puede encontrar una versión reducida del componente (y la prueba) en este sandbox .
A continuación se muestra una copia del HTML renderizado para demostrar que estoy apuntando al elemento de entrada con un data-testid , que no funciona:
screen.getByTestId('date-selector-text-field').outerHTML: <input aria-invalid="false" placeholder="dd / mm / yyyy" readonly="" type="text" aria-readonly="true" aria-label="Choose date" data-testid="date-selector-text-field" class="MuiOutlinedInput-input MuiInputBase-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input" value="" aria-describedby="mui-1-helper-text" id="mui-1" >Agregué lo siguiente para asegurarme de que DatePicker se represente para un escritorio en la prueba. Puede encontrar más información sobre eso aquí: https://github.com/mui/material-ui-pickers/issues/2073#issuecomment-671834179
beforeAll(() => { // add window.matchMedia // this is necessary for the date picker to be rendered in desktop mode. // if this is not provided, the mobile mode is rendered, which might lead to unexpected behavior Object.defineProperty(window, "matchMedia", { writable: true, value: (query: any) => ({ media: query, // this is the media query that @material-ui/pickers uses to determine if a device is a desktop device matches: query === "(pointer: fine)", onchange: () => null, addEventListener: () => null, removeEventListener: () => null, addListener: () => null, removeListener: () => null, dispatchEvent: () => false, }), }); }); afterAll(() => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore delete window.matchMedia; }); En caso de que ya tenga un valor en Datepicker, cuando llame a userEvent.type() , agregue await userEvent.clear() antes de await userEvent.type() . Se necesita borrar, porque estamos simulando el comportamiento real del usuario, y no puede escribir algo, si ya tiene un valor (que sí tengo en mi caso de prueba).