イレブン ラボ ブログ – Chromatic を使用して視覚回帰テスト (その他!) を Storybook に追加する

何しようか ？

Storybook は「ワークショップ」として定義されており、コンポーネントとページを個別に作成できます。 具体的には、 これは、コンポーネントのさまざまな状態を操作できるインターフェースです。 予想される設計と一致するかどうかを確認するには、ドキュメントを検索し、さまざまな実装に使用する props を取得します。 というときに使用されることが増えているツールです。 デザインシステムの作成、当初は React 用に作成されましたが、ますます多くのフレームワークで使用できるようになります。 Storybook の使用はプラグインを使用して強化できます。

しかし、コンポーネントを Storybook に渡すと、 そこで直接テストすることは可能ですか? 答えは「はい」です！ このために私たちが自由に使えるツールの 1 つが、 セストクロマチック。

Chromatic は Storybook と同じチームによって開発されています (実際、Youtube の公式 Storybook チャンネルが Chromatic という名前に変更されていることがわかります)。 これは CI で使用するツールです。 視覚的な非回帰テスト (それだけではありません!) Storybook で作成されたストーリーについて。 Chromatic は有料ツールであり、無料版も使用します。これにより、5000 枚のスナップショットを取得できます。これは、このチュートリアルのニーズには十分です。

視覚的な非回帰テストは、デザイン システムの場合に最適です。 1 つのコンポーネントへの変更が他のコンポーネントに影響を与えないかどうかを最も近いピクセルまでチェックします、複雑なプロジェクトでは、これに気づくのが非常に複雑になる可能性があります。 このチュートリアルでは次のことを説明します。

• コメント インストーラー Storybook et Chromatic 新しい Vite + React プロジェクトについて
• コメント 自動化する CIのクロマチック
• コメント 視覚的に作成してテストする クロマチックのシンプルなコンポーネント
• 作り方 インタラクションのテスト そしてChromaticで起動してください

前提条件

• マシンに NodeJs バージョン 16 以降がインストールされていること (node -v チェックする）
• Github アカウントを持っている