NO.185

DATE2025. 12. 03

Storybook の Story を Vitest Browser Mode with Playwright で VRT

Storybook の Story オブジェクトを Vitest の Browser Mode だけで、Visual Regression Test（VRT）ができるようになりました。

本記事では、その導入手順をコンパクトに紹介します。

前提

以下のセットアップが完了していることを前提に進めます。

Storybook のセットアップ
- 👉 https://storybook.js.org/docs/get-started/setup
Vitest Browser Mode のセットアップ
- 👉 https://vitest.dev/guide/browser

また、以下 2 つの Storybook フレームワークで動作確認済みです。

npmjs.com
- ※併せて以下のセットアップが必要
  - npmjs.com
npmjs.com

加えて、この記事も参考になります。

Portable stories in Vitest | Storybook docs

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

Storybook

Vitestの設定

まず、Vitest で Browser Mode を有効にします。

// vitest.config.js
import react from "@vitejs/plugin-react";
// import nextjs from "vite-plugin-storybook-nextjs"; // nextjs-vite を使う場合
import { playwright } from "@vitest/browser-playwright";
import { defineConfig } from "vitest/config";
 
/*
 * @type {import("vitest/config").ViteUserConfigExport}
 */
const baseConfig = {
  plugins: [
    react(),
    // nextjs(),
  ],
  test: {
    include: ["src/**/*.test.{ts,tsx}", "src/**/*.spec.{ts,tsx}"],
    setupFiles: ["./vitest.setup.js"],
    browser: {  // 👈 Browser Mode の設定
      enabled: true,
      provider: playwright(),
      headless: true,
      instances: [{ browser: "chromium" }],
    },
  },
};
 
export default defineConfig(baseConfig);

Vitest Browser Mode 向けのセットアップも追加します。

// vitest.setup.js
import "vitest-browser-react";

Story を VRT する

では、サンプルコンポーネントと Story、テストコードを作成していきます。

コンポーネント

// ./bubble-text.tsx
type Props = {
  text: string;
};
 
export const BubbleText = ({ text }: Props) => {
  return (
    <div>{text}</div>
  );
};

Storyファイル

// ./bubble-text.stories.tsx
import type { Meta, StoryObj } from "@storybook/react-vite";
// or
// import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 
import { BubbleText } from "./bubble-text";
 
const meta = {
  args: {
    text: "Hello, World",
  },
  component: BubbleText,
} satisfies Meta<typeof BubbleText>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Default: Story = {};

VRT のテストコード

1. `@storybook/nextjs-vite` を使用する場合

composeStories で Story オブジェクトをまとめて取得し、 Story.run() → toMatchScreenshot() の流れで VRT できます。

// ./bubble-text.spec.tsx
import { composeStories } from "@storybook/nextjs-vite";
import { describe, expect, it } from "vitest";
import * as stories from "./bubble-text.stories";
 
const Stories = composeStories(stories);
 
describe("BubbleText", () => {
  it.each(Object.entries(Stories))("should %s snapshot", async (_, Story) => {
    // Act
    await Story.run();
 
    // Assert
    await expect(document.body).toMatchScreenshot();
  });
});

2. `@storybook/react-vite` を使用する場合

@storybook/nextjs-vite と同様に、composeStories で Story オブジェクトをまとめて取得し、 render → toMatchScreenshot() の流れで VRT できます。

import { composeStories } from "@storybook/react-vite";
import { describe, expect, it } from "vitest";
import { render } from "vitest-browser-react";
import * as stories from "./bubble-text.stories";
 
const Stories = composeStories(stories);
 
describe("BubbleText", () => {
  it.each(Object.entries(Stories))("should %s snapshot", async (_, Story) => {
    // Act
    const { getByTestId } = await render(
      <div data-testid="test">
        <Story />
      </div>,
    );
 
    await expect(getByTestId("test")).toMatchScreenshot();
  });
});

これにより、Storybook と Vitest だけで完結する VRT 環境が構築できました！🎉

備考

StorybookのcomposeStoryとVitestのtoMatchScreenshotを組み合わせたVRT

Zenn

フロントエンド

テスト

読者になる

silverbirder

Webソフトウェアエンジニア
個人ブログキュレーションこぶりー運営

ブログを応援する

この記事がよかったら、お布施という形で応援してもらえるとうれしいです。

おふせぼたん

※ ログイン不要で投稿できます。

※ 同じブラウザから投稿を削除できます。

読み込み中...

Storybook の Story を Vitest Browser Mode with Playwright で VRT

Storybook の Story オブジェクトを Vitest の Browser Mode だけで、Visual Regression Test（VRT）ができるようになりました。

本記事では、その導入手順をコンパクトに紹介します。

前提

以下のセットアップが完了していることを前提に進めます。

Storybook のセットアップ
- 👉 https://storybook.js.org/docs/get-started/setup
Vitest Browser Mode のセットアップ
- 👉 https://vitest.dev/guide/browser

また、以下 2 つの Storybook フレームワークで動作確認済みです。

npmjs.com
- ※併せて以下のセットアップが必要
  - npmjs.com
npmjs.com

加えて、この記事も参考になります。

Portable stories in Vitest | Storybook docs

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

Storybook

Vitestの設定

まず、Vitest で Browser Mode を有効にします。

// vitest.config.js
import react from "@vitejs/plugin-react";
// import nextjs from "vite-plugin-storybook-nextjs"; // nextjs-vite を使う場合
import { playwright } from "@vitest/browser-playwright";
import { defineConfig } from "vitest/config";
 
/*
 * @type {import("vitest/config").ViteUserConfigExport}
 */
const baseConfig = {
  plugins: [
    react(),
    // nextjs(),
  ],
  test: {
    include: ["src/**/*.test.{ts,tsx}", "src/**/*.spec.{ts,tsx}"],
    setupFiles: ["./vitest.setup.js"],
    browser: {  // 👈 Browser Mode の設定
      enabled: true,
      provider: playwright(),
      headless: true,
      instances: [{ browser: "chromium" }],
    },
  },
};
 
export default defineConfig(baseConfig);

Vitest Browser Mode 向けのセットアップも追加します。

// vitest.setup.js
import "vitest-browser-react";

Story を VRT する

では、サンプルコンポーネントと Story、テストコードを作成していきます。

コンポーネント

// ./bubble-text.tsx
type Props = {
  text: string;
};
 
export const BubbleText = ({ text }: Props) => {
  return (
    <div>{text}</div>
  );
};

Storyファイル

// ./bubble-text.stories.tsx
import type { Meta, StoryObj } from "@storybook/react-vite";
// or
// import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 
import { BubbleText } from "./bubble-text";
 
const meta = {
  args: {
    text: "Hello, World",
  },
  component: BubbleText,
} satisfies Meta<typeof BubbleText>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Default: Story = {};

VRT のテストコード

1. `@storybook/nextjs-vite` を使用する場合

composeStories で Story オブジェクトをまとめて取得し、 Story.run() → toMatchScreenshot() の流れで VRT できます。

// ./bubble-text.spec.tsx
import { composeStories } from "@storybook/nextjs-vite";
import { describe, expect, it } from "vitest";
import * as stories from "./bubble-text.stories";
 
const Stories = composeStories(stories);
 
describe("BubbleText", () => {
  it.each(Object.entries(Stories))("should %s snapshot", async (_, Story) => {
    // Act
    await Story.run();
 
    // Assert
    await expect(document.body).toMatchScreenshot();
  });
});

2. `@storybook/react-vite` を使用する場合

@storybook/nextjs-vite と同様に、composeStories で Story オブジェクトをまとめて取得し、 render → toMatchScreenshot() の流れで VRT できます。

import { composeStories } from "@storybook/react-vite";
import { describe, expect, it } from "vitest";
import { render } from "vitest-browser-react";
import * as stories from "./bubble-text.stories";
 
const Stories = composeStories(stories);
 
describe("BubbleText", () => {
  it.each(Object.entries(Stories))("should %s snapshot", async (_, Story) => {
    // Act
    const { getByTestId } = await render(
      <div data-testid="test">
        <Story />
      </div>,
    );
 
    await expect(getByTestId("test")).toMatchScreenshot();
  });
});

これにより、Storybook と Vitest だけで完結する VRT 環境が構築できました！🎉

備考

StorybookのcomposeStoryとVitestのtoMatchScreenshotを組み合わせたVRT

Zenn

フロントエンド

テスト

読者になる

silverbirder

Webソフトウェアエンジニア
個人ブログキュレーションこぶりー運営

ブログを応援する

この記事がよかったら、お布施という形で応援してもらえるとうれしいです。

おふせぼたん

※ ログイン不要で投稿できます。

※ 同じブラウザから投稿を削除できます。

読み込み中...

Storybook の Story を Vitest Browser Mode with Playwright で VRT

前提

Vitestの設定

Story を VRT する

コンポーネント

Storyファイル

VRT のテストコード

1. `@storybook/nextjs-vite` を使用する場合

2. `@storybook/react-vite` を使用する場合

備考

silverbirder

ブログを応援する

関連する記事

Storybook の Story を Vitest Browser Mode with Playwright で VRT

前提

Vitestの設定

Story を VRT する

コンポーネント

Storyファイル

VRT のテストコード

1. `@storybook/nextjs-vite` を使用する場合

2. `@storybook/react-vite` を使用する場合

備考

silverbirder

ブログを応援する

関連する記事