How to mock window.navigator.language using jest
window.navigator
and its properties are read-only, this is the reason why Object.defineProperty
is needed to set window.navigator.language
. It's supposed to work for changing property value multiple times.
The problem is that the component is already instantiated in beforeEach
, window.navigator.language
changes don't affect it.
Using Object.defineProperty
for mocking properties manually will require to store original descriptor and restore it manually as well. This can be done with jest.spyOn
. jest.clearAllMocks()
wouldn't help for manual spies/mocks, it may be unneeded for Jest spies.
It likely should be:
let languageGetter;
beforeEach(() => {
languageGetter = jest.spyOn(window.navigator, 'language', 'get')
})
it('should do thing 1', () => {
languageGetter.mockReturnValue('de')
wrapper = shallow(<Component {...props} />)
expect(wrapper.state('currentLanguage')).toEqual('de')
})
...
Alternatively
jest config file
setupFiles: ['./test/mock-data/globals.js']
globals.js
const navigator = { language: 'Chalcatongo Mixtec', ...anyOtherPropertiesYouNeed };
Object.defineProperty(window, 'navigator', {
value: navigator,
writable: true
});
then you can mutate freely in your individual test setup
Adding a little bit to Estus Flask's answer, you can also spy on your setup file:
In jest config file activate the setupFiles feature:
setupFiles: ['./test/mock-data/globals.js']
Then inside globals.js spy on the userAgent or any other property:
global.userAgent = jest.spyOn(navigator, 'userAgent', 'get');
Finally in your test mock the return value:
describe('abc', () => {
global.userAgent.mockReturnValue(
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4)\
AppleWebKit/600.1.2 (KHTML, like Gecko)\
Version/13.0.0 Safari/600.1.2'
);
test('123', async () => {
const result = await fnThatCallsOrUseTheUserAgent();
expect(result).toEqual('Something');
});
});