添加onClick属性的ReturnToLastSearch组件Jest覆盖率不足如何解决

算力阿峰

2026-10-5

错误原因修正

你当前测试报错是因为jest.mock不能放在it测试用例内部，它是模块级别的钩子，必须写在测试文件顶层，第二个参数要求传入静态内联函数，不支持在测试执行阶段动态定义。

正确的测试写法

你只需要分别写两个测试用例，覆盖三元判断的两个分支即可：

1. 顶层模拟next/router

import { useRouter } from 'next/router';
// 写在测试文件所有用例外部
jest.mock('next/router', () => ({
  useRouter: jest.fn(() => ({
    back: jest.fn()
  }))
}));

2. 测试分支1：传入自定义onClick时优先执行传入函数

it('uses custom onClick prop when provided', () => {
  const mockOnClick = jest.fn((e) => e.preventDefault());
  const { getByRole } = render(<ReturnToLastSearch href="/listings" onClick={mockOnClick} />);
  
  fireEvent.click(getByRole('link', { name: i18n.t('favorites.returnToLastSearch') as string }));
  expect(mockOnClick).toHaveBeenCalledTimes(1);
});

3. 测试分支2：未传入onClick时使用默认跳转逻辑

it('uses default click logic when no onClick prop is provided', () => {
  const mockBack = jest.fn();
  (useRouter as jest.Mock).mockReturnValue({ back: mockBack });

  const { getByRole } = render(<ReturnToLastSearch href="/listings" />);
  fireEvent.click(getByRole('link', { name: i18n.t('favorites.returnToLastSearch') as string }));
  expect(mockBack).toHaveBeenCalledTimes(1);
});