如何用Sinon.js FakeTimers快进N分钟后再真实等待N分钟？

首先得说，你的自动登出逻辑设计很合理，但测试里踩了几个Sinon FakeTimers和Cucumber测试上下文的坑，咱们一步步捋清楚并解决。

现有测试代码的核心问题 #

1. Cucumber钩子用错地方了：你在browser.execute()里面写before()/after()完全无效，这些钩子是属于Cucumber测试生命周期的，得放在测试步骤外面，不能塞到浏览器执行的脚本里。
2. Tick的格式不对：Sinon 5.x版本的clock.tick()不认'59:00'这种字符串格式，必须传毫秒数（比如59分钟就是59 * 60 * 1000 = 3540000）。
3. 上下文隔离问题：clock变量是在浏览器上下文里定义的，你的Node.js测试代码根本拿不到它，后续的clock.restore()等于白写，还会污染后续测试。
4. 自动推进时间冲突：你开了shouldAdvanceTime: true，FakeTimers会自动走时间，和你手动tick的逻辑打架，得关掉这个配置。

修正后的测试方案 #

第一步：正确初始化Sinon并管理FakeTimers生命周期 #

先把Sinon注入和时钟管理的逻辑拆出来，确保在浏览器上下文里正确挂载，还能随时恢复：

const { When } = require('cucumber');
const fs = require('fs');
const path = require('path');

// 用全局变量名在浏览器上下文存时钟，避免跨上下文变量传递问题
const CLOCK_GLOBAL_NAME = 'autoLogoutTestClock';

async function setupSinon() {
  const sinonPath = require.resolve('sinon');
  const sinonScriptPath = path.join(sinonPath, '../../pkg/sinon.js');
  const scriptContent = await fs.promises.readFile(sinonScriptPath, 'utf-8');
  
  // 只在浏览器没有Sinon的时候注入脚本
  await browser.execute((content) => {
    if (!window.sinon) {
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.text = content;
      document.head.appendChild(script);
    }
  }, scriptContent);
}

async function fastForwardMinutes(minutes) {
  await setupSinon();
  
  // 在浏览器里创建FakeTimers并快进时间
  await browser.execute((targetMinutes, clockName) => {
    // 先清理之前的时钟，避免测试污染
    if (window[clockName]) {
      window[clockName].restore();
    }
    
    // 创建FakeTimers，只fake setTimeout，关闭自动推进
    const clock = window.sinon.useFakeTimers({
      now: Date.now(),
      shouldAdvanceTime: false,
      toFake: ['setTimeout']
    });
    
    // 快进指定分钟数（转成毫秒）
    clock.tick(targetMinutes * 60 * 1000);
    
    // 把时钟挂到window上，方便后续恢复
    window[clockName] = clock;
  }, minutes, CLOCK_GLOBAL_NAME);
}

async function cleanUpFakeTimers() {
  // 恢复FakeTimers，避免影响其他测试
  await browser.execute((clockName) => {
    if (window[clockName]) {
      window[clockName].restore();
      delete window[clockName];
    }
  }, CLOCK_GLOBAL_NAME);
}

第二步：实现「快进虚拟时间 + 真实等待」的逻辑 #

这里要明确：FakeTimers快进的是页面里定时器感知的虚拟时间，而真实等待是让测试代码暂停执行指定时间，两者完全独立，咱们按需求组合：

async function iWaitForMinutes(minutes) {
  // 先快进N分钟，触发模态框
  await fastForwardMinutes(minutes);
  
  // 验证模态框是否弹出（替换成你实际的模态框选择器）
  const isModalShown = await browser.isVisible('#auto-logout-modal');
  if (!isModalShown) {
    throw new Error(`Auto-logout modal didn't pop up after fast-forwarding ${minutes} minutes`);
  }
  
  // 再真实等待指定时间（比如1分钟，测试后续登出逻辑）
  // 测试建议：把生产环境的1分钟改成测试环境的10秒，不然测试太慢
  const realWaitMs = minutes * 60 * 1000;
  await browser.pause(realWaitMs);
  
  // 验证是否自动登出（替换成你的登录页判断逻辑）
  const currentUrl = await browser.getUrl();
  if (!currentUrl.includes('/login')) {
    throw new Error('User wasn\'t auto-logged out after real wait');
  }
  
  // 最后清理FakeTimers
  await cleanUpFakeTimers();
}

When(/^I wait for (\d+) minutes$/, iWaitForMinutes);

module.exports = {
  iWaitForMinutes,
  fastForwardMinutes,
  cleanUpFakeTimers
};

额外注意事项 #

1. Sinon版本适配：Sinon 5.x的FakeTimers API和新版有差异，比如shouldAdvanceTime是5.x支持的选项，别乱升级版本导致代码失效。
2. 用户事件重置：如果你的自动登出逻辑依赖mousemove/keydown等操作重置计时器，快进时间前要确保页面没有模拟这些事件，不然计时器会被重置，模态框出不来。
3. 测试环境优化：生产环境的1小时阈值在测试里太耗时，建议在测试环境把阈值改成1分钟（59秒弹框+1秒登出），逻辑完全一致，测试速度快很多。
4. FakeTimers作用范围：只fake你需要的定时器（比如setTimeout），别随便fakeDate，不然页面里其他依赖系统时间的逻辑会出问题。

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