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 Capture Screenshots with Puppeteer In NodeJS

How to Capture Screenshots with Puppeteer In NodeJS

To Capture Screenshots with Puppeteer: Launch a Browser Instance Navigate to the Web Page Capture the Screenshot Introduction: Puppeteer is a powerful Node.js library that allows developers…

How to Minimize Puppeteer Browser Window To Tray

How to Minimize Puppeteer Browser Window To Tray

Puppeteer is a powerful tool for automating tasks in headless or non-headless web browsers using JavaScript. While Puppeteer is often used to perform actions within a browser,…

Intercepting Responses in Node.js with Puppeteer

Intercepting Responses in Node.js with Puppeteer

Introduction: Puppeteer is a powerful Node.js library that provides a high-level API for controlling headless Chrome or Chromium browsers. It’s widely used for web scraping, automated testing,…

Mastering React Component Re-rendering in Jest

Mastering React Component Re-rendering in Jest

In this hands-on guide, we’ll explore the art of optimizing React component re-rendering within Jest tests. By combining theory with practical coding examples, you’ll gain a deep…

Eliminating Nesting Loops in React Rendering

Eliminating Nesting Loops in React Rendering

React has ushered in a new era of web application development with its component-based structure, promoting code reusability and maintainability. But as projects evolve, achieving optimal performance…

Exploring Type and Interface Usage in TypeScript

Exploring Type and Interface Usage in TypeScript

TypeScript has gained immense popularity by bridging the gap between dynamic JavaScript and static typing. Two of its fundamental features, “Type” and “Interface,” play pivotal roles in…

This Post Has One Comment

  1. Don’t do this. Instead wrap your component in a and feed it the proper state. React Test Library’s motto is to test the app the way a user would.

Leave a Reply

%d bloggers like this: