お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。
投稿日:
言語::TypeScriptライブラリ::React

src/@typeswindow.d.tsのような物を定義して使う方法。Reactに外部スクリプトを組み込んだ場合などに有用。

<script src="https://example.com/foo.js" />みたいなやつ。

確認環境

Env Ver
TypeScript 4.2.3

サンプルコード

declare global {
  interface Window {
    dataLayer: Array<unknown>;
  }
}

// これがないと他から見れない
export {};
  • global.navigatorをモックにする方法
    • モックというか書き換えてるだけ
  • jestのモック機能はプロパティのモックが出来ないので、実オブジェクトを強制的に書き換えて実施する

サンプルコード

  • Object.defineProperty() を利用して実装
    • value, プロパティが返す値
    • configurable, 再定義可能かどうか、設定しないと再実行でコケる
  • 実際の使用ではユーティリティ関数を作っておき、 afterAll()navigator.userAgentを初期値に戻すのが望ましい
Object.defineProperty(global.navigator, 'userAgent', {
  value:
      'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36',
  configurable: true,
});