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 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?

• javascript
• reactjs
• jestjs
• next.js

• 1 Testing links navigate correctly to the expected page should by done at the end-to-end testing level. If what you want is to test that the link it present in the DOM, then simply use queries to look for the element. – juliomalves Commented May 24, 2022 at 18:41

4 Answers 4

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 ponent

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

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

You could mock the original next/link then you can check for it in your code

// import original ponent
import Link from 'next/link'

//override the original link so you can spy on it
jest.mock('next/link', () => ({
  default: vi.fn(({ href, children }) => (
    <a href={href} onClick={(e) => e.preventDefault()}>
      {children}
    </a>
  ))
}))


//now you can test it like this for example
    const homeLink = screen.getByRole('link', { name: 'Home' })
    await userEvent.click(homeLink)
    expect(Link).toHaveBeenCalledWith(
      expect.objectContaining({
        href: '/home'
      }),
      undefined
    )