Jestテストに失敗しました：TypeError：window.matchMediaは関数ではありません

Question

これは私の最初のフロントエンドテストの経験です。このプロジェクトでは、jest snapshot testingを使用していて、私のコンポーネントの中にエラーTypeError: window.matchMedia is not a functionがあります。

私はjestのドキュメントを読んでいますが、私は「Manual mocks」セクションを見つけましたが、まだそれを行う方法はありません。

Answer 1

Jestは、ブラウザ環境を作成するためにjsdomを使用します。しかし、JSDomはwindow.matchMediaをサポートしていないので、自分で作成する必要があります。

Jestのmanual mocksは、モジュール境界で動作します。つまり、require/import文は、グローバルであるため、window.matchMediaをそのままモックするのに適していません。

1. がwindow.matchMediaをエクスポートし、独自のローカルmatchMediaモジュールを定義します。

   は、そのため、2つのオプションがあります。 - これにより、テストで使用するマニュアルモックを定義することができます。

2. setup fileを定義すると、matchMediaのモックがグローバルウィンドウに追加されます。あなたは、少なくともあなたのテストが実行できるようになるか、異なる状態をシミュレートするために必要な場合は、プライベートメソッドは、あなたができるように独自のものを書きたいかもしれませんモックとしてmatchMedia polyfillを使用することができ、これらのオプションのいずれかで

私は、この技術を使用してきた

window.matchMedia = window.matchMedia || function() { 
    return { 
     matches : false, 
     addListener : function() {}, 
     removeListener: function() {} 
    }; 
}; 

Answer 2

だ設定モッキーの束を解決する問題を引き起こす。

describe("Test",() => { 
    beforeAll(() => { 
    Object.defineProperty(window, "matchMedia", { 
     value: jest.fn(() => { return { matches: true } }) 
    }); 
    }); 
}); 

またはあなたはそれをすべての時間をモックとしたい場合、あなたはあなたのpackage.jsonから呼び出さごmocksファイル内に置くことができます： "setupTestFrameworkScriptFile": "<rootDir>/src/tests/mocks.js",

参照：テストファイル内setupTestFrameworkScriptFile

Answer 3

：それは私がテストに合格することができます（テスト上記の）私の冗談のテストファイルにmatchMediaスタブを入れ冗談fs manual mockと同様の挙動