controlled component は value 反映側も assert する — onChange だけでは片側契約が空通し / PaPut

mizulba

3日前

controlled component は value 反映側も assert する — onChange だけでは片側契約が空通し

React

フロントエンドテスト

知識

運用

親が状態を保持する controlled component をテストするとき、入力して onChange コールバックだけを assert すると、value を親から流し込む側の契約が空通しになる。value props を渡さず1文字入力して onChange の引数だけ見るテストは、実装が value を無視(value="" 固定)していても通る。入力欄に打った文字は onChange 経由でそのまま発火するため、反映漏れを検知できない。最小の埋め方は、非空の初期 value を props で渡して toHaveValue で反映を確認し、入力後にも value の往復(onChange→親state→value)を assert すること。往復の両側を検証して初めて controlled binding の回帰を捕まえられる。