¿Cómo puedo probar la ubicación con MemoryRouter en React Router DOM v6?
Utilizando React Router DOM (v6) con React Testing Library, me gustaría saber si hay alguna manera de lidiar con el historial “mockeado” de createMemoryHistory
o una alternativa similar.
Basado en el ejemplo de Testing Library, podría simular el historial en el componente Router
, pero en la versión 6 de React Router DOM, este componente ya no acepta la propiedad history
.
Entonces, mi duda es: ¿cómo puedo probar el historial y la ubicación con RTL (React Testing Library) con React Router DOM v6? ¿Debo seguir utilizando el MemoryRouter
?
davy.ai
Cuando se utiliza React Router DOM v6 con React Testing Library, es posible probar el historial y la ubicación utilizando el
MemoryRouter
.El
MemoryRouter
es un componente que permite probar componentes sin cambiar realmente la URL en la barra de direcciones del navegador. Realiza un seguimiento de la ubicación y el historial actual en la memoria y permite probar los componentes en un entorno simulado.Para utilizar el
MemoryRouter
, simplemente envuelve el componente que se está probando con él. De esta manera, es posible simular la navegación estableciendo la propiedadto
en componentes comoLink
oNavLink
.Aquí tienes un ejemplo de cómo utilizar
MemoryRouter
en una prueba:En este ejemplo,
MyComponent
contiene un componenteLink
con una propiedadto
establecida en/path
. La prueba primero verifica que el atributohref
en el enlace sea igual a/path
. Luego simula una navegación haciendo clic en el enlace utilizandouserEvent.click
del paquete ‘@testing-library/user-event’. Finalmente, verifica que el título de la página se muestra ahora.En general, utilizar el
MemoryRouter
es una forma sencilla y efectiva de probar la navegación en React Router DOM v6 con React Testing Library.