升级@mui/x-date-pickers后Jest快照测试CI环境因timestamp失败

1. 统一管理Fake Timers的生命周期 #

在测试的前置/后置钩子中处理定时器，避免测试用例间的状态干扰：

beforeEach(() => {
  // 使用Jest推荐的modern模式Fake Timers（适配Jest 27+）
  jest.useFakeTimers({ legacyFakeTimers: false });
  jest.setSystemTime(new Date('04 Dec 1995 00:12:00 GMT'));
});

afterEach(() => {
  jest.useRealTimers();
});

2. 推进异步定时器后再生成快照 #

@mui/x-date-pickers内部可能存在异步初始化逻辑，需手动触发所有待处理定时器，确保组件状态稳定：

test('date picker snapshot matches', () => {
  const { container } = render(<YourDatePickerComponent />);
  
  // 执行所有待处理的定时器回调
  jest.runAllTimers();
  
  expect(container).toMatchSnapshot();
});

3. 直接Mock Date.now()固定timestamp #

如果Fake Timers未覆盖组件内部的时间调用，直接mockDate.now()强制返回固定值：

beforeEach(() => {
  const fixedTimestamp = new Date('04 Dec 1995 00:12:00 GMT').getTime();
  jest.spyOn(Date, 'now').mockReturnValue(fixedTimestamp);
});

afterEach(() => {
  jest.restoreAllMocks();
});

4. 检查Jest配置的定时器模式 #

确保jest.config.js中未强制使用真实定时器：

module.exports = {
  // ...其他配置项
  timers: 'fake', // 保持此项为'fake'或默认值（默认即为'fake'）
};

这些操作的核心是确保组件所有依赖时间的逻辑都被锁定到指定时间点，同时避免测试用例间的状态污染，应该能解决CI环境中data-timestamp与快照不符的问题。

内容的提问来源于stack exchange，提问作者Roger Bücker