今年一年を通して感じていた想いをタイトルとした EP を公開しました。お聴きいただければ幸いです。
最近のエントリ
生き延びるための術は - KORG Gadget新曲"Suffering (unwanted but unavoidable)"公開
――どこにある?
KORG Gadgetでの新作、"Suffering (unwanted but unavoidable)"を公開しました。お聴きいただければ幸いです。
すべての権力者はただちに民衆への暴力行使を停止せよ。
殺すな、精神的にも肉体的にも。
その兆しは - KORG Gadget新曲"Ambiguous Signs"公開
――凶兆か、それとも吉兆か……
KORG Gadgetでの新作、"Ambiguous Signs"を公開しました。お聴きいただければ幸いです。
すべての権力者はただちに民衆への暴力行使を停止せよ。
TanStack Routerの単体テストで警告を出さない方法を確認する
構想を温めていた小品の新作自作Webアプリに手を付け始めました。
新作はクライアントサイドでルーティングを行うのでルーティング用ライブラリが必要です。定番は古くからあり私も別アプリで使っているReact Routerかと思いますが、次の理由から今回は見送り。
- breaking changeにたびたび巻き込まれてあまりいい印象がない
- Remixとの統合を果たすv7のリリースが間近で安定するまで少し時間がかかりそう
代わりに世評の高いTanStack Routerを試してみることにしました。
TanStack RouterはFile-Based Routing推奨とのことなので素直に従ってみたところ、型推論や補完が強力に働いて感心することしきり。しかしルーティングってそんなに変わるものでもないので、労力のかけかたは少し疑問に思わないでもないです。
単体テストも簡単に書けます。TanStack RouterのFile-Based Routingは routeTree.gen.ts というファイルを生成するので、そのファイルを参照する RouterProvider コンポーネントを普通にレンダリングすればよし。ただ同コンポーネントは非同期処理を多用しているようで、Testing Libraryのrender関数でレンダリングするとお馴染み?の警告メッセージnot wrapped in act(...)
が大量に出力されます。
Warning: An update to MatchInnerImpl inside a test was not wrapped in act(...).
非同期処理が落ち着いてからテストコードが実行されるようにすればよいわけですから、render関数をwaitFor関数でラップすれば出なくなります。次のように関数化しておくと便利でしょう。
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { render, waitFor } from '@testing-library/react'
import { routeTree } from './routeTree.gen'
const setup = async () => {
await waitFor(() => {
render(<RouterProvider router={createRouter({ routeTree })} />)
})
}
これで新作アプリ開発の課題をひとつ解決。まだまだ先は長い……
近代の負の遺産が - KORG Gadget新曲"Scars aching violently at twilight"公開
――今も人々を深く傷つける。
KORG Gadgetでの新作、"Scars aching violently at twilight"を公開しました。お聴きいただければ幸いです。
すべての権力者はただちに民衆への暴力行使を停止せよ。