Question

158

How to mock window.navigator.language using jest

rated 0 times [ 165] [ 7] / answers: 1 / hits: 34713 / 6 Years ago, thu, october 18, 2018, 12:00:00

I am trying to mock the window.navigator.language attribute in the browser in my jest unit tests so I can test that the content on my page is using the correct language

I have found people online using this:

Object.defineProperty(window.navigator, 'language', {value: 'es', configurable: true});

I have set it right at the top of my test file and it is working there

however, when I redefine in an individual test (and people set to make sure configurable was set to true) it wont redefine it and is just using the old value, does anyone know a way to definitely change it?

beforeEach(() => {

    jest.clearAllMocks()

    Object.defineProperty(global.navigator, 'language', {value: 'es', configurable: true});

    wrapper = shallow(<Component {...props} />)

})



  it('should do thing 1', () => {

      Object.defineProperty(window.navigator, 'language', {value: 'de', configurable: true});

      expect(wrapper.state('currentLanguage')).toEqual('de')

    })



it('should do thing 2', () => {

  Object.defineProperty(window.navigator, 'language', {value: 'pt', configurable: true});

  expect(wrapper.state('currentLanguage')).toEqual('pt')

})

for these tests it is not changing the language to the new language I have set, always using the one at the top

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dusty

Add To Favorites

Follow

Total Points: 739

Total Questions: 97

Total Answers: 85

Location: Angola

Member since Wed, Apr 13, 2022

2 Years ago

dusty questions

1 js fetch post works, but php is empty

Mon, Dec 14, 20, 00:00, 4 Years ago

1 Nested function component ReactJS

Mon, Mar 23, 20, 00:00, 4 Years ago

1 React Native - How do we know what child element is contained by parent?

Mon, Mar 16, 20, 00:00, 4 Years ago

1 Postman : How to assert all array elements exist in other array?

Fri, Jul 12, 19, 00:00, 5 Years ago

1 How to fix this error Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'div.com[min=]' is not a valid selector?

Thu, Jun 13, 19, 00:00, 5 Years ago

View All

answered 6 Years ago naya · Accepted Answer

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')

})

...