カテゴリー:React
-
APIを直接呼ぶ場合 例えば、Renderというコンポーネントが初期表示時にUseEffectを使用してAPIで表示するデータを取得する処理があった場合は下記のようなテストを書きます。 [crayon-6629e666b837…
-
propsで渡すものによってはモックを使ったりする場合もあるかと思いますが、propsで渡した値自体のテストを作りたい場合もあるかと思います。 propsでlistを渡すケース Reactではlistはmapなどを使って表示させることが…
-
テキストボックスへの入力テスト testing-library14からはusereventはsetupを事前にするように変更になり非同期関数になりました。(13まではsetupは不要で同期関数でした。) [crayon-662…
-
React-Testing-Libraryとは? 2018年にリリースされました。 Enzymeに取って代わるライブラリです。 ユーザー視点でテストを行います。 Enzymeとの比較 Enzymeはユニットテス…
-
Render.js 以下のようなHTMLを返してくれるファンクショナルコンポーネントを作ります。 [crayon-6629e666b945b917154549/] Render.test.js [crayon-6629e666b94…
-
テストの種類 Unitテスト コンポーネント単位のテスト、親のコンポーネントが使われている場合は親コンポーネントをモック化して切り離してテストします。(擬似的な関数やpropsを受け取るようにします。) 使えるライブラリ 以下どちら…
-
02.09
【React】「material-ui」について
material-uiとは? GoogleのMaterialデザインをベースに開発されたUIコンポーネントライブラリ、コンポーネントが色々用意されておりそれらを組み合わせるだけでも見栄えの良いものが作れる。 バージョン バ…
-
02.08
【Redux】「Store」について
ストアの作成手順 まずは、「src/store.js」など適当な場所にReduxストアのファイルを作成します。 Reducerを呼び出す。 ReducerはStore内部に存在する概念ですが、storeとは別ファイルに作成することが一…
-
Reducerとは? Storeに変化を加えるために必要なReduxの要素です。stateとactionの二つの引数を受け取ります。 Reducerの作成手順 1.reduxライブラリからcombineReducersをインポートする…
-
Reduxの概要 コンポーネントのサイズが大きくなった際や複数コンポーネント間で状態を管理や共有するために使用される2015年に公開された状態管理ライブラリです。 メリット 特定のコンポーネント配下にstateをおかないので、再レンダ…