Storybook で hook を mock する方法を考える
前提
Storybook で API 取得がある画面自体も管理したい
Storybook の build には webpack ではなく vite でやっている
画面は React で作られており useQuery でデータを取得している
以下の 2 パターンある
code:jsx
const Hoge = () => {
const user = useUser("userId") // useQuery が内部にいるパターン
return // ...
}
const Hoge = () => {
const user = useQuery("user", "userId", fetchUser("userId")) // 直接 useQuery を使うもの return // ...
}
Component を純関数にする、DI を取り入れるなどは意図的にしていない
Storybook に対応するために Production のこーどを変えることは(極力)したくない
mock する方法を考える
Jest の mock
手軽だし良さそう
ただし Storybook は build 後に file に触れない?のでだめらしい
自分で試したわけではない
これが楽か…?
vite を使っている場合はそもそも使えないかも
rollup の plugin
自由度は高そう
Storybook にどうやって mock data を書こうか…