测试路由导航逻辑的关键是可控模拟导航行为并验证触发条件与结果:用假router或stub替换真实导航器、拦截断言导航动作、模拟用户交互触发、验证导航后状态与副作用。

用假 Router 或 Stub 替换真实导航器
多数框架允许你在测试中注入一个可控制的导航对象,而不是依赖实际的全局 router 实例。
-
Vue Router:用
createRouter({ history: createMemoryHistory(), routes })创建内存模式 router,在测试中完全脱离浏览器 URL;配合mount时传入该实例,再调用router.push('/path')触发导航,随后断言组件是否渲染、$route.params是否正确。 -
Angular + Spectator:用
ActivatedRouteStub模拟当前路由状态(如id: '42'),再通过createRoutingFactory构建带路由上下文的组件,无需启动真实路由器。 -
Android + Cicerone:不直接操作 Activity,而是用
Router发送命令,再用CommandBuffer捕获发出的ReplaceScreen或BackTo命令,检查命令类型和参数是否匹配预期。
拦截并断言导航动作本身
有些场景下你并不关心目标页面长什么样,只关心“是否发出了跳转指令”——这时应跳过页面渲染,直接验证导航调用。
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景,三层路由架构(触发词→SAD反馈→DAG编排),recall@10=96.97%。配置驱动(chains.yaml),零代码扩展。pip install skill-weave-chains 一键安装。
- 在测试函数里把
router.push替换成 jest mock 函数:jest.mock('vue-router', () => ({ useRouter: jest.fn(() => ({ push: jest.fn() })) })),然后检查push是否被以正确参数调用一次。 - Cypress 中用
cy.intercept()拦截导航跳转产生的历史变更(如监听pushState)或后续 API 请求,间接确认导航已发生。 - Flutter 测试中使用
MockNavigatorObserver,验证didPush是否被调用,参数是否为预期的 route 类型。
模拟用户交互来触发导航
真实导航往往由按钮点击、链接跳转等交互发起,单元测试应还原这一链路。
- 在 Vue 或 React 组件测试中,用
fireEvent.click或wrapper.find('router-link').trigger('click')模拟点击,再检查 router 状态变化或 DOM 更新。 - 注意:若使用
shallowMount,<router-link></router-link>可能不会解析为真实导航行为,建议用mount并传入完整 router 配置。 - 对于带守卫的路由(如权限校验),需提前 mock 守卫返回值(例如返回
true或false),再观察导航是否被放行或中断。
验证导航后的状态与副作用
导航不只是改 URL,还常伴随数据加载、滚动复位、标题更新等行为,这些都应在测试中覆盖。
- 检查
document.title是否随路由变更自动更新(Vue Router 的meta.title+ 全局守卫)。 - 验证组件是否在导航后正确调用
fetchData,可通过 mockfetch或 API service 并断言调用次数与参数。 - 测试返回栈行为:连续 push 三个页面后,执行两次
router.back(),确认当前路由回到第二个页面。









