Mock useSearchParams react testing library

To mock the useSearchParams hook from react-router-dom, you can use Jest’s mock function to provide a mocked implementation for the hook. For example:

Consider we’ve a URL with an `id` as a search parameter

https://example.com/?id=1234

In order to get the value of the id in React component, you’d use useSearchParams hook from react-router-dom, as the following:

function MyComponent() {
  const params = useSearchParams();
  const id = params[0].get('id');

  return <div data-testid="search-query-id-parameter">{id}</div>;
}

Now to be able to mock useSearchParams hook, we need to mock it using jest.mock function as the following:

jest.mock('react-router-dom', () => {
  const originalModule = jest.requireActual('react-router-dom');

  return {
    ...originalModule,
       useSearchParams: () => [new URLSearchParams({ id: '1234' })],
  };
});

then, you can you can query the UI by data-testid attribute, and assert if the search query parameter match the value you provided to the mocked hook.

// MyComponent.test.js
import { render, screen } from '@testing-library/react';

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useSearchParams: () => [new URLSearchParams({ id: '123' })],
}));

describe('Component.js', () => {
  it('renders', () => {
    render(<MyComponent />);
    expect(screen.queryByTestId('search-query-id-parameter')).toHaveTextContent('123');
  });
});