packages/hooks/useSearchParams.test.ts

   1 import { useHistory, useLocation } from 'react-router-dom';
   2
   3 import { act, renderHook } from '@testing-library/react-hooks';
   4
   5 import useSearchParams from './useSearchParams';
   6
   7 // Mocking dependencies like useLocation and useHistory
   8 jest.mock('react-router-dom', () => ({
   9     useLocation: jest.fn(),
  10     useHistory: jest.fn(),
  11 }));
  12
  13 describe('useSearchParams', () => {
  14     const mockUseLocation = useLocation as jest.Mock;
  15     const mockUseHistory = useHistory as jest.Mock;
  16
  17     beforeEach(() => {
  18         // Reset mocks before each test
  19         jest.clearAllMocks();
  20     });
  21
  22     it('should set search params correctly', () => {
  23         mockUseLocation.mockReturnValueOnce({ pathname: '/path', hash: '' });
  24         const mockPush = jest.fn();
  25         mockUseHistory.mockReturnValueOnce({ push: mockPush });
  26
  27         const { result } = renderHook(() => useSearchParams());
  28
  29         act(() => {
  30             const [, setSearchParams] = result.current;
  31             setSearchParams({ key: 'value' });
  32         });
  33
  34         expect(mockPush).toHaveBeenCalledWith('/path#key=value');
  35     });
  36
  37     it('should update search params correctly', () => {
  38         // Mock initial location
  39         mockUseLocation.mockReturnValueOnce({ pathname: '/path', hash: '#key1=value1&key2=value2' });
  40         const mockPush = jest.fn();
  41         mockUseHistory.mockReturnValueOnce({ push: mockPush });
  42
  43         // Render the hook
  44         const { result } = renderHook(() => useSearchParams());
  45
  46         // Destructure setSearchParams from the hook result
  47         const [, setSearchParams] = result.current;
  48
  49         // Update the search params
  50         act(() => {
  51             setSearchParams({ key2: 'updatedValue' });
  52         });
  53
  54         // Assert that history.push is called with the correct updated route
  55         expect(mockPush).toHaveBeenCalledWith('/path#key1=value1&key2=updatedValue');
  56     });
  57
  58     it('should update search params with function correctly', () => {
  59         mockUseLocation.mockReturnValueOnce({ pathname: '/path', hash: '#key1=value1' });
  60         const mockPush = jest.fn();
  61         mockUseHistory.mockReturnValueOnce({ push: mockPush });
  62
  63         const { result } = renderHook(() => useSearchParams());
  64
  65         act(() => {
  66             const [, setSearchParams] = result.current;
  67             setSearchParams((params) => ({ ...params, key2: 'value2' }));
  68         });
  69
  70         expect(mockPush).toHaveBeenCalledWith('/path#key1=value1&key2=value2');
  71     });
  72
  73     it('should handle init prop correctly', () => {
  74         const initParams = { key1: 'value1', key2: 'value2' };
  75
  76         mockUseLocation.mockReturnValueOnce({ pathname: '/path', hash: '#key1=value1' });
  77         const mockPush = jest.fn();
  78         mockUseHistory.mockReturnValueOnce({ push: mockPush });
  79
  80         renderHook(() => useSearchParams(initParams));
  81
  82         expect(mockPush).toHaveBeenCalledTimes(1);
  83         expect(mockPush).toHaveBeenCalledWith('/path#key1=value1&key2=value2');
  84     });
  85
  86     it('should handle init prop with undefined correctly', () => {
  87         mockUseLocation.mockReturnValueOnce({ pathname: '/path', hash: '#key1=value1' });
  88         const mockPush = jest.fn();
  89         mockUseHistory.mockReturnValueOnce({ push: mockPush });
  90
  91         renderHook(() => useSearchParams(undefined));
  92
  93         expect(mockPush).not.toHaveBeenCalled();
  94     });
  95
  96     it('should handle unmounting correctly', () => {
  97         mockUseLocation.mockReturnValueOnce({ pathname: '/path', hash: '#key1=value1' });
  98         const mockPush = jest.fn();
  99         mockUseHistory.mockReturnValueOnce({ push: mockPush });
 100
 101         const { unmount } = renderHook(() => useSearchParams());
 102
 103         // Assert that setSearchParams is not called when the component is unmounted
 104         unmount();
 105         expect(mockPush).not.toHaveBeenCalled();
 106     });
 107 });