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

C# (WPF) 算出プロパティ NComputed を NuGet 公開

だいぶ前に作った これ を、自分で使おうと思ったら NuGet にないじゃんってことに気づいたので、今更ながら公開しておきました。

www.nuget.org