miyabisan2の記事一覧
-
02.27
【React】「useRef」の実践的な使い方
特徴 値が更新されても差分検知されないこと。 よく使われるケース formでinput入力時のレンダリングを防ぐ目的で使われます。useRefを利用してレンダリングを抑えたライブラリが「react-hooks-form」です。 …
-
関数コンポーネント（React.FC） Reactの関数コンポーネントの型になります。React.FunctionalComponentとも書けます。 例 [crayon-6a65a8e84b44f151658657/] 下…
-
stringの値を渡す。 useStateで定義した関数を子に渡して子から関数を呼べば親の状態も変更することができます。 親コンポーネント [crayon-6a65a8e84b992670374869/] 子コンポーネント [cr…
-
redux-sagaとは？ Reduxにタスクという概念を持ち込むためのライブラリです。Redux-sagaに依頼することで間接的にタスクを実行してくれます。 仕組み 非同期処理を別々のスレッド（タスク）のイベントループのように切り出…
-
APIを直接呼ぶ場合 例えば、Renderというコンポーネントが初期表示時にUseEffectを使用してAPIで表示するデータを取得する処理があった場合は下記のようなテストを書きます。 [crayon-6a65a8e84c36…
-
propsで渡すものによってはモックを使ったりする場合もあるかと思いますが、propsで渡した値自体のテストを作りたい場合もあるかと思います。 propsでlistを渡すケース Reactではlistはmapなどを使って表示させることが…
-
テキストボックスへの入力テスト testing-library14からはusereventはsetupを事前にするように変更になり非同期関数になりました。（13まではsetupは不要で同期関数でした。） [crayon-6a6…
-
React-Testing-Libraryとは？ 2018年にリリースされました。 Enzymeに取って代わるライブラリです。 ユーザー視点でテストを行います。 Enzymeとの比較 Enzymeはユニットテス…
-
Render.js 以下のようなHTMLを返してくれるファンクショナルコンポーネントを作ります。 [crayon-6a65a8e84cf06760695576/] Render.test.js [crayon-6a65a8e84cf…
-
テストの種類 Unitテスト コンポーネント単位のテスト、親のコンポーネントが使われている場合は親コンポーネントをモック化して切り離してテストします。（擬似的な関数やpropsを受け取るようにします。） 使えるライブラリ 以下どちら…
