如何在Cypress多测试用例中复用cy.clock且无需重复访问页面？

问题出在哪 #

• Cypress默认的测试隔离机制会在每个it测试结束后，彻底重置浏览器环境（包括时钟、DOM、全局变量），所以第一个测试的时钟会被销毁，第二个测试直接调用cy.tick()就会报错。
• cy.clock()必须在setInterval创建前调用才能拦截它，测试中途再调用cy.clock()根本管不到已经存在的定时器，自然没用。

正确解决方法 #

关闭测试隔离，同时确保cy.clock()在页面加载（也就是组件创建setInterval）之前调用，这样整个测试块共用同一个时钟，不用重复刷新页面。

修正后的测试代码 #

// test.cy.ts
describe('测试setInterval组件', { testIsolation: false }, () => {
  before(() => {
    // 先启动时钟拦截setInterval，再访问页面，确保定时器被时钟控制
    cy.clock(0, ['setInterval']);
    cy.visit('http://localhost:3000/#/index/dashboardview2');
  });

  it('第1秒：数字应为1', () => {
    cy.get('[data-test="number"]').should('have.text', '0');
    cy.tick(1000);
    cy.get('[data-test="number"]').should('have.text', '1');
  });

  it('第2秒：数字应为2', () => {
    // 直接继续tick就行，时钟是延续的，不用重新初始化
    cy.tick(1000);
    cy.get('[data-test="number"]').should('have.text', '2');
  });

  // 可选：如果需要重置组件状态
  it('重置后再测试', () => {
    // 这里可以通过Vue实例修改组件状态，比如直接重置number
    cy.get('[data-test="number"]').then(el => {
      const vm = el.componentInstance;
      vm.number.value = 0;
    });
    cy.get('[data-test="number"]').should('have.text', '0');
    cy.tick(1000);
    cy.get('[data-test="number"]').should('have.text', '1');
  });
});

你遇到的错误怎么解决 #

你碰到的无法读取null的'details'属性错误，是因为关闭测试隔离后，在beforeEach里重复调用cy.clock()导致的——第二次调用会尝试重置已有的时钟，但此时页面的定时器上下文已经混乱，触发了Cypress内部错误。直接删掉beforeEach里的cy.clock()，只在before里调用一次就好。

其他可选方案 #

如果不想关闭测试隔离（比如需要完全独立的测试环境），那就每个测试用例都重新访问页面并初始化时钟，这样每个测试都是从0开始：

describe('测试setInterval组件', () => {
  beforeEach(() => {
    cy.clock(0, ['setInterval']);
    cy.visit('http://localhost:3000/#/index/dashboardview2');
  });

  it('第1秒：数字应为1', () => {
    cy.get('[data-test="number"]').should('have.text', '0');
    cy.tick(1000);
    cy.get('[data-test="number"]').should('have.text', '1');
  });

  it('第2秒：数字应为2（独立测试）', () => {
    cy.get('[data-test="number"]').should('have.text', '0');
    cy.tick(2000);
    cy.get('[data-test="number"]').should('have.text', '2');
  });
});

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