使用setInterval作为计数器时无法与Cypress的cy.clock/cy.tick正常配合

问题根因 #

Cypress 的 cy.clock() 默认仅能劫持自身调用完成后页面中创建的定时器（setInterval/setTimeout）。你遇到的计数未更新问题，绝大多数场景是因为你的 setInterval 计数器在 Vue 组件初始化/挂载阶段就已经创建，早于测试用例中 cy.clock() 的执行时机，导致定时器没有被 Cypress 接管，后续 cy.tick() 自然无法触发计数更新。

可行解决方案 #

方案1：页面加载前提前注入 cy.clock() #

在调用 cy.visit() 时通过 onBeforeLoad 钩子提前初始化时钟，保证组件挂载创建定时器时，Cypress 已经完成了定时器的劫持，示例代码如下：

it('验证setInterval计数随tick更新', () => {
  cy.visit('/', {
    onBeforeLoad(window) {
      // 提前接管全局定时器
      cy.clock(window)
    }
  })

  // 模拟前进1000毫秒，对应1秒间隔的setInterval触发1次
  cy.tick(1000)
  // 此处添加你的计数断言逻辑
  cy.get('.counter').should('have.text', '1')
})

方案2：动态创建定时器的适配方案 #

如果你的定时器是用户交互后才创建（比如点击按钮后才启动计数器），只需要保证 cy.clock() 调用在触发定时器创建的交互之前执行即可：

it('动态创建定时器的测试', () => {
  cy.visit('/')
  cy.clock()
  // 点击启动计数器的按钮，此时创建的setInterval会被正常劫持
  cy.get('.start-btn').click()
  cy.tick(2000)
  cy.get('.counter').should('have.text', '2')
})

注意事项 #

• cy.tick() 的时间单位为毫秒，需要和你的 setInterval 间隔匹配，才能触发对应次数的回调
• 测试完成后如果后续用例需要使用真实时间，可以调用 cy.clock().restore() 恢复原生定时器能力
• 断言计数时优先使用 Cypress 自带的自动重试断言（比如 .should()），避免 Vue 异步更新队列未执行完成导致的断言误判

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