Panduan Mocking useRouter Next.js dengan Jest untuk Testing yang Efektif

2 menit baca.
Tags: Next.jsJavaScript

Saat testing komponen Next.js, useRouter bisa merepotkan. Kalau tidak di-mock, test bisa gagal atau susah dikontrol.

Panduan ini menunjukkan pola sederhana yang jalan di kebanyakan setup Jest.

Mock router dasar

const push = jest.fn();

jest.mock('next/router', () => ({
  useRouter: () => ({
    pathname: '/products',
    query: { page: '1' },
    asPath: '/products?page=1',
    push,
    replace: jest.fn(),
    prefetch: jest.fn(),
  }),
}));

Sekarang komponen yang membaca nilai route atau memanggil push sudah bisa di-test.

Assert perilaku navigasi

it('navigates to checkout', () => {
  render(<CheckoutButton />);
  fireEvent.click(screen.getByRole('button', { name: /checkout/i }));
  expect(push).toHaveBeenCalledWith('/checkout');
});

Contoh test dynamic route

Ubah nilai mock untuk satu test tertentu:

(useRouter as jest.Mock).mockReturnValue({
  pathname: '/posts/[slug]',
  query: { slug: 'hello-world' },
  push: jest.fn(),
});

Berguna kalau perilaku komponen bergantung pada route params.

Catatan App Router (Next 13+)

Kalau kodemu memakai next/navigation dan bukan next/router, mock useRouter, usePathname, dan useSearchParams dari package itu.

Idenya sama, import path-nya beda.

Related Posts