JavaScript前端测试中模拟路由跳转的关键是不依赖真实浏览器，而是通过jest/vitest mock路由函数（如useNavigate、router.push）并验证调用参数。React Router v6需mock useNavigate Hook；Vue Router需mock useRouter返回含push的对象；通用技巧包括禁用守卫、mock API、独立mock状态，优先测试跳转意图而非结果。
在 JavaScript 前端测试中，模拟路由跳转逻辑的关键是不依赖真实浏览器环境，而是通过替换或拦截路由实例（如 React Router 的 useNavigate、Vue Router 的 router.push）来验证跳转行为是否符合预期。核心思路是：用 jest 或 vitest 模拟路由函数，检查调用参数是否正确。
React Router v6+：mock useNavigate
React Router v6 移除了 history API，改用 useNavigate Hook。测试时需在自定义 Hook 或组件中 mock 它：
- 使用
jest.mock('react-router-dom', () => ({ ... }))替换整个模块，或更安全地用jest.mock('react-router-dom', () => ({ useNavigate: jest.fn() })) - 在测试前重置 mock：
useNavigate.mockClear() - 触发跳转逻辑（如点击按钮），然后断言：
expect(useNavigate).toHaveBeenCalledWith('/dashboard')或expect(useNavigate).toHaveBeenCalledWith({ pathname: '/user', search: '?id=123' }) - 若需测试导航守卫（如权限拦截），可 mock 返回一个带
push方法的 fake navigator 对象，并检查是否被调用
Vue Router：mock useRouter 和 router.push
Vue 3 + Composition API 中常用 useRouter 获取路由实例。测试时可 mock 其返回值：
- 用
vi.mock('vue-router')（vitest）或jest.mock('vue-router')，并指定useRouter返回一个含push方法的对象：{ push: vi.fn() } - 执行触发跳转的逻辑（如调用某个方法），再检查
router.push是否被调用及参数是否匹配：expect(router.push).toHaveBeenCalledWith({ name: 'Profile', params: { id: '5' } }) - 注意：若组件内直接 import { router } from '@/router'，则需 mock 全局 router 实例，而非仅
useRouter
通用技巧：避免真实跳转 & 验证副作用
真实跳转会改变 URL、触发渲染甚至网络请求，干扰单元测试稳定性：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- 确保测试运行在 JSDOM 环境（如 Jest 默认配置），而不是真实浏览器
- 禁用所有路由守卫（如
router.beforeEach）或在测试中临时清除它们 - 若跳转后有数据获取（如
useEffect或onMounted中发请求），应单独 mockfetch或对应 API 调用，与路由逻辑解耦 - 对带条件跳转的逻辑（如登录后跳回原页），可传入 mock 的
location.state或 query 参数，验证分支路径是否覆盖
补充：测试路由守卫本身
如果要测的是守卫函数（如权限校验逻辑），无需模拟整个路由系统：
- 将守卫逻辑抽离为纯函数，例如
canAccess(route) → boolean - 直接传入 mock 的 route 对象（含
meta、name等字段）进行单元测试 - 对于全局守卫，可用
router.beforeEach的回调函数作为被测目标，传入 mock 的to、from、next参数，检查next被如何调用（如next('/login')或next(false)）
不复杂但容易忽略：确保 mock 在每个 test case 中独立，避免状态污染；优先测试“跳转意图”而非“跳转结果”，让路由测试保持轻量和可靠。
