OITA: Oika's Information Technological Activities

@oika 情報技術的活動日誌。

DbUnit : テストデータの日付・時刻を相対的な値で指定する

やりたいこと:DbUnit のテストデータで、DATETIMEなどのカラムに、「1時間前」「1日前の12:00」みたいな、現在日時からの相対時刻を入れたい。

たとえば直近3日間の履歴を取得して返すAPIのテストであれば、3日前あたりの境界値レコードがテストデータとして入っていてほしい。

続きを読む

react-query : クラスコンポーネントのコードで導入するいくつかの方法

引き続き React Query のターン。

useQuery か、なるほどいいねこれということで導入しようと思っても、手元のコードは全然 class component ですよっていう場合に、どうやって導入していく方法があるかという整理。

おおよそそのまま、クラスコンポーネントでhooks使うにはどうするかっていう話になります。

検証コード

例として、以下のようなシンプルなコードを考える。

  • 外部リソースとしてユーザ一覧を管理している
  • 画面からユーザの追加を行う
  • 画面でユーザ一覧を表示する
続きを読む

react-query : useQuery への依存をスタブに差し替えてコンポーネントテスト

引き続き React Query の話。

ある関数コンポーネントが useQuery によって取得される外部データに依存している場合に、そのuseQueryで取得される外部データをダミーに置き換えて、コンポーネントテストを書く方法。
なかなかまとまった情報が見つからなかったので記録しておく。

テストには Jest & React Testing Library を使用。

続きを読む

react-select:React Testing Library で optionのリストを拾う

React Testing LibraryReact Select をどうやってテストするんだってのはFAQらしく、Stack Overflowではサードパーティの部品までテストすんなMock使えというのがベストアンサーだったりして、まあそうかもねと思いつつも、ほじくってテスト書いたのでメモ。

React Select ではドロップダウンが閉じた状態ではoption要素がDOMに存在しないので、わざわざ↓キー入力してドロップダウンを開いてからクエリをかけるようなことをやりました。

続きを読む

react-select:インクリメンタル検索で一致部分を強調表示

f:id:kd1:20210503152503p:plain

インクリメンタル検索で、入力と一致した部分文字列をハイライトする。
というのを、React Selectを使ってやる。
基本的には公式APIドキュメントを読んでいけば書いてあるはずの話だが、カスタムコンポーネントの部分はちょっとつまづいたのでメモ。

続きを読む