構想を温めていた小品の新作自作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(これで新作アプリ開発の課題をひとつ解決。まだまだ先は長い……