模拟 useSearchParams 反应测试库

Question

我有这个自定义钩子

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

现在，我需要测试该getQueryParam函数，但无法使用查询参数更新 URL。

我尝试用Object.defineProperty 和 来 模拟 useSearchParamsjest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts useSearchParams: () => ("pid=123"), }));

我的测试没有通过。我应该怎么办？

Answer 1

我建议不要尝试模拟useSearchParams，而是建议使用 a 包装一个使用自定义钩子的组件，MemoryRouter并将搜索参数传递为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
  })
})