miyabisan2の記事一覧
-
stringの値を渡す。 useStateで定義した関数を子に渡して子から関数を呼べば親の状態も変更することができます。 親コンポーネント [crayon-6aa315a2e0a57640623118/] 子コンポーネント [cr…
-
redux-sagaとは？ Reduxにタスクという概念を持ち込むためのライブラリです。Redux-sagaに依頼することで間接的にタスクを実行してくれます。 仕組み 非同期処理を別々のスレッド（タスク）のイベントループのように切り出…
-
APIを直接呼ぶ場合 例えば、Renderというコンポーネントが初期表示時にUseEffectを使用してAPIで表示するデータを取得する処理があった場合は下記のようなテストを書きます。 [crayon-6aa315a2e186…
-
propsで渡すものによってはモックを使ったりする場合もあるかと思いますが、propsで渡した値自体のテストを作りたい場合もあるかと思います。 propsでlistを渡すケース Reactではlistはmapなどを使って表示させることが…
-
テキストボックスへの入力テスト testing-library14からはusereventはsetupを事前にするように変更になり非同期関数になりました。（13まではsetupは不要で同期関数でした。） [crayon-6aa…
-
React-Testing-Libraryとは？ 2018年にリリースされました。 Enzymeに取って代わるライブラリです。 ユーザー視点でテストを行います。 Enzymeとの比較 Enzymeはユニットテス…
-
Render.js 以下のようなHTMLを返してくれるファンクショナルコンポーネントを作ります。 [crayon-6aa315a2e2530517273102/] Render.test.js [crayon-6aa315a2e25…
-
テストの種類 Unitテスト コンポーネント単位のテスト、親のコンポーネントが使われている場合は親コンポーネントをモック化して切り離してテストします。（擬似的な関数やpropsを受け取るようにします。） 使えるライブラリ 以下どちら…
-
02.09
【React】「material-ui」について
material-uiとは？ GoogleのMaterialデザインをベースに開発されたUIコンポーネントライブラリ、コンポーネントが色々用意されておりそれらを組み合わせるだけでも見栄えの良いものが作れる。 バージョン バ…
-
02.08
【Redux】「Store」について
ストアの作成手順 まずは、「src/store.js」など適当な場所にReduxストアのファイルを作成します。 Reducerを呼び出す。 ReducerはStore内部に存在する概念ですが、storeとは別ファイルに作成することが一…
