web-dev-qa-db-ja.com

EnzymeでkeyDown enterイベント（またはその他）をどのようにシミュレートしますか？

keyDownイベント、特にEnter、keyCode: 13。これを行うためにいくつかの異なる方法を試しましたが、どれも機能していません。私もオンラインで調べましたが、この機能はバグがあるか、現在のバージョンのEnzymeで動作していないようです。この機能が機能するかどうかを誰もが確実に知っていますか？もしそうなら、エンターまたは他のタイプのキーイベントをシミュレートするための適切な構文は何ですか？ありがとう！

これは私が現在持っているものであり、機能していません：

const input = wrapper.find('input');
input.simulate('keyDown', {keyCode: 13});

私の現在の酵素バージョンは2.4.1です

unit-testingreactjsfrontendenzyme
30
reectrix

KeyCodeを使用する代わりに、「Enter」の場合、mountを使用してキーを使用しました。

wrapper.find('input').simulate('keypress', {key: 'Enter'})
40
alexfigtree

私は「浅い」マウントを使用しています（Jest 23.6.0でEnzyme 3.7.0）。私のためのこの仕事：

const input = wrapper.find('input');
input.simulate('change', { target: { value: 'abcdefg'} });
input.simulate('keydown', { keyCode: 13 });
12
Brian Ho
wrapper.find('input').simulate('keydown');

わたしにはできる...

6
Thomas John

酵素シミュレーションはバージョン4で削除されることになっています。メインのメンテナーは、prop関数を直接呼び出すことを提案しています。 1つの解決策は、これらのプロップを呼び出すことが正しいことを直接テストすることです。または、インスタンスメソッドをモックアウトし、prop関数がそれらを呼び出すことをテストし、インスタンスメソッドを単体テストすることができます。

たとえば、キーダウンを呼び出すことができます

wrapper.find('input').prop('onKeyDown')({ key: 'Enter' })

または

wrapper.find('input').props().onKeyDown({ key: 'Enter' })

非推奨に関する情報： https://github.com/airbnb/enzyme/issues/217

1
Black
const wrapper = mount(<App />);
const input = wrapper.find('input');
input.props().onKeyDown({key: 'Enter'});
  • 酵素3.9.0
  • React 16.8.6
1
Ecliptic Rick

実際には実装に依存します。実装で次のようなものを使用した場合：

if (event.charCode === 13) {
  // do something
}

次のようにテストでイベントをシミュレートします。

wrapper.find('input').simulate('keypress', { charCode: 13 });

それが役に立てば幸い ：-）。

0
Aleksandar Grbic