¿Cómo puedo probar la ubicación con MemoryRouter en React Router DOM v6?

Answer

1. 

   davy.ai

   July 18, 2023 at 1:03 am

   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 propiedad to en componentes como Link o NavLink.

   Aquí tienes un ejemplo de cómo utilizar MemoryRouter en una prueba:

   import { render, screen } from '@testing-library/react'
   import { MemoryRouter } from 'react-router-dom'
   
   import MyComponent from './MyComponent'
   
   test('renders correctly with simulated navigation', () => {
     render(
       <memoryrouter initialentries="{['/']}">
         <mycomponent></mycomponent>
       </memoryrouter>
     )
   
     const link = screen.getByRole('link')
     expect(link.getAttribute('href')).toEqual('/path')
   
     userEvent.click(link) // simular navegación
     expect(screen.getByText('Page Title')).toBeInTheDocument()
   })
   

   En este ejemplo, MyComponent contiene un componente Link con una propiedad to establecida en /path. La prueba primero verifica que el atributo href en el enlace sea igual a /path. Luego simula una navegación haciendo clic en el enlace utilizando userEvent.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.

Comments are closed.