セッション

Session

20min

共通コンポーネントのテスト手法にあえてVRTを選択した話

Vue を取り巻くエコシステム(ツール)とその運用の話です。

■ 概要
社内のコンポーネントライブラリに対してStorybookとChromaticでビジュアルリグレッションテストを導入して、見た目のデグレを防止している話をします。

■ 詳細
Chromaticとは、Storybookのメンテナーが作成しているStorybook用のツールです。
ストーリーごとのスクリーンショットを撮影し、差分を画像で比較してくれる機能を備えています。

以下の課題を解決することを目的にして Chromatic を導入しました。

  • 既存のコンポーネントを改修した際に発生する DOM、CSS に起因する表示崩れを自動で検知できないこと
  • 依存モジュールのバージョンアップに時間がかかること

その結果、両方の課題を解決できた上に作業が楽になったという話をします。
また、なぜ他のテストではなくてビジュアルリグレッションテストを導入したのか、その意思決定の過程についても紹介します。

なお、本発表は以下の3記事の内容を合わせて再構成したものになる予定です。

Speaker Profile

プログラミングをするパンダの写真

BASE株式会社 シニアエンジニア

プログラミングをするパンダ

Twitterのlogo Githubのlogo

新卒で就職した日系大手企業を退職した後、Web系の開発会社に転職してエンジニアとしてキャリアを始める。
その後、弁護士ドットコム株式会社でレガシーシステムの改善、SaaS事業の新規開発・運用などを経験した後、2021年にフロントエンドエンジニアとしてBASE株式会社に入社。
社外活動では、技術ブログを執筆したり Software Design 2022年3月号のTDD特集に寄稿するなど情報発信を行なっている。アジャイル開発(XP、スクラム)とTDDが好き。現在DevOpsを勉強中。