how to test whether a Link from Router worked? Jest/RTL - reactjs

Question

with RTL how do i check the to='/login' in Link to be true since RTL library mainly grabs by testid or text.
current page testing
import React from 'react';
import Proptypes from 'prop-types';
import { Link } from 'react-router-dom';
function Navigation(props) {
return (
<nav className="header__nav">
<Link to="/login">
<button type="button" className="header__login">LOGIN</button>
</Link>
</nav>
);
}
test
describe('Navigation Content', () => {
test('clicking login button', () => {
const props = jest.fn();
const { getByTestId, getByText } = render (
<Navigation popUpHandler={props}/>, { wrapper: MemoryRouter }
);
expect((<Link>).toHaveAttribute('to', '/login')
})
})
page i am trying to render to when clicked
function LoginForm() {
return (
<div className="login">
<h1 className="entryheader__header">Login</h1>
</div>
)
export default LoginForm;

Answer 1

Could you try rendering your component like this:
import { MemoryRouter } from 'react-router-dom'
...
...
const { getByTestId, getByText } = render(<YourComponent {...props}/>, { wrapper: MemoryRouter });
fireEvent.click(getByText('LOGIN'));
expect(getByText('some-text-on-login-page')).toBeInTheDocument();
This will wrap your component with the memory router rather than you doing it manually.
You can also try using BrowserRouter instead of MemoryRouter in your test file..

Answer 2

I wish I had an answer to this question but I do feel like I can say the following:
I wouldn't do
<Link to="/login">
<button type="button" className="header__login">LOGIN</button>
</Link>
because this will render non-valid HTML markup. It breaks accessibility rules to start