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?
I didn't get a reply, but I kind of achieved what I wanted by testing with a snapshot:
describe('Links', () => {
const links = [
<Link href='/'>The React Parks</Link>,
<Link href='/all-parks'>All Parks</Link>,
<<Link href='/new-park'>Add a New Park</Link>
]
it('render correctly', () => {
const tree = renderer.create(links).toJSON();
expect(tree).toMatchSnapshot();
});
});
I solved this by using
jest.mock(
'next/link',
() =>
({ children, ...rest }: { children: ReactElement }) =>
React.cloneElement(children, { ...rest }),
);
That way, the push function of next/link does not fail and the href from next/link is passed to your child component