React 入門 (13) ～ TODOアプリを作る(8) ～ AddTodo コンポーネントのテスト
昨日に引き続き、コンポーネントのテストを書く。昨日よりも簡単に書けると高をくくっていたが、意外とハマった。
第一に AddTodo コンポーネントが shallow 出来なかったのだ。
調べてみるとなんてことはなく、TodoList コンポーネントは React の素のコンポーネントだったが
AddTodo コンポーネントは Redux の connect でラップされたものだったので、渡す引数が違うからだった。
今回はAddTodoコンポーネントを素の状態にし、connectでラップするための別のコンテナ AddTodoContainer を用意して
テスト自体は AddTodo コンポーネントに対して行うようにコードを修正した。
次に、@material-ui の Button コンポーネントが shallow で取得したオブジェクトから find できなかった。
Input に関しては、TodoList でやっている方法で取得できるのだが、Buttonに関してそれはできないのだ。
調べた結果、WithStyles(Button) を文字列として find に渡してやることで取得できた。なぜそれで取得できるのかは
いまだ不明だ。
wrapper.find('WithStyles(Button)').simulate(click');
ADD_TODO アクションを実行するためには テキストボックスに値を入力する必要があったが、そのやり方がわからなかった。
Input コンポーネントに対して simulate('change') を呼べばいいだとか、'keydown' イベントで一文字ずつ入れろだとか
色々書いてあったが、結局はプロパティのvalue に直接値を入れる方法でできた。
wrapper.find(Input).at(0).props().inputRef.current.value = "test"
成果物は以下。
GitHub - bamchoh/react-study at f904503750ab47cdf2a57ef647e2b51ab6123e35
