引き続き React Query のターン。
useQuery か、なるほどいいねこれということで導入しようと思っても、手元のコードは全然 class component ですよっていう場合に、どうやって導入していく方法があるかという整理。
おおよそそのまま、クラスコンポーネントでhooks使うにはどうするかっていう話になります。
検証コード
例として、以下のようなシンプルなコードを考える。
- 外部リソースとしてユーザ一覧を管理している
- 画面からユーザの追加を行う
- 画面でユーザ一覧を表示する
react-query : useQuery への依存をスタブに差し替えてコンポーネントテスト
引き続き React Query の話。
ある関数コンポーネントが useQuery によって取得される外部データに依存している場合に、そのuseQueryで取得される外部データをダミーに置き換えて、コンポーネントテストを書く方法。
なかなかまとまった情報が見つからなかったので記録しておく。
テストには Jest & React Testing Library を使用。
続きを読むreact-query：invalidate と reset の挙動の違い
お勉強メモ。嘘ついたらごめんなさい。
React Query で、cacheTime, staleTime と、invalidateQueries, resetQueries あたりの使い分けの話。
お試し用コードは最後に載せてます。
続きを読むreact-select：React Testing Library で optionのリストを拾う
React Testing Library で React Select をどうやってテストするんだってのはFAQらしく、Stack Overflowではサードパーティの部品までテストすんなMock使えというのがベストアンサーだったりして、まあそうかもねと思いつつも、ほじくってテスト書いたのでメモ。
React Select ではドロップダウンが閉じた状態ではoption要素がDOMに存在しないので、わざわざ↓キー入力してドロップダウンを開いてからクエリをかけるようなことをやりました。
続きを読むreact-select：インクリメンタル検索で一致部分を強調表示
インクリメンタル検索で、入力と一致した部分文字列をハイライトする。
というのを、React Selectを使ってやる。
基本的には公式APIドキュメントを読んでいけば書いてあるはずの話だが、カスタムコンポーネントの部分はちょっとつまづいたのでメモ。
