Next.jsのuseSearchParamsをMockしてTestする

Next.jsではuseSearchParamsを利用してURLのquery string　(?foo=barみたないなの)を取得することができます。

https://nextjs.org/docs/app/api-reference/functions/use-search-params

useSearchParamsを利用したReactコンポーネントのtestは以下のように記述します。

テストするコンポーネント

今回はシンプルに?foo=xxxのxxxを表示するコンポーネントしましょう

FooBar.tsx

import { useSearchParams } from 'next/navigation';

export const FooBar = () => {
  const searchParams = useSearchParams();

  return <h1>{searchParams.get('foo')}</h1>;
};

テストコード

テストコードではuseSearchParamsをmock化してnew URLSearchParams()でテストしたいquery stringが返却されるように設定します。

FooBar.text.tsx

import { render } from '@testing-library/react';
import { FooBar } from './FooBar';

import { useSearchParams } from 'next/navigation';

jest.mock('next/navigation');

describe('FooBar', () => {
  test('should render1', () => {
    (useSearchParams as jest.Mock).mockReturnValue(new URLSearchParams({ foo: 'bar' }));
    const { container } = render(<FooBar />);
    expect(container.innerHTML).toMatch('<h1>bar</h1>');
  });

  test('should render2', () => {
    (useSearchParams as jest.Mock).mockReturnValue(new URLSearchParams({ foo: 'xxx' }));
    const { container } = render(<FooBar />);
    expect(container.innerHTML).toMatch('<h1>xxx</h1>');
  });
});

こうすることで任意のquery stringに応じたテストを書くことができます。