Reach Router

import React from 'react'
import {render} from '@testing-library/react'
import {
  Router,
  Link,
  createHistory,
  createMemorySource,
  LocationProvider,
} from '@reach/router'
import '@testing-library/jest-dom'

const About = () => <div>You are on the about page</div>
const Home = () => <div>You are home</div>
const NoMatch = () => <div>No match</div>

function App() {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Router>
        <Home path="/" />
        <About path="/about" />
        <NoMatch default />
      </Router>
    </div>
  )
}

// Muito bem, então aqui está aquilo com qual os teus podem se parecer

// isto é uma função útil que eu utilizaria para qualquer componente
// que depende da estadia do roteador no contexto.
function renderWithRouter(
  ui,
  {route = '/', history = createHistory(createMemorySource(route))} = {},
) {
  return {
    ...render(<LocationProvider history={history}>{ui}</LocationProvider>),
    // adicionar `history` aos utilitários retornados para permitir-nos
    // referenciá-lo nos nossos testes (só tente evitar usar isto para
    // testar os detalhes de implementação).
    history,
  }
}

test('full app rendering/navigating', async () => {
  const {
    container,
    history: {navigate},
  } = renderWithRouter(<App />)
  const appContainer = container
  // normalmente usaria um `data-testid`,
  // mas apenas queria mostrar que isto também é possível
  expect(appContainer.innerHTML).toMatch('You are home')

  // com o `reach-router` não precisamos de simular um evento de clique,
  // podemos apenas transitar para a página usando função de navegação retornada
  // pelo objeto da história.
  await navigate('/about')
  expect(container.innerHTML).toMatch('You are on the about page')
})

test('landing on a bad page', () => {
  const {container} = renderWithRouter(<App />, {
    route: '/something-that-does-not-match',
  })
  // normalmente usaria um `data-testid`,
  // mas apenas queria mostrar que isto também é possível
  expect(container.innerHTML).toMatch('No match')
})

// Se o teu componente de rota tiver parâmetros,
// terás de mudar a função de interpretação um pouco
// exemplo de um componente de rota com parâmetro
const Routes = () => (
  <Router>
    <SomeComponent path="/some-component/:id" />
  </Router>
)

// função de interpretação com o embrulhador Router de `@reach/router`
function renderWithRouterWrapper(
  ui,
  {route = '/', history = createHistory(createMemorySource(route))} = {},
) {
  return {
    ...render(
      <LocationProvider history={history}>
        <Router>{ui}</Router>
      </LocationProvider>,
    ),
    history,
  }
}

test('renders the component with params', () => {
  // terás de declarar a propriedade de caminho no componente,
  // exatamente como a rota
  renderWithRouterWrapper(<SomeComponent path="/some-component/:id" />, {
    // e passar o valor do parâmetro na configuração da rota.
    route: '/some-component/1',
  })
})