OITA: Oika's Information Technological Activities

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

TypeScript の「型安全」を担保するために知っておきたかったこと

タイムリープTypeScript 〜TypeScript始めたてのあの頃に知っておきたかったこと〜 アドベントカレンダー1日目の記事になります。
よろしくお願いします。

3行で

TypeScript で安全に型を扱う勘所は以下2点だと思いました。

  • 最初から最後まで型が壊れていないことを保証する
  • 型が壊れる可能性があるものは壊れている前提で扱う
続きを読む

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に存在しないので、わざわざ↓キー入力してドロップダウンを開いてからクエリをかけるようなことをやりました。

続きを読む