アーカイブ:2021年 2月
-
テキストボックスへの入力テスト testing-library14からはusereventはsetupを事前にするように変更になり非同期関数になりました。(13まではsetupは不要で同期関数でした。) [crayon-662…
-
React-Testing-Libraryとは? 2018年にリリースされました。 Enzymeに取って代わるライブラリです。 ユーザー視点でテストを行います。 Enzymeとの比較 Enzymeはユニットテス…
-
Render.js 以下のようなHTMLを返してくれるファンクショナルコンポーネントを作ります。 [crayon-66277a6d012fd079782225/] Render.test.js [crayon-66277a6d013…
-
テストの種類 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をおかないので、再レンダ…
-
02.08
【React】「React.memo」について
React.memoとは? コンポーネントのレンダリング結果をメモ化するReactのAPI、React16.6から導入されました。あくまでpropsの変更に対して再レンダリングの判定が行われるだけでstateやuseContextで…
-
前提 deviseをインストールしておきましょう。 userモデル(deviseの対象モデル)を作成しておくこと。 事前準備 rspec関連Gemのインストール Gemfile [crayon-66277a6d0…