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');
  });
});

Related Posts

How to remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Highcharts Place text in the center of a pie chart

Highcharts Place text in the center of a pie chart

To place text in the center of a pie chart in Highcharts, you can use the chart.renderer object to create a custom label and position it in…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

Highcharts How To Change Series Color with examples

Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article. Option 1: Using the…

A quick introduction to Javascript shadow DOM

A quick introduction to Javascript shadow DOM

Introduction JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own…

Leave a Reply

%d bloggers like this: