Next.js 15 + Storybook 9 環境に Vitest を導入した

npm install -D vitest @vitest/browser @vitest/coverage-v8
npm install -D @testing-library/react @testing-library/dom @testing-library/jest-dom
npm install -D playwright
npm install -D @storybook/addon-vitest
npm install -D jsdom
npm install -D markdown-to-jsx  # Storybook addon-docs の依存関係

npx playwright install

Error: browserType.launch: Executable doesn't exist at
/Users/.../ms-playwright/chromium_headless_shell-1200/chrome-headless-shell

[vitest] Vite unexpectedly reloaded a test. This may cause tests to fail,
lead to flaky behaviour or duplicated test runs.
For a stable experience, please add mentioned dependencies to your config's
`optimizeDeps.include` field manually.

export default defineConfig({
  optimizeDeps: {
    include: [
      "@testing-library/jest-dom",
      "@storybook/addon-a11y/preview",
      "@storybook/nextjs-vite",
      "storybook/test",
      "react-aria-components",
      "next/headers",
      "next/link",
      "clsx",
      "@heroicons/react/24/outline",
    ],
  },
  // ...
});

Failed to resolve dependency: markdown-to-jsx, present in client 'optimizeDeps.include'

npm install -D markdown-to-jsx

Image with src "..." has a "loader" property that does not implement width.
Please implement it or use the "unoptimized" property instead.

const preview: Preview = {
  parameters: {
    nextjs: {
      image: {
        unoptimized: true,
      },
    },
  },
};

Cannot find name 'describe'. Do you need to install type definitions for a test runner?
Cannot find name 'vi'.
Cannot find name 'expect'.

{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

projects: [
  // 通常のユニットテスト（jsdom）
  {
    extends: true,
    test: {
      name: "unit",
      include: ["src/**/*.test.{ts,tsx}"],
      environment: "jsdom",
      setupFiles: ["./src/test/setup.ts"],
    },
  },
  // Storybookテスト（browser mode）
  {
    extends: true,
    plugins: [storybookTest({ configDir: ".storybook" })],
    test: {
      name: "storybook",
      browser: {
        enabled: true,
        headless: true,
        provider: "playwright",
        instances: [{ browser: "chromium" }],
      },
      setupFiles: [".storybook/vitest.setup.ts"],
    },
  },
],

import path from "node:path";
import { fileURLToPath } from "node:url";
import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import { defineConfig } from "vitest/config";

const dirname =
  typeof __dirname !== "undefined"
    ? __dirname
    : path.dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  plugins: [tsconfigPaths(), react()],
  optimizeDeps: {
    include: [
      "@testing-library/jest-dom",
      "@storybook/addon-a11y/preview",
      "@storybook/nextjs-vite",
      "storybook/test",
      "react-aria-components",
      "next/headers",
      "next/link",
      "clsx",
      "@heroicons/react/24/outline",
    ],
  },
  test: {
    environment: "jsdom",
    setupFiles: ["./src/test/setup.ts"],
    globals: true,
    projects: [
      // 通常のユニットテスト（jsdom）
      {
        extends: true,
        test: {
          name: "unit",
          include: ["src/**/*.test.{ts,tsx}"],
          environment: "jsdom",
          setupFiles: ["./src/test/setup.ts"],
        },
      },
      // Storybookテスト（browser mode）
      {
        extends: true,
        plugins: [
          storybookTest({ configDir: path.join(dirname, ".storybook") }),
        ],
        test: {
          name: "storybook",
          browser: {
            enabled: true,
            headless: true,
            provider: "playwright",
            instances: [{ browser: "chromium" }],
          },
          setupFiles: [".storybook/vitest.setup.ts"],
        },
      },
    ],
  },
});

import "@testing-library/jest-dom";
import { vi } from "vitest";

// next/image をグローバルにモック
vi.mock("next/image", () => ({
  default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => {
    // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
    return <img {...props} />;
  },
}));

import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
import { setProjectAnnotations } from "@storybook/nextjs-vite";
import * as projectAnnotations from "./preview";

setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

// src/components/Button/Button.test.tsx
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { Button } from "./Button";

function setup(props: Partial<Parameters<typeof Button>[0]> = {}) {
  const user = userEvent.setup();
  const defaultProps = {
    children: "ボタン",
    ...props,
  };

  const utils = render(<Button {...defaultProps} />);

  return {
    ...utils,
    user,
  };
}

describe("Button", () => {
  test("ボタンのテキストが表示される", () => {
    setup({ children: "カートに追加" });

    expect(
      screen.getByRole("button", { name: "カートに追加" }),
    ).toBeInTheDocument();
  });

  test("ユーザーがボタンをクリックするとonPressが呼ばれる", async () => {
    const handlePress = vi.fn();
    const { user } = setup({ onPress: handlePress });

    await user.click(screen.getByRole("button"));

    expect(handlePress).toHaveBeenCalledTimes(1);
  });
});

// src/components/Button/Button.stories.tsx
import type { Meta, StoryObj } from "@storybook/nextjs-vite";
import { expect, fn, userEvent, within } from "storybook/test";
import { Button } from "./Button";

const meta = {
  title: "Components/Button",
  component: Button,
  args: {
    children: "ボタン",
    onPress: fn(),
  },
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const ClickInteraction: Story = {
  args: {
    children: "クリックしてね",
    onPress: fn(),
  },
  play: async ({ canvasElement, args }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole("button", { name: "クリックしてね" });

    await expect(button).toBeInTheDocument();
    await userEvent.click(button);
    await expect(args.onPress).toHaveBeenCalledTimes(1);
  },
};

# 全テスト実行
npm run test

# unit テストのみ
npx vitest --project=unit

# storybook テストのみ
npx vitest --project=storybook

# Storybook を起動してインタラクションを確認
npm run storybook

{
  "scripts": {
    "test": "vitest",
    "test:unit": "vitest --project=unit",
    "test:storybook": "vitest --project=storybook"
  }
}