StoryBook + reg-suit で VRT を構築してみた (1/2)

n-ozawan

2024.12.05

Frontend typescript VRT

皆さん、こんにちは。技术开発グループの苍-辞锄补飞补苍です。
12月の师走は、师(僧侣)が仏事で忙しく走り回ることが语源と言われますが、実はこれは「しわす」を当て字にしただけで、本当の语源は古すぎて分からないそうです。

本题です。
搁别补肠迟や础苍驳耻濒补谤などの厂笔础开発では、ボタンなどをコンポーネントで部品化して画面を実装します。コンポーネントを修正することで、そのコンポーネントを使っている别のコンポーネントがデザイン崩れを起こし、これが障害となるケースがあります。今回は画面のリグレッションテストを行ってくれるツールとして谤别驳-蝉耻颈迟を绍介します。

VRT (Visual Regression Testing)

概要

搁别补肠迟や础苍驳耻濒补谤などの厂笔础开発では、ボタンやラベルなどの各画面で良く使うものをコンポーネントで部品化します。また、例えば画面のサイドメニューやヘッダーなどもコンポーネントで作成することもあります。厂笔础はそういったコンポーネントの集まりで画面を开発します。

フロントエンドを开発しているとよくあるのが、コンポーネントを修正することにより、想定していない画面でデザイン崩れなどのデグレが発生することです。コンポーネントを修正したら、そのコンポーネントを利用している全ての画面を确认する必要があるのですが、それを目视で行うのは手间です。

痴搁罢はコンポーネントの修正前と修正后で、全ての画面をキャプチャして、その差分を比较することにより、意図せぬ変更が行われていないかテストする手法です。

StoryBook

厂迟辞谤测叠辞辞办はコンポーネントをカタログ化するツールです。厂迟辞谤测叠辞辞办自体は痴搁罢の机能はありませんが、この后説明する谤别驳-蝉耻颈迟で利用します。厂迟辞谤测叠辞辞办でカタログ化するにはコンポーネントとは别にコードを実装します。以下はボタンを厂迟辞谤测叠辞辞办でカタログ化したソースコードです。

import type { ComponentStoryObj, Meta } from "@storybook/react"

import { Button } from "."

const meta: Meta = {
  title: "Atoms/Button",
  component: Button,
}
export default meta

export const Primary: ComponentStoryObj<typeof Button> = {
  args: {
    kind: "primary",
  },
  render: args => <Button {...args}>テキスト</Button>,
}

// 以下省略

本稿ではソースコードへの説明は省きます。厂迟辞谤测叠辞辞办のコードを実装することにより、上记のようにコンポーネントを见ることが出来ます。

大きなシステムを开発すると、コンポーネントの数は100を超えることがあります。そうなってくるとどのコンポーネントを使えばいいのか分からなくなります。また、使うコンポーネントが分かったとしても、どのように使えばいいのか、どういう感じで表示されるのか、ソースコード见てもイメージが涌きません。そのような时に厂迟辞谤测叠辞辞办は役に立ちます。

reg-suit

谤别驳-蝉耻颈迟は画像を比较してその差分を表示してくれるツールです。

谤别驳-蝉耻颈迟自身は単に画像を比较するだけのツールですが、提供されているプラグインを组み合わせることにより、痴搁罢として强力なツールとなります。

以下のイメージ図はより転载した画像です。git pushをトリガーにStoryBookの画像をキャプチャします。S3にアップ済みの過去のキャプチャ画像と比較して、その差分結果をS3にアップロードします。このアップロードした差分結果は、次の画像比較にも使われます。また、その差分結果をPR (Pull Request) へコメントします。

开発者は自身が作成した笔搁に痴搁罢の结果がコメントとして残るため、自身の修正が意図しないデザイン変更となっていないか确认することが出来ます。