reactjsreact-intl

React intl FormattedDate format issue on test snapshots


I'm using the FormattedDate component from react-intl (v6.4.4) package to display a date:

<span className={styles.CreationDate}>
  <FormattedDate
     value={created}
     weekday="long"
     day="numeric"
     hour="2-digit"
     minute="2-digit"
     dayPeriod="long"
     month="long"
 />
</span>

Everything seems to works fine but I have a problem with my test snapshots (I'm using @testing-library/react to generate them). Specifically, when I generate them locally I see something like this:

<span
  class="CreationDate"
>
   Tuesday, February 1 at 01:00 AM
</span>

but when I generate them via CI that runs all my tests before deploying the code I see a different date format:

<span
  class="CreationDate"
>
  Tuesday, February 1, 01:00 AM
</span>

this is likely due to a different timezone in which the CI run. Is there a way to force a specific date format to generate my snaps ?


Solution

  • My solution to this would be to mock the FormattedDate component

    jest.mock('react-intl', () => {
      const rest = jest.requireActual('react-intl');
      return { ...rest, FormattedDate: () => 'Tuesday, February 1 at 01:00 AM' };
    });