I am trying to write unit tests to confirm my nav links work correctly.
My MainNavigation.js
file:
import Link from 'next/link';
const MainNavigation = () => {
return (
<header>
<div>
<Link href='/'>The React Parks</Link>
</div>
<nav>
<ul>
<li>
<Link href='/all-parks'>All Parks</Link>
</li>
<li>
<Link href='/new-park'>Add a New Park</Link>
</li>
</ul>
</nav>
</header>
)
};
export default MainNavigation;
My test file:
import '@testing-library/jest-dom'
import { fireEvent, render, screen } from '@testing-library/react';
import MainNavigation from './MainNavigation';
describe('MainNavigation', () => {
describe('links', () => {
jest.mock('next/link', () => ({ children }) => children);
it('should redirect to '/' when clicking on "The React Parks" text', () => {
render(<MainNavigation />);
const parksString = screen.getByText('The React Parks');
fireEvent.click(parksString);
expect(parksString.closest('link')).toHaveAttribute('href', 'https://');
})
});
});
How can I maybe include checking if the URL matches certain string? Or would it make sense to do something like assign a constant to render different pages and expect that constant to match some text on the other pages? How would one go about testing this functionality?