javascript单元测试中模拟前端路由跳转的核心是替换或拦截push、replace等方法并验证调用，而非真实跳转；vue router v4需mock createrouter实例，react router v6推荐mock usenavigate，均需避免真实页面跳转和全局状态污染。
在 JavaScript 单元测试中模拟前端路由跳转，核心是**替换或拦截路由实例的方法（如 push、replace），并验证调用是否符合预期**，而不是真实触发页面跳转。不同路由库方案略有差异，但思路一致：控制依赖、隔离行为、断言调用。
Vue Router（v4）：Mock createRouter 实例
Vue Router 4 使用组合式 API，路由实例通常通过 createRouter 创建并注入。测试时可直接创建一个“假路由器”，用 jest mock 其关键方法：
- 用
jest.fn()替换push和replace，确保不发起实际导航 - 在测试前通过
provide或mount的global.plugins注入 mock 路由器 - 触发组件内跳转逻辑（如点击按钮调用
router.push）后，用expect(router.push).toHaveBeenCalledWith(...)断言参数
示例片段：
const mockPush = jest.fn();const mockRouter = { push: mockPush, replace: jest.fn(), currentRoute: { value: { path: '/' } } };
// 挂载组件时注入
mount(Component, { global: { plugins: [[mockRouter]] } });
// ... 触发跳转
expect(mockPush).toHaveBeenCalledWith({ path: '/user', query: { id: '123' } });
React Router（v6）：用 MemoryRouter + renderWithRouter + mock useNavigate
React Router v6 推荐使用 useNavigate Hook 进行编程式导航。测试时可通过以下方式模拟：
- 用
jest.mock('react-router-dom', () => {...})mockuseNavigate，返回一个jest.fn() - 或更推荐：使用
@testing-library/react配合自定义renderWithRouter，包裹MemoryRouter，再通过jest.spyOn监听useNavigate返回的函数 - 断言时检查 navigate 函数是否以正确参数被调用（支持字符串路径或 location 对象）
注意：避免 mock 整个 react-router-dom 导出，只 mock useNavigate 即可，保持其他 hooks（如 useParams）正常工作。
通用技巧：避免真实跳转 + 处理副作用
无论哪种路由库，都要防止测试中意外触发真实页面跳转（比如刷新或离开当前页）：
- 全局 mock
window.location.assign和window.history.pushState（某些底层跳转可能绕过 router API） - 若组件内有路由守卫（如
beforeEach）、异步加载或权限校验逻辑，需同步 mock 对应依赖（如 mockrouter.beforeEach的回调，或 mock API 请求） - 对带过渡动画的跳转（如
router.push后等待nextTick），测试中可用await waitFor(() => expect(...))等待状态更新
不推荐的做法
直接修改 window.location.href 或调用原生 history.pushState 来“模拟”跳转——这会污染全局状态，导致测试间相互干扰，且无法验证组件是否调用了正确的路由 API。真正的模拟目标是**验证组件与路由的契约（传了什么参数），而非复现浏览器行为**。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
