App.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 App
App.test.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();
});
Output of 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>
the page didn't change to about page like you see on the output the screen.debug
Is there is a way to fix that?