Bun test for urlHelper custom react hook

urlHelper.test.ts

import { renderHook } from '@testing-library/react'
import { describe, expect, it, spyOn } from 'bun:test'
import * as nextNavigation from 'next/navigation'

import { useUrlHelper } from '@/hooks/urlHelper'

const { ReadonlyURLSearchParams } = nextNavigation

// // Mock the Next.js hooks
// jest.mock('next/navigation', () => ({
//   useRouter: jest.fn(),
//   usePathname: jest.fn(),
//   useSearchParams: jest.fn(),
// }))

describe('useUrlHelper', () => {
  const useSearchParamsSpy = spyOn(nextNavigation, 'useSearchParams')
  // const useRouterSpy = spyOn(nextNavigation, 'useRouter')
  // const usePathnameSpy

  // beforeEach(() => {
  //   useRouterSpy.mockReturnValue(() => ({
  //     ...useRouter(),
  //     push: jest.fn(),
  //     refresh: jest.fn(),
  //   }))
  //   usePathname.mockReturnValue('/test-path')
  //   useSearchParams.mockReturnValue(new URLSearchParams())
  // })

  it('should return the correct path', () => {
    const { result } = renderHook(() => useUrlHelper())
    expect(result.current.path).toBe('/test-path')
  })

  it('should push to a route without refreshing by default', () => {
    const { result } = renderHook(() => useUrlHelper())

    result.current.pushTo('/new-route')

    // expect(result.current.router.push.mock.calls[0]).toEqual(['/new-route'])
    expect(result.current.router.refresh).not.toHaveBeenCalled()
  })

  it('should push to a route and refresh if specified', () => {
    const { result } = renderHook(() => useUrlHelper())

    result.current.pushTo('/new-route', true)

    // expect(result.current.router.push).toHaveBeenCalledWith('/new-route')
    expect(result.current.router.refresh).toHaveBeenCalled()
  })

  it('should append query parameters', () => {
    useSearchParamsSpy.mockReturnValue(
      () => new ReadonlyURLSearchParams(new URLSearchParams('foo=bar')),
    )

    const { result } = renderHook(() => useUrlHelper())

    result.current.appendQuery({ baz: 'qux' })

    // expect(result.current.router.push).toHaveBeenCalledWith(
    //   '/test-path?foo=bar&baz=qux',
    // )
  })

  it('should remove specified query parameters', () => {
    useSearchParamsSpy.mockReturnValue(
      () => new ReadonlyURLSearchParams(new URLSearchParams('foo=bar&baz=qux')),
    )

    const { result } = renderHook(() => useUrlHelper())

    result.current.appendQuery({ fizz: 'buzz' }, ['baz'])

    // expect(result.current.router.push).toHaveBeenCalledWith(
    //   '/test-path?foo=bar&fizz=buzz',
    // )
  })
})

urlHelper.ts

'use client'

import { usePathname, useRouter, useSearchParams } from 'next/navigation'

export function useUrlHelper() {
  const router = useRouter()
  const path = usePathname()
  const params = useSearchParams()

  function pushTo(route: string, shouldRefresh = false) {
    router.push(route)
    if (shouldRefresh) router.refresh()
  }

  const appendQuery = (
    query: Record<string, string>,
    removes: string[] = [],
  ) => {
    const param = new URLSearchParams(params?.toString())

    removes.forEach(key => {
      param.delete(key)
    })

    Object.keys(query).forEach(key => {
      param.set(key, query[key])
    })

    pushTo(`${path}?${param.toString()}`)
  }

  return {
    router,
    pushTo,
    path,
    // create editable params
    params: new URLSearchParams(params?.toString()),
    appendQuery,
  }
}