运行webpack/react应用时如何模拟时间用于测试，无需修改系统时间或用虚拟机？

以下方案均不需要修改Windows系统时间，也无需使用虚拟机，适配你当前的技术栈：

方案1：Chromium内核浏览器内置时间覆盖（优先推荐，无需改代码） #

Chrome、Edge等主流浏览器自带时间覆盖功能，直接修改前端运行时获取的时间，操作步骤：

• 打开应用页面，按F12唤起开发者工具
• 按下 Ctrl+Shift+P 调出命令面板
• 搜索「Override time」并选中对应选项
• 输入你需要模拟的零点时间段时间（例如2024-01-01 00:05:00），刷新页面后应用获取的所有时间都会替换为你设置的模拟时间，调试完成后关闭时间覆盖开关即可恢复正常。

方案2：npm包劫持全局时间（适合开发环境长期复现） #

可以用轻量的时间Mock包mockdate直接劫持JS全局Date对象，开发环境生效不会影响生产：

• 安装依赖：npm install mockdate --save-dev
• 在React项目开发入口文件（通常为src/index.jsx）中添加如下代码：

// 仅开发环境生效
if (process.env.NODE_ENV === 'development') {
  const MockDate = require('mockdate')
  // 自定义设置为你要模拟的零点时间
  MockDate.set('2024-01-01T00:10:00')
  // 调试完成后调用 MockDate.reset() 即可恢复正常时间
}

方案3：Sinon Fake Timers（适合同时测试定时逻辑的场景） #

如果你的问题和定时任务、延时触发逻辑相关，可以用sinon的假时钟能力，除了模拟固定时间外还可以快进时间模拟1小时内的时间流转：

• 安装依赖：npm install sinon --save-dev
• 入口文件添加代码：

if (process.env.NODE_ENV === 'development') {
  const sinon = require('sinon')
  // 初始时间设为零点，同时劫持所有定时相关API
  const clock = sinon.useFakeTimers(new Date('2024-01-01T00:00:00'))
  // 需要快进时间测试时调用 clock.tick(1000 * 60 * 30) 即可快进30分钟
  // 恢复正常调用 clock.restore()
}

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