React Intl FormattedDate测试快照格式不一致，如何强制统一？

问题确实是因为CI和本地环境的时区/区域设置差异导致的，react-intl的FormattedDate会基于运行环境的locale和时区生成格式化结果，不同环境下输出自然不一样。下面给你几个可行的解决办法：

1. 测试时固定locale和时区 #

在测试代码里，用IntlProvider包裹待测试组件，明确指定locale和timeZone，强制格式化规则统一。

示例代码：

import { render } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
import YourComponent from './YourComponent';

test('renders creation date correctly', () => {
  const { asFragment } = render(
    <IntlProvider locale="en-US" timeZone="UTC">
      <YourComponent created={new Date('2024-02-01T01:00:00Z')} />
    </IntlProvider>
  );
  expect(asFragment()).toMatchSnapshot();
});

这样不管本地还是CI环境，都会用en-US区域和UTC时区来格式化日期，输出完全一致。

2. 自定义格式化逻辑，脱离环境依赖 #

如果需要完全控制日期格式，不依赖react-intl的自动推导，可以自己封装一个格式化函数，明确指定所有格式化选项：

示例代码：

// 自定义日期格式化函数
const formatCreationDate = (date) => {
  return new Intl.DateTimeFormat('en-US', {
    weekday: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    dayPeriod: 'long',
    month: 'long',
    timeZone: 'UTC', // 固定时区
  }).format(date);
};

// 组件里使用
<span className={styles.CreationDate}>
  {formatCreationDate(created)}
</span>

这种方式直接锁定了格式化规则，测试时不管环境如何，输出都是固定的。

3. Mock FormattedDate组件（快速固定快照） #

如果只是想让快照测试通过，不想修改组件逻辑，可以在测试里mock react-intl的FormattedDate，让它返回固定的字符串：

示例代码：

import { render } from '@testing-library/react';
import { FormattedDate } from 'react-intl';
import YourComponent from './YourComponent';

jest.mock('react-intl', () => ({
  ...jest.requireActual('react-intl'),
  FormattedDate: ({ value }) => {
    // 模拟固定的格式化结果
    return 'Tuesday, February 1 at 01:00 AM';
  },
}));

test('renders creation date correctly', () => {
  const { asFragment } = render(<YourComponent created={new Date('2024-02-01T01:00:00Z')} />);
  expect(asFragment()).toMatchSnapshot();
});

这种方法适合快速解决快照不一致问题，不用调整组件内部逻辑，但缺点是无法验证FormattedDate的实际格式化逻辑。

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