Jest中useRoute的mockImplementation失效，报isVerified未定义错误

核心问题分析 #

报错TypeError: Cannot read properties of undefined (reading 'isVerified')本质是你mock的useRoute没有返回包含params属性的对象，导致组件读取route.params.isVerified时params为undefined。以下是具体的解决步骤和代码示例：

正确的Mock实现方式 #

1. 全局/测试文件顶部Mock模块 #

首先要确保正确Mock@react-navigation/native的命名导出，不要只单独MockuseRoute而不关联到模块：

import { useRoute, useNavigation } from '@react-navigation/native';

// Mock整个模块，保留其他未Mock的原生方法
jest.mock('@react-navigation/native', () => ({
  ...jest.requireActual('@react-navigation/native'),
  useRoute: jest.fn(),
  useNavigation: jest.fn(),
}));

2. 测试用例中设置Mock返回值 #

在每个测试用例（或beforeEach）中，明确设置useRoute的返回值，确保包含params属性：

describe('App.tsx 组件测试', () => {
  beforeEach(() => {
    // 重置Mock，避免测试用例之间互相污染
    useRoute.mockReset();
    useNavigation.mockReset();

    // 默认模拟导航方法（比如navigate、goBack）
    useNavigation.mockReturnValue({
      navigate: jest.fn(),
      goBack: jest.fn(),
    });
  });

  it('当isVerified为true时渲染正确内容', () => {
    // 设置useRoute返回包含isVerified的params
    useRoute.mockReturnValue({
      params: {
        isVerified: true,
      },
      // 如果组件用到了route的其他属性（比如name），也要一并Mock
      name: 'AppScreen',
    });

    // 渲染组件并执行断言
    render(<App />);
    // 示例断言：expect(screen.getByText('已验证')).toBeInTheDocument();
  });

  it('当isVerified为false时触发对应逻辑', () => {
    useRoute.mockReturnValue({
      params: {
        isVerified: false,
      },
    });

    render(<App />);
    // 示例断言：expect(screen.getByText('未验证')).toBeInTheDocument();
  });

  // 可选：测试params为undefined的边界情况
  it('当params不存在时处理异常', () => {
    useRoute.mockReturnValue({
      params: undefined,
    });

    render(<App />);
    // 示例断言：expect(screen.getByText('参数缺失')).toBeInTheDocument();
  });
});

3. 常见错误排查 #

• Mock时机错误：确保Mock代码在组件导入前执行（比如放在测试文件最顶部），否则组件会加载原始的useRoute方法。
• 未重置Mock：多个测试用例共用同一个Mock实例时，要在beforeEach里调用mockReset()或mockClear()，避免前一个用例的返回值影响后续测试。
• Mock对象不完整：如果组件用到了route的其他属性（如name、key），必须在Mock返回值中包含这些属性，否则会触发其他类似的undefined报错。
• 导入路径不一致：确保组件中导入useRoute的路径是@react-navigation/native，而非自定义的别名或相对路径，否则Mock不会生效。

全局Mock（可选） #

如果多个测试文件都需要Mock导航hooks，可以在setupTest.js（或setupTests.ts）中全局配置：

// setupTest.js
jest.mock('@react-navigation/native', () => ({
  ...jest.requireActual('@react-navigation/native'),
  useRoute: jest.fn(() => ({
    params: {}, // 默认空params，避免基础报错
    name: 'DefaultScreen',
  })),
  useNavigation: jest.fn(() => ({
    navigate: jest.fn(),
    goBack: jest.fn(),
  })),
}));

之后在单个测试用例中，只需用mockImplementation覆盖默认值即可：

useRoute.mockImplementation(() => ({
  params: { isVerified: true },
}));

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