StorybookのCSF（Component Story Format）3.0についての記事がでた
記事を単に読むだけだと、Storyの書き方が関数からオブジェクトになってより短いコードになったよ（あとインタラクションのテストもできるようになった）と読めてしまったが
// CSF 2.0 export default { title: 'components/Button', component: Button, }; export const Primary = (args) => <Button {...args} />; Primary.args = { primary: true }; // CSF 3.0 export default { component: Button }; export const Primary = { args: { primary: true } };
この記事について@takepepeさんが以下で言及されており、気づきがあったのでまとめておく
まず、CSF3.0が解決したいの課題は単体テスト・結合テスト・Storybook のそれぞれにかけている準備工数やケースの作成の工数削減で、CSF3.0はこれらの「様々なソリューションで再利用可能な資材」にするため、限りなく絞られたメタ情報のみをもつものになったというのが根底にある
なので関数からオブジェクトにしたのは、単に記述量削減だけではなく、その意図があった
つまり、このCSF3.0のオブジェクトにストーリ名やコンポーネントなどの情報が格納されているので、それをJestのテストケース名にしたり好きなように使ってねという感じ
以前にこれと全く同じことを考えていて、同じようにJestとStorybookで共通で使えるようなオブジェクトを用意して、ストーリとテストケースのメタ情報を一致させるということをやっていたがCSF2.0で書き方が変わってしまい全て捨ててしまっていたので公式にこれができるのは嬉しい
Jestだけでなくplayという関数をつかったイタラクションテスト、E2E、VRTなどとも情報を一元化できると思われるので、自身のプロジェクトではこれからもStorybook駆動開発を推奨していきたい
