单页应用测试中模拟路由状态的核心是用MemoryRouter或createMemoryHistory替代浏览器历史，mock location/history对象，可控注入URL、参数与导航行为，并断言导航函数调用而非location.href。
在单页应用（SPA）测试中模拟路由状态，核心是让测试环境能控制或观察当前 URL、路由参数、导航行为，而不依赖真实浏览器历史或框架的运行时路由系统。不同框架（如 React Router、Vue Router、Angular Router）方案略有差异，但思路一致：替换或拦截路由相关 API，注入可控的 mock 状态。
使用内存历史（MemoryRouter）替代浏览器历史
这是最常用且推荐的方式，尤其适用于 React Router v5/v6 和 Vue Router 的单元测试场景。它用一个纯 JavaScript 对象模拟 history 栈，完全脱离 window.location 和 browserHistory。
- React Router v6 示例：render 组件时包裹 MemoryRouter，并传入 initialEntries 指定初始路径
- Vue Router：创建 router 实例时将 history 设为 createMemoryHistory()，再传入挂载选项
- 避免在测试中调用
window.history.pushState或修改location.href，它们不可靠且难以断言
手动 mock 全局 location 和 history 对象
当无法使用 MemoryRouter（例如测试底层工具函数、或需验证路由副作用），可直接覆盖全局对象。注意仅在测试环境生效，且需还原防止污染其他测试用例。
- 用 jest.mock 或 Object.defineProperty 拦截
window.location的href、pathname、search属性（设为 get 访问器） - mock
window.history.pushState和replaceState，记录调用参数用于断言（如是否跳转到 /login?from=/dashboard） - 务必在
beforeEach中 mock，在afterEach中 jest.restoreAllMocks() 或 delete window.history.pushState
模拟路由参数与匹配结果（match 对象）
很多组件依赖 match.params、match.url 或 useParams() 等获取动态路由数据。测试时需确保这些值可预测、可配置。
立即学习“Java免费学习笔记（深入）”；
- React Router v6 不再暴露 match，改用 useParams、useSearchParams；可在 MemoryRouter 内用 initialEntries 设置带参数的路径（如
['/user/123?tab=profile']） - 手动传入 mock 的 match 对象给被测组件（适用于高阶组件或非路由直连组件），结构如
{ params: { id: '456' }, url: '/user/456', path: '/user/:id' } - Vue Router 测试中，可通过 router.push({ name: 'User', params: { id: '789' } }) 触发导航，再等待 nextTick 后断言组件响应
监听和断言导航行为
测试「点击按钮后跳转到 /settings」这类逻辑，不能只检查 URL 变了，而要验证导航是否被正确触发。
- spyOn router.navigate（Angular）、router.push（Vue）、或 useNavigate 返回的函数（React Router v6）
- 对自定义路由工具函数（如
goToLogin()），直接 mock 其内部调用的history.pushState或window.location.assign - 避免断言
window.location.href—— 它在 JSDOM 中可能不更新；优先断言导航函数的调用参数
