反応テストの入力値を変更するには

Question

反応アプリケーションのフォームをテストしたいと思います。

以下のことを行う際に、ボタンの「無効」プロパティを削除しました。

const component = TestUtils.renderIntoDocument(<Mycomponent/>); 
const myDOM =findDOMNode(component); 
const input = myDOM.querySelector('input'); 
input.value = "2017-11-11"; 
let submitButton = myDOM.querySelector('button'); 
TestUtils.Simulate.click(submitButton); 
... 
const newlyAddedDate = record.querySelector('#date').innerHTML; 
console.log("newlyAddedDate:"+newlyAddedDate); 

が、コンソールの出力は

"newlyAddedDate:" 

この反応アプリはクロムで正しく行います。 私はそれがこの文は、入力ボックスの値を変更することができなかった

"input.value="2017-11-11"; 

の問題だと考えています。

したがって、反応テストを実行するときに入力ボックスに値を設定するにはどうすればよいですか？ここで

はまあ、それは完全にあなたがテストのために使うライブラリによって異なり、このアプリ https://github.com/zzbslayer/ChargeAccount-React

Answer 1

のレポです。ここでは、MochaとEnzymeの組み合わせを使用したサンプルを示します。

beforeEach(() => { 
     _spies = {} 
     _props = { 
     propOne: 'somepropvalue', 
     ... 
     } 
     _wrapper = mount(<Your Component {..._props} />) 
    }) 



    it('Should change the input box',() => { 
     let promptInput = _wrapper.find('textarea') 

     promptInput.simulate('change', { target: { value : 'sample2' } }) 
    }) 

以前の方法では、すべての小道具を下に通してコンポーネントを初期化しました。テストの中で、その要素のセレクタまたはHTML IDを使用して、ラッパー内のテキストボックスを探します。次に、新しい値で変更イベントをシミュレートします。

Jestは、ほとんどの反応スターターの定型文で今日のテストのためのデファクトフレームワークとなっていることに注目してください。その場合、概念は同じままですが、構文が異なります。