【Jest/Testing Library/ next/link】TypeError: Cannot read properties of null (reading ‘push’)

Jest, React Testing Libraryを用いたテスト時に、next/link周りで出たエラーの対処法です。

エラー内容
対処法
1. その１：next/linkをモックする
2. その２：イベントをキャンセルする

エラー内容

TypeError: Cannot read properties of null (reading 'push')

対処法

対処法はどちらでも問題ないです。

その１：next/linkをモックする

jest.mock('next/link', () => ({
  __esModule: true,
  default: function Link({
    href,
    children,
  }: {
    href: string
    children: ReactNode
  }) {
    return (
      <a href={href}>
        {children}
      </a>
    )
  },
}))

その２：イベントをキャンセルする

next/linkの中の要素にクリックイベントを付与した場合などに有効です。
クリックイベントを持つ子要素がクリックされたとき、そのイベントが親要素に伝わるのを防ぐことで、next/link内に存在するpush（エラーが起きている箇所）を発火させません。
あくまでこの方法は、子要素のクリックイベントのテストが最優先事項になってます。

MyLink.test.ts

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { MyLink } from './MyLink'

const setup = (jsx: JSX.Element) => {
  return {
    user: userEvent.setup(),
    ...render(jsx),
  }
}

test('calls click handler when clicking', async () => {
  const mockedClickHandler = jest.fn().mockImplementation((event) => {
    event?.preventDefault()
  })

  const { user } = setup(
    <MyLink
      href="/mylink"
      onClick={mockedClickHandler}
    />
  )

  await user.click(screen.getByRole('link'))

  expect(mockedClickHandler).toHaveBeenCalledTimes(1)
})

MyLink.ts

イベントをキャンセルするために、クリック時の関数はMouseEventHandler型を使用する必要があります。

type Props = {
  href: string
  onClick?: MouseEventHandler<HTMLAnchorElement>
}

export const MyLink = ({ href, onClick }: Props) => {
  return (
    <Link href={href}>
      <a onClick={onClick}>
        Click me!
      </a>
    </Link>
  )
}