How to mock window.navigator.language in jest 27

Question

I've got a function like

export function formatDate(date: string){
    return new Intl.DateTimeFormat(navigator.language).format(new Date(date))
}

I'm attempting to write a unit test in vanilla jest (not using jsdom library), but as you can see I need to be able to mock window.navigator.language.

I've so far tried,

test('UK date format', () => {
  Object.defineProperty(window.navigator, 'language', {value: 'en-GB', configurable: true})
  expect(window.navigator.language).toBe('en-GB')
})

but I cannot for the life of my understand how you're supposed to mock window.navigator in jest.

Ideally I'd like to be able to mock a new value for window.navigator.language on each test. So I could have a test for en-US, fr etc etc

Any help to understand how you're supposed to mock this would be greatly appreciated.

Using global instead of window? Nope doesn't help unfortunately. — ChrisB, Jun 02 '21 at 12:41

Ben Smith · Accepted Answer · 2022-11-18T21:28:59.507

7

You can mock window.navigator.language using Jest as follows:

let windowSpy: jest.SpyInstance;;

beforeEach(() => {
    // Spy on the read-only window function which
    // returns a reference to the current window.
    windowSpy = jest.spyOn(window, 'window', 'get');
});

// Clean-up the spy after every test
afterEach(() => windowSpy.mockRestore());

const setMockLanguage = (language: string) =>
    // Set how you want window.navigator.language to behave
    windowSpy.mockImplementation(() => ({
        navigator: {
            language
        }
    }));

test('UK date format', () => {
    setMockLanguage('en-GB');

    expect(window.navigator.language).toBe('en-GB');
});

test('US date format', () => {
    setMockLanguage('en-US');

    expect(window.navigator.language).toBe('en-US');
});

I've included some comments in the code to help.

You can see it working here.

edited Nov 18 '22 at 21:28

answered Jun 06 '21 at 00:10

Ben Smith

19,589
6
65
93

@ChrisB great news :) – Ben Smith Jun 10 '21 at 09:07
How do you do this in TypeScript? – Hyfy Dec 01 '21 at 07:21
2

@Hyfy `windowSpy: jest.SpyInstance` should be enough – nkint Mar 21 '22 at 17:11
1

I've updated the code with the type as suggested by @nkint – Ben Smith Mar 21 '22 at 20:42
not working "Property window does not have access type get" – Maxime Krier Nov 18 '22 at 13:15
@MaximeKrier you can see it working here https://replit.com/@8enSmith/Mock-windownavigatorlanguage?v=1 – Ben Smith Nov 18 '22 at 14:24

How to mock window.navigator.language in jest 27

1 Answers1