Open2

Storybook+Chromaticでコンポーネントテストする

かがんかがん

概要

  • play 関数の中に処理とアサーションを書く
  • 普通(Chromaticなしの場合)は test-runner を使うが、Chromaticでスナップショットテストしていれば勝手に実行してくれる
かがんかがん

コンポーネント分割とか…

ReactコンポーネントはContainer/Presentationパターンでファイルを分割している。
インタラクションテストを入れる前までは、Presentationに対してテストを書いていた。

最近上がっていた記事(や、他にも見かけた気がする)でもPresenterに対してStoryを書くのを推奨していた。

https://zenn.dev/yuta_takahashi/articles/600e62c7ac7b3c

たしかにその形式であればAPI依存の値をモックしやすい。

しかし、結局のところ、コンポーネントAの中で別のコンポーネントBを呼び出していて、コンポーネントBがAPI依存していると結局モックが必要になる。
であれば、コンポーネントAもContainerに対してのインタラクションテストを書いたほうが実際の振る舞いを検証できる。

子コンポーネントで外部データを取得しているようなケース、他の人たちはどうしてるんだろう… 🤔