Testing con React Router

gistfile1.txt

import { MemoryRouter, Routes, Route } from 'react-router-dom'

const renderWithRouter = (ui, { route = '/' } = {}) => {
  return render(
    <MemoryRouter initialEntries={[route]}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products/:id" element={<ProductDetail />} />
        <Route path="/cart" element={<Cart />} />
      </Routes>
    </MemoryRouter>
  )
}

describe('Navigation Flow', () => {
  it('navega de home a producto y al carrito', async () => {
    const user = userEvent.setup()
    renderWithRouter(<App />)

    // Click en producto
    const productLink = screen.getByRole('link', { name: /view product/i })
    await user.click(productLink)

    // Verifica que está en la página de detalle
    expect(screen.getByRole('heading', { name: /product details/i })).toBeInTheDocument()

    // Agregar al carrito y navegar
    await user.click(screen.getByRole('button', { name: /add to cart/i }))
    
    const cartLink = screen.getByRole('link', { name: /cart/i })
    await user.click(cartLink)

    // Verifica que está en el carrito
    expect(screen.getByRole('heading', { name: /shopping cart/i })).toBeInTheDocument()
  })
})