Warning: Received NaN for the 'value' attributeエラーの対処法

はじめに

React + TypeScript + Chakra UI + Supabase を使った「学習記録アプリ」を Jest でテストする際に、実際に詰まったエラーと解決方法をまとめます。

2. Warning: Received NaN for the 'value' attribute

状況:

Chakra UIのNumberInputにNaNが渡されて警告が出た。

原因:

React Hook Form の Controller と数値入力の連携が不完全で、文字列と数値の変換が崩れた。

解決方法:

• Controller に valueAsNumber: true を設定して数値として扱う。

• defaultValue を必ず 0 や 1 に設定して初期値を明示する。

まとめ

数値入力には valueAsNumber と defaultValue を必ず設定。