Storybook の Story を Vitest Browser Mode with Playwright で VRT
Storybook の Story オブジェクトを Vitest の Browser Mode だけで、Visual Regression Test（VRT）ができるようになりました。
本記事では、その導入手順をコンパクトに紹介します。
前提
以下のセットアップが完了していることを前提に進めます。
- Storybook のセットアップ
- Vitest Browser Mode のセットアップ
また、以下 2 つの 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 環境が構築できました！🎉
備考
-
※ ログイン不要で投稿できます。
※ 同じブラウザから投稿を削除できます。
0
読み込み中...
関連する記事
タグ「フロントエンド」の記事
また、以下の記事の続きを書こうと思います。 https://silverbirder.github.io/blog/contents/20260312/ ビジネスロジック アプリケーションのビジネスロジックに関することについて書きます。 複
2026年03月18日
Webフロントエンドのコードレビューをしているときに考えていることについて書きます。 毎日1記事投稿、1記事30分という制約を課していますので、本記事は完璧ではありません。(言い訳) また希望的な考えもあるので、実践していないものもあります
2026年03月12日
AI にコードを書かせた後、余計なコードを見つけて消す作業があります。 不毛なことなので、それらの作業を減らすためのお作法を紹介します。 未使用コードを消す 以下でも書きましたが、未使用コードの検査に knip を使うことが多いです。 ht
タグ「テスト」の記事
以下の記事で書いた CSSをテストする方法について、試してみました。 https://zenn.dev/silverbirder/articles/df6752b230f04c ソースコードは、以下に置いています。 https://gith
Web のフロントエンド実装において、次のようなミスによってデザイン崩れを起こしてしまったことはありませんか。 flex-shrink の指定を忘れて、要素が押しつぶされてしまった z-index の指定を間違えて、要素が意図せず前面（また
AIの進化によって、プロダクションコードに対するテストコードは、以前と比べて格段に書きやすくなったと感じています。 単体テストに関する基本的なお作法については、以前に以下の記事で整理しました。 興味があれば、参考として読んでもらえると嬉しい
2026年01月09日