web-dev-qa-db-ja.com

ドキュメントReactJS / JSDomのクリックのシミュレーション

そのため、ドキュメントにクリックイベントを追加するコードのテストをいくつか作成しています。 JSDom、ReactJS、Mocha/Chaiのセットアップを使用しています。テストで次のコードを試しました。

_document.addEventListener('click', function() {
  console.log('test');
});
React.addons.TestUtils.Simulate.click(document);
//also tried React.addons.TestUtils.Simulate.click(document.body);
_

ただし、このコードは、私が期待しているエコーを生成しません。

JSDomとReactJSを使用してドキュメントのクリックやキーアップなどをシミュレートする方法はありますか？

[〜＃〜] update [〜＃〜]

Nickの回答に対して、私はこのコードをテストに追加しようとしました。

_document.body.addEventListener('click', function() {
  console.log('test');
});

document.body.click();
_

そして、コンソールログの出力が得られなくなるまで。 JSDomとこの種のことを行うことに問題があるかどうかはわかりません。

このコードを単体テストできない場合は、問題ありません。現在、単体テストできないコードがすでにいくつかあります（幅、高さなどを取得できるようにするために実際のDOMが必要なコード...）が、私はほとんどのコードを単体テストできるようにしたいと考えています（そして、単体テストにPhantomJSを使用することに興味はありません）。私の統合テストは、そのタイプのコードをカバーします。

UPDATE2

もう1つ注意すべき点は、console.log(document);でclickの__listeners_プロパティにオブジェクトがアタッチされているのを見ると、イベントがアタッチされていることがわかっているのに、表示されないということです。実行する。

javascriptunit-testingreactjsjsdom
13
ryanzec

更新：document.body.clickはブラウザで機能しますが、jsdomの場合は、手動でイベントを作成する必要があります。

document.body.addEventListener('click', function() {
  console.log('test');
});

var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, true);
document.body.dispatchEvent(evt)

上記のコードはJestで機能しており、「ソロ」jsdomでも機能するはずです。

2018年秋の休日の更新????

イベントのシミュレーションに関するツールは大幅に改善されました。私は現在、優れた react-testing-library を使用してコンポーネントをレンダリングし、イベントをディスパッチするようにアプローチをシフトしています。

import {render, fireEvent} from 'react-testing-library'

test('example', () => {
  const handleClick = jest.fn()

  const {getByText} = render(<div><button onClick={handleClick}>Click Me</button></div>)
  fireEvent.click(getByText('Click Me'))

  expect(handleClick).toHaveBeenCalled()
})

操り人形師やSelenium（またはヒノキ！）のようなエンドツーエンドのテストは、実際に機能するという最高レベルの信頼性を提供すると私は信じていますが、これは、手動のイベント作成でテストを汚染することなく、非常に大きな価値を提供します。

29
Nick Tomlin

React.addons.TestUtils.Simulateは、仮想イベントでのみ機能します。ネイティブイベントをディスパッチする場合は、DOMAPIを使用して直接ディスパッチできます。

クリックをシミュレートするときに、これをレンダリングするコンポーネントがある場合：

<div>
   <button onClick={alert}>click me</button>
</div>

そして、 'buttonEl'という変数の<button/>への参照があり、これを実行します。

React.addons.TestUtils.Simulate.click(buttonEl, 'hello world');

'helloworld'が含まれているアラートが表示されます。 test utilsが行うのは、仮想イベントを作成し、それを仮想DOMツリーにバブルさせて、途中でイベントハンドラーを呼び出すことだけです。

6
Brigand

Event.initEvent()は非推奨になり、代わりにEvent()コンストラクターを使用する必要があります。

// Add a click event listener to the document
document.addEventListener('click', function() {
    console.log('test');
});

// Create a click event with optional event initialisers: bubbles, cancelable and composed
var evt = new Event('click', { bubbles: false, cancelable: false, composed: false });

// Event can then be dispatched against any element, not only the document
document.dispatchEvent(evt);
myDiv.dispatchEvent(evt);

Internet Explorerを除いて、ブラウザのサポートは良好です。

参照：

2
Wayne

Eventを作成し、ディスパッチするだけです。

// Add an event listeners to the document
document.addEventListener('click', function() {
    console.log('test');
});

// Create a new `click` event and `dispatch` it
var event = new MouseEvent('click')
document.dispatchEvent(event)
0
Riccardo Bartoli