使用cy.clock()时Cypress测试运行器卡顿冻结问题求助

问题根源 #

直接把时间跳转到2037年（跨度几十年），会触发页面里所有依赖时间的逻辑——比如轮询定时器、基于时间判断的循环，原本需要很久才会触发的回调被一次性执行，导致浏览器线程过载，出现卡顿甚至冻结。

可行的解决方案 #

• 缩小时间跨度：不要直接跳到几十年后，只设置到满足测试条件的最小必要时间。比如测试需要验证“未来某日期的功能”，就设为当前日期后几天，而非2037年。
• 精准指定mock的API：cy.clock()的第二个参数不要笼统写['Date']，只mock测试实际需要用到的时间API。如果只需要mock日期显示，就单独指定Date；如果涉及定时器逻辑，单独控制这些定时器，避免无关逻辑被误触发。
• 改用beforeEach/afterEach管理时间mock：把时间mock放在每个测试前初始化，测试后立即恢复，避免整个测试组长时间保持极端时间状态，减少资源占用和状态污染。
• 用cy.tick()逐步推进时间：如果需要模拟时间流逝，先设置一个基础时间，再用cy.tick(毫秒数)逐步推进，而非直接跳到未来，这样能控制时间变化的节奏，避免一次性触发大量回调。

修改后的代码示例 #

describe("A group of tests", () => {
  beforeEach(() => {
    cy.viewport(1000, 1000);
    // 设置为当前日期后7天，刚好满足测试的时间要求
    const testTargetDate = new Date();
    testTargetDate.setDate(testTargetDate.getDate() + 7);
    cy.clock(testTargetDate.getTime(), ['Date']);
  });

  // 你的测试用例写在这里

  afterEach(() => {
    cy.clock().then(clock => clock.restore());
  });
});

如果业务逻辑确实需要用到2037年这么远的时间，建议先排查页面中是否有无限循环、高频轮询这类依赖时间的逻辑，在测试中手动禁用或控制这些逻辑后，再设置极端时间。

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