StoryShots

StoryShots を分かりやすく

StoryShots は、Storybook と連携して動作するツールです。Storybook は、UI コンポーネントを孤立して開発・テストするためのツールで、React, Vue, Angular など複数のフレームワークをサポートしています。StoryShots は、Storybook によって作成された各 UI コンポーネントの「状態」をスナップショットとして保存し、それを以降のテストで利用します。

StoryShots の歴史的変遷

StoryShots の基礎となる技術は、Facebook が開発した Jest のスナップショットテストです。スナップショットテストは、コンポーネントの出力をファイルに保存し、その出力が予期せず変更されないことを確認するためのテストです。この考え方を Storybook と組み合わせることで、StoryShots が生まれました。これにより、UI コンポーネントの視覚的なリグレッションテストが可能になりました。

StoryShots と Jamstack の関係

StoryShots は Jamstack の考え方とも親和性があります。Jamstack は、JavaScript、API、Markup の頭文字を取ったもので、プリレンダリングされた静的なページを配信し、JavaScript で動的な部分を補完するアーキテクチャです。Jamstack では、ビルド時に静的なページが生成されますが、その際に StoryShots を使って視覚的なリグレッションテストを行うことができます。

StoryShots を使うメリット

予期せず UI が変更されるのを防げる

StoryShots は、コンポーネントのレンダリング結果をスナップショットとして保存します。これにより、スタイルや構造が予期せずに変更されることを防ぐことができます。

開発効率の向上

StoryShots を使用すると、コンポーネントの各状態を一度にテストすることができます。これにより、手動で複数の状態をテストする手間が省け、開発効率が向上します。

ドキュメンテーションとしての活用

Storybook と合わせて使うことで、StoryShots はコンポーネントの状態を視覚的に保存することができます。これにより、ドキュメンテーションとしての利用も可能となります。

StoryShots を実装

次のモジュールをアプリに追加します。

npm install @storybook/addon-storyshots

StoryShots の使用例を以下に示します。この例では、Next.js と TypeScript を用いて実装しています。

まず、Storybook で UI コンポーネントのストーリーを作成します。ここでは、Button コンポーネントのストーリーを作成してみます。

// components/Button.stories.tsx
import { Story } from "@storybook/react";
import { Button, ButtonProps } from "./Button";

export default {
  component: Button,
  title: "Button",
};

const Template: Story<ButtonProps> = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: "Button",
};

次に、StoryShots を設定します。StoryShots は Jest の拡張機能であるため、Jest の設定ファイル（jest.config.js）に StoryShots を追加します。

// jest.config.js
module.exports = {
  //...
  setupFilesAfterEnv: ['<rootDir>/.jest/setup.ts'],
};

そして、setup.ts ファイルを作成し、StoryShots をインポートします。

// .jest/setup.ts
import initStoryshots from '@storybook/addon-storyshots';
initStoryshots();

以上の設定を行った上で Jest を実行すると、StoryShots によるテストが行われます。

参考：Storyshots Addon | Storybook: Frontend workshop for UI development