CODEWITHSUNDEEP
javascriptreactjsjestjsnext.js
mon-j
mon-j

Reputation: 21

Jest - testing Link (next/link)

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?

Upvotes: 2

Views: 8322

Answers (3)

Effanuel
Effanuel

Reputation: 46

jest.mock('next/link', () => props => require('react').createElement('div', props))

Upvotes: 0

Paul
Paul

Reputation: 393

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

Upvotes: 2

mon-j
mon-j

Reputation: 21

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();
    });
  });

Upvotes: 0

Related Questions