Vitest中如何mock useLocation？遇state解构空值错误

你遇到的错误是因为测试环境中默认mock的useLocation返回的state为null，但业务代码直接对state进行了解构，导致报错。以下是具体的解决步骤：

1. 全局mock useLocation并指定state值 #

在测试文件顶部，通过Vitest的vi.mock方法直接mockreact-router-dom的useLocation，让它返回包含目标state的对象：

import { vi } from 'vitest';
import { useLocation } from 'react-router-dom';

// 全局mock useLocation
vi.mock('react-router-dom', () => ({
  useLocation: vi.fn().mockReturnValue({
    state: {
      selectedTemplateName: '测试模板名称' // 替换为你需要的测试值
    }
  })
}));

2. 单个测试用例中动态修改state #

如果需要在不同测试用例中使用不同的state值，可以先将useLocationmock成空函数，再在每个测试用例中单独设置返回值：

import { vi } from 'vitest';
import { useLocation } from 'react-router-dom';

// 先mock成空函数
vi.mock('react-router-dom', () => ({
  useLocation: vi.fn()
}));

test('测试选中模板的场景', () => {
  // 为当前测试用例设置state
  (useLocation as jest.Mock).mockReturnValue({
    state: { selectedTemplateName: '模板A' }
  });
  
  // 渲染组件并执行断言逻辑
  // ...
});

test('测试state为空的场景', () => {
  // 模拟state为null的情况
  (useLocation as jest.Mock).mockReturnValue({ state: null });
  
  // 这里需要确保业务代码有处理state为null的逻辑，否则仍会报错
  // ...
});

补充：优化业务代码避免潜在报错 #

如果需要兼容state为null的场景，可以修改业务代码，添加可选链或默认值处理：

const location = useLocation();
const state = location.state as { selectedTemplateName: string } | null;
const selectedTemplateName = state?.selectedTemplateName || '默认模板';

这样即使state为null，也不会触发解构报错，同时测试时也能覆盖更多场景。

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