こんにちは、@takanoripです。
今回は最近導入したStoryshotsというやつを紹介していきたいと思います。
Storyshots
StoryshotsはStorybookのアドオンで、Storybookに登録されているコンポーネントのスナップショットテストをしてくれます。できることはjestのスナップショットテストとほぼ同じです。
Storyshotsを使うと、コンポーネントごとにテストファイルを用意しなくて良いので手軽にスナップショットテストを導入することができます。
すでにStorybookを導入していれば、下記ファイルを追加するだけでOKです。
import initStoryshots from '@storybook/addon-storyshots';
initStoryshots();
簡単でしょ？
また、Storyshotsを使うと、スナップショットテストができること以上に良い効果をProjectにもたらすことができます。その効果について説明していきます。
Storybook
Storybookは皆さんご存知だと思うので説明を省略します。
詳しく知りたい方は下記の記事を読むと良いと思います。
UI開発の流れが変わる！React Storybookでデザイナーも開発者も幸せになれる
Introduction
ReactでSPAを開発してい人はけっこう使ったことあるんじゃないかなと思います。
コンポーネントをサクッと一覧にしてくれてとっても便利なStorybookなんですが、1つ欠点があります。
それは**「めんどくささ」**です。
Storybookにコンポーネント追加するのめんどくさい問題
どんなものもこの壁にぶち当たりますよね。
「Storybookたしかに便利だけど、めんどくさいし後回しでいっかー」
って感じにとてもなりやすいです。
特にStorybookはプロダクトには影響がないので、運用されなくなって枯れて死んでしまう…なんてこともあったりなかったりすると思います。
枯れたスタイルガイドほど役に立たないものはありません。
そこでStoryshotsの登場です。
Storybook + Storyshots = 「スタイルを確認できるUnit Test」
StorybookにStoryshotsを入れることで、「ただのスタイルガイド」ではなく、**「スタイルを確認できるUnit Test」**と考えることができるようになりいます。
プロダクトの品質を担保する上でテストは欠かせないもので、「めんどくさいからやらない」とはなりません。
このテストのフローにStorybookを乗せることによって、スタイルガイドの更新もできスナップショットテストもできる、素晴らしい流れが生まれるのです。
これでスタイルガイドがアップデートされず枯れてしまうことを防ぐことができ、簡単な設定でテストをすることができるようにもなります。
まとめ
Storyshotsを使ってより良いStorybookライフを送りましょう。