Jestでnext/routerをモック化

Jestは、next/routerをテストできません。というわけでモックを作って対応するのですが、素直にモック関数を作るだけでは動いてくれなかったので、備忘録をアウトプットしておきます。

• How to mock useRouter?

モックの作り方

import { useRouter } from 'next/router'

const Example: NextPage = () => {
  const router = useRouter()
  const currentUser = useRecoilValue(currentUserState)

  useEffect(() => {
    currentUser === null && router.push('/login')
  }, [currentUser])

  return (
    <>
      {currentUser ? <Components /> : <Spinner />}
    </>
  )
}

export default Example

import { useRouter } from 'next/router'
import Example from 'components/Example'

jest.mock('next/router', () => ({ useRouter: jest.fn() })) // モック関数を作成

describe(`*****`, () => {
  afterEach(cleanup)

  test('ログインしていないユーザー', async () => {
    const mockRouter = {
      push: jest.fn() // 今回はrouter.pushを利用します
    }

    render(
      <RecoilRoot initializeState={loggedInInit}>
        <Example />
      </RecoilRoot>
    )

    // ログインページへリダイレクトしているか
    expect(mockRouter.push).toHaveBeenCalledWith('/login')
  })
})