Mock Intl and Date globals in Jest (easily!)

In Javascript land, mocking the browser global objects can be a bit of a pain for tests. Searching StackOverflow gives plenty of complicated answers. Some suggesting using 3rd party mock libraries. Some that overwrite the global object itself…. But J…


This content originally appeared on DEV Community and was authored by Jeff Sheets

In Javascript land, mocking the browser global objects can be a bit of a pain for tests. Searching StackOverflow gives plenty of complicated answers. Some suggesting using 3rd party mock libraries. Some that overwrite the global object itself.... But Jest already has this capability built-in and it isn't so bad:

So let's say you have a method that gets the user's timezone or the timezone offset. (the timezone offset is used sometimes since IE11 doesn't support easily reading the timezone, but I digress)

/**
 * Useful when passing the browser timezone to a backend Java API that reads a timezone in using ZoneId.of(tz),
 *  as both 'America/Chicago' and '-0600' are valid values when passed to the Java API.
 *  The Offset is used to handle IE11 and other older browsers.
 */
export const getUserTimeZoneOrOffset = () => {
  let timeZone;
  try {
    timeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;
  } catch (error) {
    // Ignore if this happens, and just use the fallback
  }

  if (!timeZone) {
    //Could not get a browser timezone, maybe IE11, so instead use timezoneOffset formatted for Java
    // https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/time/ZoneOffset.html#of(java.lang.String)
    const offset = new Date().getTimezoneOffset();

    //Yeah this offset +/- seems backwards,
    // but JS actually returns a positive when local tz is behind UTC (like for US tzs)
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
    // e.g. offset = 300, timeZone='-0500'
    const plusMinus = offset <= 0 ? '+' : '-';
    //leftpad a 0 when needed for two digits
    const hours = ('0' + Math.floor(Math.abs(offset) / 60)).slice(-2);
    const minutes = ('0' + (offset % 60)).slice(-2);
    timeZone = `${plusMinus}${hours}${minutes}`;
  }

  return timeZone;
};

Now to test this, we'll need to mock out both the Intl and Date Javascript globals. We can do this using Jest's spyOn method to temporarily replace the global method with our own implementation. Notice that we setup the spy in the beforeEach and reset everything in the afterEach. The setup works something like this:

import { getUserTimeZoneOrOffset } from './timeZoneUtils.js';  
describe('getUserTimeZoneOrOffset', () => {
    let mockOffset;
    let mockTimezone;

    beforeEach(() => {
      mockTimezone = undefined;
      jest.spyOn(Intl, 'DateTimeFormat').mockImplementation(() => ({
        resolvedOptions: () => ({
          timeZone: mockTimezone
        })
      }));

      mockOffset = undefined;
      jest
        .spyOn(Date.prototype, 'getTimezoneOffset')
        .mockImplementation(() => mockOffset);
    });

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

    test('returns timezone name when found', () => {
      mockTimezone = 'America/Chicago';
      const result = getUserTimeZoneOrOffset();
      expect(result).toBe('America/Chicago');
    });

    test.each([
      [300, '-0500'],
      [150, '-0230'],
      [-60, '+0100'],
      [-330, '+0530'],
      [0, '+0000'],
      [-765, '+1245']
    ])('timezoneOffset for %i is %s', (offset, expected) => {
      mockOffset = offset;
      const result = getUserTimeZoneOrOffset();
      expect(result).toBe(expected);
    });
  });

But that's it! No need to import an extra library. This is all supplied directly in Jest itself!


This content originally appeared on DEV Community and was authored by Jeff Sheets


Print Share Comment Cite Upload Translate Updates
APA

Jeff Sheets | Sciencx (2021-05-12T01:01:45+00:00) Mock Intl and Date globals in Jest (easily!). Retrieved from https://www.scien.cx/2021/05/12/mock-intl-and-date-globals-in-jest-easily/

MLA
" » Mock Intl and Date globals in Jest (easily!)." Jeff Sheets | Sciencx - Wednesday May 12, 2021, https://www.scien.cx/2021/05/12/mock-intl-and-date-globals-in-jest-easily/
HARVARD
Jeff Sheets | Sciencx Wednesday May 12, 2021 » Mock Intl and Date globals in Jest (easily!)., viewed ,<https://www.scien.cx/2021/05/12/mock-intl-and-date-globals-in-jest-easily/>
VANCOUVER
Jeff Sheets | Sciencx - » Mock Intl and Date globals in Jest (easily!). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/12/mock-intl-and-date-globals-in-jest-easily/
CHICAGO
" » Mock Intl and Date globals in Jest (easily!)." Jeff Sheets | Sciencx - Accessed . https://www.scien.cx/2021/05/12/mock-intl-and-date-globals-in-jest-easily/
IEEE
" » Mock Intl and Date globals in Jest (easily!)." Jeff Sheets | Sciencx [Online]. Available: https://www.scien.cx/2021/05/12/mock-intl-and-date-globals-in-jest-easily/. [Accessed: ]
rf:citation
» Mock Intl and Date globals in Jest (easily!) | Jeff Sheets | Sciencx | https://www.scien.cx/2021/05/12/mock-intl-and-date-globals-in-jest-easily/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.