-
package.json scripts デフォルトでは以下のようになっています。 [crayon-60cd535785bed978990894/] test 以下のように指定することで「npm test」を実行した際に複数ケース…
-
【SPA】用意した方が良いテストケース
06.13
認証のテストケース ログイン成功時に成功メッセージが表示されていること。 ログイン失敗時に画面遷移してないこと。 ユーザー登録に成功すること。 ユーザー登録に失敗すること。 ユーザー登録に成功したが、ログイ…
-
各コンポーネントからuseDispatchなどでRedux Tool Kit内のReducer関数を呼び出したり、useSelectorでstateを参照したりすると思いますが、RTK独自の構文になるのでRenderでそのまま呼び出そうとし…
-
【React】「ページ遷移」のテスト
06.13
コンポーネント内でページ遷移のテストをする方法です。 useHistoryをモック化する。 react-router-domの中にあるuseHistoryのpushメソッドをテスト用にダミーの関数で上書きします。 [crayon-60…
-
useMutationとは？ React Queryでデータを登録・編集・削除したりする場合に使います。 登録処理のサンプル [crayon-60cd5357874e0521526304/] onSuccess APIのリクエスト…
-
インストール react-qureryとdevtoolsをインストールしておくと便利です。 [crayon-60cd535787b2d410195847/] react-query-devtools 導入するとブラウザ左下でデバッガ…
-
【React】「React Query」について
05.30
React Queryとは？ 2020年2月にリリースされた。 メリット fetchの回数を減らせる。 サーバーから取得したデータをキャッシュに格納できるようになり、不要なAPI fetchの回数を減らすことができるようになったus…
-
【React】パフォーマンス改善対策
05.30
Reactのパフォーマンス改善対策には、主に2つあります。 1.サーバーからのデータ取得回数を減らす キャッシュをすることが重要。従来のuseContextやReduxはキャッシュのメカニズムを持っていない。 近年登場したサーバー…
-
Reduxで非同期の場合のSliceの作り方は下記のようになります。 [crayon-60cd535788261109304731/] createAsyncThunk 従来のreduxだとredux-thunkなどのミドルウェアで行…
-
Error Boundaryとは？ Error Boundary という子コンポーネントツリーでエラーが発生した際にクラッシュした UI を表示させる代わりに、フォールバック用の UI を表示するコンポーネントがあります。React16以…