NextJS Custom Link Component

MyLink.js

import PropTypes from 'prop-types';
import { forwardRef } from 'react';
import NextLink from 'next/link';

const MyLink = forwardRef(({ href, prefetch, className, children }, ref) => (
  <NextLink href={href} prefetch={prefetch} passHref>
    <a className={className} ref={ref}>
      {children}
    </a>
  </NextLink>
));

MyLink.displayName = 'MyLink';

MyLink.propTypes = {
  href: PropTypes.string.isRequired,
  prefetch: PropTypes.bool,
  className: PropTypes.string,
  children: PropTypes.node,
};

MyLink.defaultProps = {
  prefetch: null, // https://nextjs.org/docs/messages/prefetch-true-deprecated
  className: '',
  children: null,
};

export default MyLink;

MyLink.test.js

import React from 'react';
import { render, screen } from '@testing-library/react';

import MyLink from 'components/MyLink';

const text = 'Download';
const href = '/download';
const className = 'my-link';
const childrenElementText = 'Hello, world!';
const childrenElement = <span>{childrenElementText}</span>;

/**
 To thing:
  * Is it possible to test prefetch param and should I test it
  * Is it possible to test forwardRef ref and should I test it
*/

describe('component MyLink', () => {
  it('should render an element with a specific text', () => {
    render(<MyLink href={href}>{text}</MyLink>);

    const textRegExp = new RegExp(text, 'i');

    const link = screen.getByRole('link', {
      name: textRegExp,
    });

    expect(link).toBeInTheDocument();
  });

  it('should render an element with a specific href', () => {
    render(<MyLink href={href}>{text}</MyLink>);

    const link = screen.getByRole('link');

    expect(link).toHaveAttribute('href', href);
  });

  it('should render an element with a specific className', () => {
    render(
      <MyLink className={className} href={href}>
        {text}
      </MyLink>
    );

    const link = screen.getByRole('link');

    expect(link).toHaveAttribute('class', className);
  });

  it('should render an element with specific children', () => {
    render(
      <MyLink href={href}>
        {childrenElement}
      </MyLink>
    );

    const textRegExp = new RegExp(childrenElementText, 'i');

    const children = screen.getByText(textRegExp);

    expect(children).toBeInTheDocument();
  });
});