web-dev-qa-db-ja.com

JESTユニットテスト用のドキュメントのキーダウンをシミュレートする

JESTを使用して、ドキュメントにキーダウンリスナーがアタッチされているコンポーネントの単体テストを行います。

JESTでこれをテストするにはどうすればよいですか？ドキュメントのキーダウンイベントをシミュレートするにはどうすればよいですか？フォーカスされた要素に関係なくキーボードアクションに応答することになっているため、イベントリスナーがドキュメント上にある必要があります。

編集：ここでの質問は、ドキュメントまたはdocument.bodyでのイベントのシミュレーションに関するものです。すべての例は、実際のDOMノードに関するものであり、正常に機能しますが、ドキュメントは機能しません。

現在これを行おうとしています：

TestUtils.Simulate.keyDown(document, {keyCode : 37}); // handler not invoked
unit-testingreactjsaddeventlistenerjestjsreactjs-testutils
11
Vaibhav Garg

私はまったく同じ問題を抱えていましたが、残念ながらTestUtils.Simulateを使用してこれを解決する方法の詳細を見つけることができませんでした。ただし、 この問題 は、jestテスト内でKeyboardEventを使用して.dispatchEventを直接呼び出すというアイデアを私に与えました。

var event = new KeyboardEvent('keydown', {'keyCode': 37});
document.dispatchEvent(event);

KeyboardEventの詳細については、こちらをご覧ください： https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent

24
Iris Schaffer

コンポーネントをマウントする前に、_document.eventListener_全体をモック関数に置き換えることもできます。

_let events;
document.addEventListener = jest.fn((event, cb) => {
  events[event] = cb;
});
_

そして、マウント後に_events[event]_を呼び出して、イベントをシミュレートします。例：

_events.keydown({ keyCode: 37 })
_

また、DOMイベントを処理するテストが多数ある場合は、beforeEach()関数の最初の部分を実行するのは非常に快適です。

2
andrianov