Posted at

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

More than 1 year has passed since last update.

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を呼び出して適宜値のチェックを行うなど