shlogg · Early preview
Peter Jacxsens @lideebe

Testing Custom Hooks In React: A Comprehensive Guide

Testing Custom Hooks in React with Jest & Enzyme: Call hook inside functional component, mock dependencies with jest.mock, useSearchParams & useRouter mocks. Example code covers 4 scenarios for testing custom hook behavior.

Edit: I wrote an updated version of this article. Mocking usePathName, useSearchParams and useRouter with Jest in Next 15.


Here is our custom hook again:

// hooks/useSort.ts
import { SortOrder } from '@/types';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import getSortOrderFromUseSearchParams from '../lib/getSortOrderFromUseSearchParams';
export default function useSort() {
  const params = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();
  const sortOrder = getSortOrderFromUseSearchParams(params);
  const handleSort = (value:...