Introducción
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
user-event es una biblioteca complementaria de Testing Library que simula interacciones de usuario mediante la emisión de eventos que ocurrirían si la interacción tuviera lugar en un navegador.
Si bien la mayoría de los ejemplos con user-event son para React, la biblioteca puede utilizarse con cualquier framework siempre que exista un DOM.
Diferencias con respecto a fireEvent
fireEvent emite eventos DOM, mientras que user-event simula interacciones completas, que pueden desencadenar múltiples eventos y realizar comprobaciones adicionales durante el proceso.
El fireEvent integrado en Testing Library es un envoltorio ligero alrededor de la API de bajo nivel dispatchEvent del navegador, que permite a los desarrolladores desencadenar cualquier evento en cualquier elemento. El problema es que el navegador generalmente hace más que solo desencadenar un evento por interacción. Por ejemplo, cuando un usuario escribe en un cuadro de texto, el elemento debe recibir el foco, luego se disparan eventos de teclado y entrada, y la selección y el valor del elemento se manipulan mientras escribe.
user-event permite describir una interacción de usuario en lugar de un evento concreto. Agrega comprobaciones de visibilidad e interactividad durante el proceso y manipula el DOM tal como lo haría una interacción de usuario en el navegador. Considera que el navegador, por ejemplo, no permitiría que un usuario haga clic en un elemento oculto o escriba en un cuadro de texto deshabilitado.
Esta es la razón por la que debería usar user-event para probar la interacción con sus componentes.
Sin embargo, existen algunas interacciones de usuario o aspectos de estas que aún no están implementados y, por lo tanto, no pueden describirse con user-event. En estos casos, puede usar fireEvent para emitir los eventos concretos de los que depende su software.
Tenga en cuenta que esto hace que su componente y/o prueba dependan de que sus suposiciones sobre los aspectos concretos de la interacción sean correctas. Por lo tanto, si ya ha trabajado para especificar los aspectos correctos de dicha interacción, considere contribuir a este proyecto para que user-event también pueda cubrir estos casos.
Escribiendo pruebas con userEvent
Recomendamos invocar userEvent.setup() antes de renderizar el componente. Esto puede hacerse en la prueba misma o mediante una función de configuración. Desaconsejamos renderizar o usar funciones de userEvent fuera de la prueba misma (por ejemplo, en un hook before/after) por las razones descritas en "Evite anidar cuando está probando".
import userEvent from '@testing-library/user-event'
// inlining
test('trigger some awesome feature when clicking the button', async () => {
const user = userEvent.setup()
// Import `render` and `screen` from the framework library of your choice.
// See https://testing-library.com/docs/dom-testing-library/install#wrappers
render(<MyComponent />)
await user.click(screen.getByRole('button', {name: /click me!/i}))
// ...assertions...
})
import userEvent from '@testing-library/user-event'
// setup function
function setup(jsx) {
return {
user: userEvent.setup(),
// Import `render` from the framework library of your choice.
// See https://testing-library.com/docs/dom-testing-library/install#wrappers
...render(jsx),
}
}
test('render with a setup function', async () => {
const {user} = setup(<MyComponent />)
// ...
})
Tenga en cuenta que, si bien la invocación directa de API como userEvent.click() (que activará setup internamente) aún es compatible en v14, esta opción existe para facilitar la migración de v13 a v14 y para pruebas simples. Recomendamos utilizar los métodos en las instancias devueltas por userEvent.setup().