React アプリでのユニット テストのローカリゼーション. Mocking Intl API のソリューション

アプリにローカライズを追加し、Jest 単体テストと React Testing Library でテストしようとしていますか?

Intl Internationalization API を使用していて、それをモックする際に問題が発生していますか?


この記事は、最初に https://thoughtsandstuff.com/unit-testing-localizations-in-react-app-solution-for-mocking-intl-ap に投稿されました (最新のものです).


私は最近、Intl.DateTimeFormat および Intl.NumberFormat 関数を使用するアプリに取り組んでいます.アプリにローカライズを追加することは、かなり重要な機能です.これはすべてのユーザーに影響を与えるため、すべてのコンポーネントと機能が適切にテストされていることを確認することは理にかなっています.

IntlPolyfill を使用するとうまくいくという記事がいくつかありました.

アドバイスは、次のようにポリフィルを test-utils.js ファイルにインポートすることでした.

// test-utils.js
import IntlPolyfill from 'intl'
import 'intl/locale-data/jsonp/pt'

export const setupTests = () => {
  if (global.Intl) {
    Intl.NumberFormat = IntlPolyfill.NumberFormat
    Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat
  } else {
    global.Intl = IntlPolyfill
  }
}

これは、ローカライズされた通貨と数値の書式設定をテストするために機能しました.ただし、UTC 以外ではタイムゾーン文字列を使用できませんでした. Intl.NumberFormat API を使用して関数を単体テストしようとすると、次のエラーが発生しました.
RangeError: timeZone is not supported.IntlPolyfill は半分の仕事しかできず、Node はタイムゾーンをサポートしていないことがわかりました.

ソリューション

解決策は、次のように IntlPolyfill パッケージと一緒に date-time-format-timezone を使用することでした.

// test-utils.js
import IntlPolyfill from 'intl'
import DateTimeFormatTimezonePolyfill from 'date-time-format-timezone';
import 'intl/locale-data/jsonp/pt'

if (global.Intl) {
    Intl.NumberFormat = IntlPolyfill.NumberFormat;
    Intl.DateTimeFormat = DateTimeFormatTimezonePolyfill;
} else {
    global.Intl = IntlPolyfill;
}

これで、すべての単体テストに合格しました!