LoginSignup
3
0

More than 5 years have passed since last update.

material-ui ComponentのTextFieldの値をtest内で設定する

Posted at

Material-uiのTextFieldコンポーネントに入力された値を使ってデータをSubmitする際など、テスト環境で適当な値を使って目的のfunctionがちゃんと呼ばれるかをテストしようと思った所、上手く値を設定できずに少し困りました。

wapperに入っているのはenzymemountされた親のComponentで、TextFieldにはref=usernameとしてrefを設定しています。

結論からすると、値を入れた後にchangeをsimulateする必要があった、と言う部分で躓きました。
この挙動はMaterial-ui自体の挙動になるので、よりシンプルな形としてはonChange内でstateを変更して、テスト内ではinputではなくstateを変更するだけで良いのかも知れません。

let username = wrapper.ref('username').find('input')
username.node.value = 'first'
username.simulate('change', username)
wrapper.instance().onSubmit() // 最終的なfunctionを呼び出して適宜値のチェックを行うなど
3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0