React应用默认时区设为UTC：解决E2E测试日期断言失败问题

你碰到的这个问题很典型——本地和CI环境的系统时区差异，导致日期断言结果不匹配，咱们一步步来搞定它，同时在Redux层面实现UTC时区的全局配置：

1. 先创建全局配置文件 #

先定义一个统一的配置文件来管理时区设置，后续要修改也更方便：

// src/config/appConfig.js
export const APP_CONFIG = {
  defaultTimezone: 'UTC'
};

2. 在Redux中集成时区配置 #

把时区设置放到Redux状态里，让整个应用都能访问到，还能支持后续动态修改（如果需要的话）：

// src/store/slices/appSlice.js
import { createSlice } from '@reduxjs/toolkit';
import { APP_CONFIG } from '../../config/appConfig';

const initialState = {
  activeTimezone: APP_CONFIG.defaultTimezone
};

const appSlice = createSlice({
  name: 'app',
  initialState,
  reducers: {
    setActiveTimezone: (state, action) => {
      state.activeTimezone = action.payload;
    }
  }
});

export const { setActiveTimezone } = appSlice.actions;
export default appSlice.reducer;

然后把这个slice添加到你的Redux Store中：

// src/store/index.js
import { configureStore } from '@reduxjs/toolkit';
import appReducer from './slices/appSlice';

export const store = configureStore({
  reducer: {
    app: appReducer
  }
});

3. 让Moment全局使用Redux中的时区 #

接下来要确保Moment整个应用都遵循这个时区设置，在根组件App.jsx里做初始化：

// src/App.jsx
import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import moment from 'moment-timezone';

// 注意：要先安装moment-timezone，因为核心moment库不带时区数据
// npm install moment-timezone 或者 yarn add moment-timezone

function App() {
  const activeTimezone = useSelector(state => state.app.activeTimezone);

  useEffect(() => {
    // 设置Moment的全局默认时区
    moment.tz.setDefault(activeTimezone);
  }, [activeTimezone]);

  return (
    <div className="app-container">
      {/* 你的应用内容 */}
    </div>
  );
}

export default App;

4. E2E测试环境的额外保障 #

为了彻底避免测试环境的时区干扰，建议在测试启动脚本里也强制设置UTC时区。比如用Cypress的话：

// cypress/support/e2e.js
import moment from 'moment-timezone';

// 在所有测试前执行一次时区设置
before(() => {
  moment.tz.setDefault('UTC');
  // 如果需要模拟浏览器的系统时区，还可以补充：
  // cy.visit('/', {
  //   onBeforeLoad: (win) => {
  //     win.Date = class extends Date {
  //       constructor(...args) {
  //         if (args.length === 0) super(new Date().toUTCString());
  //         else super(...args);
  //       }
  //     };
  //   }
  // });
});

为什么这样能解决问题？ #

本地机器和CI服务器的系统时区不同，导致Moment默认生成的日期（比如moment().format()）在两个环境下输出的字符串不一致，断言自然失败。通过全局强制设置UTC时区，不管运行环境是什么时区，应用和测试都会统一使用UTC时间，日期断言就能在本地和CI上保持一致了。

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