Pruebas de interacción

Para interactuar con una aplicación como usuario, utilice la API userEvent. Consulte los documentos sobre userEvent para obtener más detalles.

Important: En RTL, no se envían eventos directamente a los componentes. Por ejemplo, para seleccionar un valor en el menú desplegable, haga clic en el menú desplegable y, a continuación, haga clic en una de las opciones.

Hacer clic en un botón

Imagine que prueba el siguiente botón:

<Button onClick={handleButtonClick}>{messages.awesomeButtonText}</Button>

Utilice la función click de la siguiente manera:

const theButton = screen.getByRole('button', {
  name: getTranslation('Awesome button'),
});
userEvent.click(theButton); // just a regular click
userEvent.click(theButton, { ctrlKey: true, shiftKey: true }); // Ctrl + Shift + click
userEvent.dblClick(theButton); // double click

Teclado y escritura

Si desea insertar texto en un campo:

const myInput = screen.getByLabelText({
  name: getTranslation('Awesome input'),
});
userEvent.type(myInput, 'The ocean{enter}took my shoe'); // type text with a newline in the middle
userEvent.clear(myInput); // delete the text to see what happens

Si desea simular que el usuario presiona algunas teclas del teclado, use:

userEvent.keyboard('[ShiftLeft][KeyF][KeyO][KeyO]'); // translates to: Shift, f, o, o
userEvent.tab(); // to simulate the Tab key, use the tab() function
userEvent.tab({ shift: true }); // simulate Shift+Tab

Para obtener más ejemplos, consulte los documentos oficiales sobre el teclado.