Open2
Storybook+Chromaticでコンポーネントテストする
概要
-
play
関数の中に処理とアサーションを書く - 普通(Chromaticなしの場合)は
test-runner
を使うが、Chromaticでスナップショットテストしていれば勝手に実行してくれる
コンポーネント分割とか…
ReactコンポーネントはContainer/Presentationパターンでファイルを分割している。
インタラクションテストを入れる前までは、Presentationに対してテストを書いていた。
最近上がっていた記事(や、他にも見かけた気がする)でもPresenterに対してStoryを書くのを推奨していた。
たしかにその形式であればAPI依存の値をモックしやすい。
しかし、結局のところ、コンポーネントAの中で別のコンポーネントBを呼び出していて、コンポーネントBがAPI依存していると結局モックが必要になる。
であれば、コンポーネントAもContainerに対してのインタラクションテストを書いたほうが実際の振る舞いを検証できる。
子コンポーネントで外部データを取得しているようなケース、他の人たちはどうしてるんだろう… 🤔