Aplicación.js:
import React from 'react' import { Routes, NavLink, Route } from 'react-router-dom' function App() { return ( <div> <nav> <NavLink to={"/"}>Home</NavLink> <NavLink to={"/about"}>About</NavLink> </nav> <Routes> <Route path="/" element="home page" /> <Route path="/about" element="about page" /> </Routes> </div> ) } export default AppAplicación.prueba.js:
import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { createMemoryHistory } from 'history'; import { Route, Router } from "react-router-dom" import App from './App'; test('first home link', () => { const history = createMemoryHistory({ initialEntries: ["/"] }); render( <Router location={history.location} navigator={history}> <App /> </Router> ); const linkElement = screen.getByRole("link", { name: /about/i }); userEvent.click(linkElement); screen.debug(); });Salida de screen.debug:
<body> <div> <div> <nav> <a aria-current="page" class="active" href="/" > Home </a> <a class="" href="/about" > About </a> </nav> home page </div> </div> </body>la página no cambió a acerca de la página como se ve en la salida de la pantalla. depuración
¿Hay alguna manera de arreglar eso?