使用Jest和RTL模拟NextJS useParams时遇TypeError错误求助

一、修复useParams mock报错问题 #

你的报错根源是jest.mock使用了异步工厂函数，jest同步处理mock时会导致模块导出未正确解析，最终useParams为undefined。按以下步骤修改：

1. 调整next/navigation的mock写法 #

移除async/await，改用同步的jest.requireActual：

jest.mock('next/navigation', () => {
  const actual = jest.requireActual('next/navigation');

  return {
    __esModule: true,
    ...actual,
    useParams: jest.fn(),
    useRouter: jest.fn(() => ({
      push: jest.fn(),
      replace: jest.fn(),
    })),
    useSearchParams: jest.fn(),
    usePathname: jest.fn(),
  };
});

2. 优化测试用例中的导入与mock调用 #

改用ES模块导入替代require，避免模块加载时机问题，同时添加类型断言（TypeScript场景）：

import { useParams } from 'next/navigation';
import { render } from '@testing-library/react';

describe('ChannelDetailPage', () => {
  const SomePage = () => (
    <SomeProvider value={mockProvider}>
      <SomeTemplate />
    </SomeProvider>
  );

  it('renders items correctly', () => {
    // 对mock的useParams设置返回值
    (useParams as jest.Mock).mockReturnValue({ slug: 'test-slug' });
    render(<SomePage />);
    
    // 这里添加你的断言逻辑，比如检查目标元素是否渲染
  });
});

二、测试Next.js自定义Hooks的通用方法 #

针对依赖next/navigation Hooks的自定义Hooks，使用@testing-library/react的renderHook工具，结合mock实现隔离测试：

示例：测试依赖useParams的自定义Hook #

假设你有一个自定义Hook useChannelSlug：

// hooks/useChannelSlug.ts
import { useParams } from 'next/navigation';

export const useChannelSlug = () => {
  const params = useParams() as { slug: string };
  return params.slug;
};

对应的测试用例：

// hooks/useChannelSlug.test.ts
import { renderHook } from '@testing-library/react';
import { useParams } from 'next/navigation';
import { useChannelSlug } from './useChannelSlug';

// 仅mock需要的Hook，减少冗余
jest.mock('next/navigation', () => ({
  __esModule: true,
  useParams: jest.fn(),
}));

describe('useChannelSlug', () => {
  // 每个测试前重置mock，避免用例间污染
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('正确提取URL中的slug参数', () => {
    // 设置mock返回值
    (useParams as jest.Mock).mockReturnValue({ slug: 'react-test' });
    
    // 渲染Hook
    const { result } = renderHook(() => useChannelSlug());
    
    // 断言结果
    expect(result.current).toBe('react-test');
    expect(useParams).toHaveBeenCalledTimes(1);
  });
});

关键注意事项 #

• 避免异步mock工厂函数：jest的mock工厂函数必须同步，异步会导致模块导出为Promise，无法获取到Hook方法。
• 重置mock状态：在beforeEach中调用jest.clearAllMocks()，确保每个测试用例的mock状态独立。
• 类型断言：TypeScript场景下，需要将导入的Hook断言为jest.Mock，才能调用mockReturnValue等mock方法。

内容的提问来源于stack exchange，提问作者Fred A