如何使用玩笑来模拟window.navigator.language

小编典典

如何使用玩笑来模拟window.navigator.language

reactjs

我试图window.navigator.language在玩笑的单元测试中模拟浏览器中的属性，以便可以测试页面上的内容使用的是正确的语言

我发现有人在网上使用此功能：

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

我已经将其设置在测试文件的顶部，并且在那里可以正常工作

但是，当我在一个单独的测试中重新定义（人们设置为确保可配置性设置为true）时，它不会重新定义它，而只是使用旧值，有人知道一种绝对可以更改它的方法吗？

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

对于这些测试，它不会将语言更改为我设置的新语言，而是始终使用顶部的语言

阅读 431

2020-07-22

共1个答案

小编典典

window.navigator并且它的属性是只读的，这就是为什么Object.defineProperty需要set
的原因window.navigator.language。它应该可以多次更改属性值。

问题在于该组件已经在中实例化beforeEach，window.navigator.language更改不会影响它。

Object.defineProperty手动使用模拟属性将需要存储原始描述符并也手动还原它。可以使用完成此操作jest.spyOn。jest.clearAllMocks()不会帮助手动间谍/模拟，Jest间谍可能不需要。

可能应该是：

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

2020-07-22