カテゴリー：React
-
テキストボックスへの入力テスト [crayon-603ae4842f9d1722981618/] userEvent.type(inputValue, "test"); 第一引数で指定したテキストボックスに対して第二引数の「test」…
-
React-Testing-Libraryとは？ 2018年にリリースされました。 Enzymeに取って代わるライブラリです。 ユーザー視点でテストを行います。 機能 render Reactのコンポーネント…
-
Render.js 以下のようなHTMLを返してくれるファンクショナルコンポーネントを作ります。 [crayon-603ae48430578363466627/] Render.test.js [crayon-603ae484305…
-
【React】テスト手法概要
02.11
テストの種類 Unitテスト コンポーネント単位のテスト、親のコンポーネントが使われている場合は親コンポーネントをモック化して切り離してテストします。（擬似的な関数やpropsを受け取るようにします。） 使えるライブラリ 以下どちら…
-
【React】「material-ui」について
02.09
material-uiとは？ GoogleのMaterialデザインをベースに開発されたUIコンポーネントライブラリ、コンポーネントが色々用意されておりそれらを組み合わせるだけでも見栄えの良いものが作れる。 ライブラリの種類 …
-
【Redux】「Store」について
02.08
ストアの作成手順 まずは、「src/store.js」など適当な場所にReduxストアのファイルを作成します。 Reducerを呼び出す。 ReducerはStore内部に存在する概念ですが、storeとは別ファイルに作成することが一…
-
【Redux】「Action」について
02.08
実装方法 Storeに変化を加えるための具体的な関数群などは一箇所で指定します。 [crayon-603ae484310f2839328723/] type 指定は必須です。Reducer側でどのActionかどうか判定するために使…
-
【Redux】「Reducer」について
02.08
Reducerとは？ Storeに変化を加えるために必要なReduxの要素です。 Reducerの作成手順 1.reduxライブラリからcombineReducersをインポートする。 [crayon-603ae4843147577…
-
【Redux】3原則
02.08
第一原則(Single source of truth) 日本語に訳すと「単一情報源」です。アプリケーションの状態はただ一つのStoreで管理するということになります。 第二原則(State is read-only) Stateを直…
-
【React】「React.memo」について
02.08
React.memoとは？ コンポーネントのレンダリング結果をメモ化するReactのAPI メリット コンポーネントの再レンダリングを防止し、パフォーマンスを向上させることができる。 用途 下記のようなコンポーネントに対してmem…