web-dev-qa-db-ja.com

ReactおよびEnzymeを使用したテキスト値の設定のテスト

テキスト入力のテキストをどのように設定し、その値をReact/Enzymeでテストしますか？

const input = wrapper.find('#my-input');

input.simulate('change',
  { target: { value: 'abc' } }
);

const val = input.node.value;

//val is ''

すべての ここの解決策 は機能していないようです。

javascriptreactjstestingenzyme
17
GN.

コードで何が起こっているかを本当に理解するには、コンポーネントコード（具体的にはonChangeハンドラー）を見ると便利です。

ただし、次のコードに関しては：

_input.simulate('change', {target: {value: 'abc'}});
_

これは実際には_<input />_要素の値を変更せず、代わりにonChange関数が実行され、_{target: {value: 'abc'}}_のようなイベントオブジェクトが提供されるだけです。

アイデアは、onChange関数が状態またはストアを更新するため、この関数をトリガーすると、DOMが更新されるはずです。 input.simulate('change')を使用して定義されたonChangeハンドラーが実際にない場合は何もしません。

したがって、入力の値を実際に設定し、onChangeハンドラーをトリガーしないことが目標の場合、JSを使用してwrapper.find('#my-input').node.value = 'abc';などの方法でDOMを手動で更新できますが、これはReactのレンダーサイクルを実行します。再レンダーをトリガーするために何かを行うと、この値がクリア/削除される可能性があります。

20
Levi

私はここで_React 16_と_Enzyme 3.10_を使用していますが、これは完全に機能しました（そこに多くの異なる提案を試みた後）：

_wrapper.find("input").instance().value = "abc";
_

どうやら、以前のバージョンでは、getNode()の代わりにnodeまたはinstance()を使用できました。これは以前の多くの試みの一部でした。

19
leandroico

これは、酵素3と酵素2の両方で機能します。

_wrapper.find('input').getDOMNode().value = 'new value';
wrapper.find('input').simulate('change');
_

.getDOMNode()は、Enzyme 2では_.node_のように使用でき、Enzyme 3では.instance()のように使用できます.

5
Eran Shabi

ここで私のために働く..

値を更新して、入力テキストを変更しました。そしてDOMプロパティを更新。

.update()

更新後、入力携帯電話番号の長さのユースケースでボタン無効化プロパティをチェックしています。

const input = MobileNumberComponent.find('input')
input.props().onChange({target: {
   id: 'mobile-no',
   value: '1234567900'
}});
MobileNumberComponent.update()
const Footer = (loginComponent.find('Footer'))
expect(Footer.find('Buttons').props().disabled).equals(false)
0
Anupam Maurya