Storybook の Story を Vitest Browser Mode with Playwright で VRT

2025年12月3日

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 フレームワークで動作確認済みです。

https://www.npmjs.com/package/@storybook/nextjs-vite
- ※併せて以下のセットアップが必要
  - https://www.npmjs.com/package/vite-plugin-storybook-nextjs
https://www.npmjs.com/package/@storybook/react-vite

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

https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest

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 環境が構築できました！🎉

備考

https://zenn.dev/silverbirder/articles/7b2795f6b26f98

前提