Warning: Failed prop type: The prop `value` is marked as required in `...`, but its value is `undefined`

formik と material-ui(ToggleButton) を組み合わたコンポーネントのテストを書いているときにこの warning が出た。

Warning: Failed prop type: The prop value is marked as required in ForwardRef(ToggleButton), but its value is undefined.

• 組み合わせで発生するバグであり、ググってもこの警告とおんなじパターンのページが出てこなかった
• すでに過去に1回食らった記憶がうっすらとある

3回おんなじところで食うのは不本意なので、自分用にメモ書きを書き残して置く。

原因

コンポーネントの配下でFormikの useField が使われていて、ここから material-ui のコンポーネントにvalueを渡しているのだが、テストコードのFormikを呼び出しているところで適切に initialValue が設定されておらず、それで material-ui のコンポーネントに value=undefined なものが渡されていたというバグだった。

テストでもちゃんと関連する initialValue は入れること。

const { getByText } = render(
    <Formik initialValues={{ "my-input": "test" }} onSubmit={noop}>
    {() => <MyComp />}
    </Formik>
);