☰

jestを使用してwindow.navigator.languageをモックする方法 質問する

tag-icon • tag-icon javascript reactjs testing jestjs
jestを使用してwindow.navigator.languageをモックする方法 質問する

window.navigator.language私は、ページ上のコンテンツが正しい言語を使用していることをテストできるように、ブラウザで属性をモックしようとしています。

オンラインでこれを使用している人を見つけました:

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

テストファイルの先頭に設定しましたが、そこで動作しています

ただし、個別のテストで再定義すると (configurable が 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')
})

これらのテストでは、言語を私が設定した新しい言語に変更せず、常に一番上の言語を使用します。

ベストアンサー1

window.navigatorおよびその特性は読み取り専用であるため、Object.definePropertyを設定する必要があります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')
})
...

おすすめ記事