はてなブックマーク

こんにちは。この記事では、先日公開した軽量なStorybook駆動開発に関する記事の続編として、ネストしたContainer/Presentationコンポーネントに対して軽量なStorybookを構築する方法について紹介します。 軽量なStorybook 軽量なStorybookとは、Container/Presentation(C/P)パターンを活用してネットワークの関心を排除したStorybookのことを指しています。 APIモックツールを使用しないことでStorybookの実装容易性が向上することに加え、Portable Storiesを活用したテストの動作が安定するため、Storybook駆動開発の文化を醸成する手助けとなります。 詳細は前回の記事で紹介していますので、この記事と合わせてご覧ください。 ネストしたContainer/PresentationをStorybookでど

こんにちは。この記事ではStorybook駆動開発をゼロから導入するために実践した内容をコンポーネント設計の側面から紹介します。合わせて、紹介した設計を元にどのようなテストを実装しているかについても紹介します。 簡単に実装できることが持続可能なテストへの鍵 Webフロントエンドの持続可能なテスト文化を醸成するためには、テストを開発フローの中で簡単に実装できることが何よりも重要です。テストの実装に機能開発以上のコストが掛かってしまう場合、「時間が無いのでテストコードを後から実装する（結果実装されない）」という典型的なアンチパターンに繋がってしまいます。 持続可能なテストを実現するためのアプローチ フロントエンドにおいて、特にIntegration Testの実装容易性は、コンポーネント設計やツールの使い方によって大きく左右されます。 筆者が関わるプロジェクトでは軽量なStorybook駆動開