Vue3+Cypress测试router.push事件：点击触发后页面未跳转如何解决？

排查与修复方案 #

• 验证Cypress对Vue Router的监听能力
  在测试文件中添加自定义命令获取Vue Router实例，直接断言路由状态变化：

  // 在测试文件的beforeEach或顶部定义
  Cypress.Commands.add('getRouter', () => {
    return cy.window().its('app.$router') // 替换为你的Vue实例挂载对象
  })
  
  // 测试逻辑
  cy.get('[data-test-id="sidebar-customers"]').click()
  cy.getRouter().its('currentRoute.value.path').should('eq', '/customers')
  

• 关闭Cypress实验性跨源隔离特性
  部分场景下，experimentalSessionAndOrigin会干扰客户端路由跳转，修改cypress.config.js：

  module.exports = defineConfig({
    e2e: {
      experimentalSessionAndOrigin: false,
    },
  })
  

• 等待异步操作完成后再断言
  如果点击触发了异步请求或状态更新，需等待这些操作结束再验证路由。可通过等待目标页面元素出现实现：

  cy.get('[data-test-id="sidebar-customers"]').click()
  cy.get('[data-test-id="customers-page-container"]').should('be.visible')
  

• 检查导航守卫是否拦截跳转
  确认全局或路由级别的导航守卫（如beforeEach）没有在测试环境阻止跳转。可添加测试环境判断放行：

  // Vue Router导航守卫中
  router.beforeEach((to, from) => {
    if (import.meta.env.VITE_TEST && to.path === '/customers') {
      return true
    }
    // 原有守卫逻辑
  })
  

• 直接访问路由验证页面可用性
  若以上方法无效，直接访问目标路由排除路由本身问题：

  cy.visit('/customers')
  cy.get('[data-test-id="customers-page-container"]').should('be.visible')
  

内容的提问来源于stack exchange，提问作者Julie