Storybook の Story を Vitest Browser Mode with Playwright で VRT

// 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.setup.js
import "vitest-browser-react";

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

// ./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 = {};

// ./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();
  });
});

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();
  });
});