-
【React】propsのテスト
02.11
propsで渡すものによってはモックを使ったりする場合もあるかと思いますが、propsで渡した値自体のテストを作りたい場合もあるかと思います。 propsでlistを渡すケース Reactではlistはmapなどを使って表示させることが…
-
【React】「モック」を使ったテスト
02.11
propsで渡す関数をモック化してそれが呼ばれているかのテスト [crayon-603aefb8821d7040263606/] jest.fn(); jestのモック関数です。何も機能を持たない関数になります。 expect(ka…
-
テキストボックスへの入力テスト [crayon-603aefb882505808499020/] userEvent.type(inputValue, "test"); 第一引数で指定したテキストボックスに対して第二引数の「test」…
-
React-Testing-Libraryとは？ 2018年にリリースされました。 Enzymeに取って代わるライブラリです。 ユーザー視点でテストを行います。 機能 render Reactのコンポーネント…
-
Render.js 以下のようなHTMLを返してくれるファンクショナルコンポーネントを作ります。 [crayon-603aefb882b79788533757/] Render.test.js [crayon-603aefb882b…
-
【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-603aefb883705374267768/] type 指定は必須です。Reducer側でどのActionかどうか判定するために使…
-
【Redux】「Reducer」について
02.08
Reducerとは？ Storeに変化を加えるために必要なReduxの要素です。 Reducerの作成手順 1.reduxライブラリからcombineReducersをインポートする。 [crayon-603aefb883a8753…