Mock useSearchParams react testing library

Question

I have this custom hook

import { useLocation, useNavigate, useSearchParams } from "react-router-dom";

const useZRoutes = () => {
  const navigate = useNavigate();
  const { search, hash } = useLocation();
  const [searchParams, setSearchParams] = useSearchParams();

  return {
    getQueryParam: <T>(key: string): T | null => {
      if (searchParams.has(key)) {
        const value = searchParams.get(key);
        return value as unknown as T;
      }

      return null;
    },
    deleteQueryParam: (key: string): void => {
      if (searchParams.has(key)) {
        searchParams.delete(key);
        setSearchParams(searchParams);
      }
    },
    extendsNavigate: (pathname: string) => navigate({ pathname, search, hash }),
  };
};

export { useZRoutes };

Now, I need to test the getQueryParam function but I can't update the URL with query param.

I tried to mock useSearchParams with Object.defineProperty and with jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts useSearchParams: () => ("pid=123"), }));

and my test isn't passed. what should I do?

Wessex

Answer 1

Instead of attempting to mock useSearchParams, I would recommend wrapping a component that is using your custom hook with a MemoryRouter and passing in your search params as initialEntries.

import { MemoryRouter } from 'react-router-dom'
import { render } from '@testing-library/react'

describe('My component using the useZRoutes hook', () => {    
  it('should do something', () => {
    render(
      <MemoryRouter initialEntries={["?pid=123"]}>
        <TestComponentUsingHook />
      </MemoryRouter>
    )
    // expect something
  })
})

Tirewoman

This works for passing initial search params, but what if you wanted to assert search params changed? – Arbe

@Arbe you can create another component SearchParamsObserver that internally uses useSearchParams and calls a callback whenever they change. Just render this component in your test next to the component you are testing. – Ozell

Answer 2

you could just mock URLSearchParams, like so,

  jest.spyOn(
    URLSearchParams.prototype,
    'get'
  ).mockImplementation(
    (key) => "foo"
  );

Martinamartindale

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Mahayana

Answer 3

Mock useSearchParams

const searchParams = { "pid": "123"};
jest.mock('react-router-dom', () => ({
  ...(jest.requireActual('react-router-dom') as object),
  useSearchParams: () => [searchParams]
}));

Alcides

The important part of this answer is that you need to return an ARRAY. So you can't use jest.fn() to mock this. The simples way would be () => []. – Illuminate

Answer 4

Passing initialEntries only string we will have this error in Typescript

Type 'string' is not assignable to type 'InitialEntry[] | undefined'.ts(2322)
components.d.ts(9, 5): 
The expected type comes from property 'initialEntries' 
which is declared here on type 'IntrinsicAttributes & MemoryRouterProps'

instead of string, you can pass

["/path?pid=123"]

Popp

Answer 5

If you are seeking for TypeScript typesafe version: here is the mock that will work for react-router V6.4+ for both cases: initial urlParams and updates via setParams function that is returned as second argument

import { useState } from 'react'
import * as reactRouterDom from 'react-router-dom'

type SetParams = ReturnType<typeof reactRouterDom.useSearchParams>['1']

// from react-router-dom github
function createSearchParams(init: reactRouterDom.URLSearchParamsInit = ''): URLSearchParams {
  return new URLSearchParams(
    typeof init === 'string' || Array.isArray(init) || init instanceof URLSearchParams
      ? init
      : Object.keys(init).reduce<reactRouterDom.ParamKeyValuePair[]>((memo, key) => {
          const value = init[key]
          return memo.concat(Array.isArray(value) ? value.map((v) => [key, v]) : [[key, value]])
        }, []),
  )
}

export const useSearchParamsMock: typeof reactRouterDom.useSearchParams = (
  defaultInit: reactRouterDom.URLSearchParamsInit | undefined,
) => {
  const location = reactRouterDom.useLocation()
  const [params, setParams] = useState<URLSearchParams>(
    new URLSearchParams(createSearchParams(defaultInit ?? location.search)),
  )
  const setParamsMock: SetParams = (nextInit) => {
    const newSearchParams = createSearchParams(
      typeof nextInit === 'function' ? nextInit(params) : nextInit,
    )
    setParams(newSearchParams)
  }

  return [params, setParamsMock]
}

Then in the actual test you can use it with jest or vi (vitest mocking lib)

Vitests:

    vi.spyOn(reactRouterDom, 'useSearchParams').mockImplementation(useSearchParamsMock)

Jest

    jest.spyOn(reactRouterDom, 'useSearchParams').mockImplementation(useSearchParamsMock)

Pasargadae

Answer 6

I was able to mock it like this. Enough to get my test to pass, but would love comments on how to elaborate on it.

import { useSearchParams } from 'next/navigation';

jest.mock('next/navigation', () => ({
  useSearchParams: jest.fn(),
}));

const mockGet = jest.fn();
mockGet.mockReturnValue('5000');

(useSearchParams as jest.Mock).mockReturnValue({
  get: mockGet,
});

Piggery

Answer 7

After a long time trying many things, this works for me using mockImplementation function:

describe('test', () => {
  test('should ...', async () => {
    ...
    useSearchParams.mockImplementation(() => [new URLSearchParams({ autoplay: '1' })]);...
  });

});

Gonzalo