测试中修改mock的useLocation返回值失败，求可行方案

算力阿峰

2026-8-17

解决react-router-dom useLocation Mock在测试用例中不生效的问题

你的问题出在尝试重新mock整个react-router-dom模块，但jest的模块mock在代码导入阶段就已经完成了，后续用mockImplementation修改整个模块的返回不会生效。正确的做法是单独mock useLocation这个函数，让它可以在测试用例中动态修改返回值。

修改步骤：

初始mock时，把useLocation定义为一个jest mock函数，并设置默认返回值
在目标测试用例中，直接修改这个mock函数的返回值
（可选但推荐）在测试完成后清理mock状态，避免影响其他测试

修改后的完整代码：

// 初始mock：将useLocation设为可修改的jest mock函数
jest.mock("react-router-dom", () => ({
  ...jest.requireActual("react-router-dom"),
  useLocation: jest.fn().mockReturnValue({ pathname: "/" }),
}));

// 单独导入useLocation的mock函数
const { useLocation } = require("react-router-dom");

test("is disabled when on todo subpage", () => {
  // 修改useLocation的返回值为目标路径
  useLocation.mockReturnValue({
    pathname: "/todo/4RhdwMMMTcbJKvouqnWb",
  });

  // 渲染组件
  render(
    <SearchbarWithProviders
      language="en"
      setSearch={mockSetState}
      search=""
    />
  );

  // 断言输入框禁用状态
  expect(screen.getByTestId("search-input")).toBeDisabled();
  
  // （可选）测试后重置mock，恢复默认值
  useLocation.mockRestore();
});