export type Operator = "+" | "-" | "*" | "/";

export function calc(
	x: number,
	y: number,
	operator: Operator,
):
	| {
			tag: "success";
			result: number;
	  }
	| {
			tag: "error";
			msg: string;
	  } {
	let result: number;
	switch (operator) {
		case "+":
			result = x + y;
			break;
		case "-":
			result = x - y;
			break;
		case "*":
			result = x * y;
			break;
		case "/":
			if (y === 0) {
				return {
					tag: "error",
					msg: "zero divided",
				};
			}
			result = x / y;
			break;
	}
	return {
		tag: "success",
		result,
	};
}

import { describe, expect, it } from "vitest";
import { type Operator, calc } from "./calc";

describe("calc test", () => {
	type TestCase = {
		x: number;
		y: number;
		operator: Operator;
		expected: number;
	};

	const tests: TestCase[] = [
		{ x: 1, y: 1, operator: "+", expected: 2 },
		{ x: 1, y: 1, operator: "-", expected: 0 },
		{ x: 1, y: 5, operator: "-", expected: -4 },
		{ x: 1, y: 5, operator: "*", expected: 5 },
		{ x: 10, y: 5, operator: "/", expected: 2 },
	];

	it.each(tests)(
		"$x $operator $y = $expected",
		({ x, y, operator, expected }) => {
			const act = calc(x, y, operator);
			expect(act).toEqual({ tag: "success", result: expected });
		},
	);

	it("zero divide", () => {
		const act = calc(10, 0, "/");
		expect(act).toEqual({ tag: "error", msg: "zero divided" });
	});
});

export function sayHello() {
	return "Hello";
}

export function sayBye() {
	return "Bye";
}

// モックにするだけ
vi.mock("./say")

it("mock method is undefined", () => {
 	expect(sayHello()).toBeUndefined();
 });

// 関数の処理を上書きする
vi.mock("./say", () => {
	return {
		sayHello: () => "Hello!!",
	};
});

it("stub", () => {
	expect(sayHello()).toBe("Hello!!");
});

// 元の実装の処理を引き継ぐ
vi.mock("./say", async (importOriginal) => {
	return {
		...(await importOriginal<typeof import("./say")>()),
		sayHello: () => "Hello!!",
	};
});

it("stub", () => {
	expect(sayHello()).toBe("Hello!!");
	expect(sayBye()).toBe("Bye");
});

test("データ取得成功時: ユーザー名があるとき", async () => {
	vi.spyOn(Fetchers, "getMyProfile").mockResolvedValueOnce({
		id: "xxxxxxx-123456",
		email: "test@test.com",
		name: "yamanaka",
	});
	await expect(getGreet()).resolves.toBe("Hello, yamanaka!");
});

test("データ取得失敗時", async () => {
	vi.spyOn(Fetchers, "getMyProfile").mockRejectedValueOnce(httpError);
	await expect(getGreet()).rejects.toMatchObject({
		err: { message: "internal server error" },
	});
});

function mockGetMyArticles(status = 200) {
	if (status > 299) {
		return vi.spyOn(Fetchers, "getMyArticles").mockRejectedValueOnce(httpError);
	}
	return vi
		.spyOn(Fetchers, "getMyArticles")
		.mockResolvedValueOnce(getMyArticlesData);
}

test("記事一覧取得: success", async () => {
	mockGetMyArticles();
	const act = await getMyArticleLinksByCategory("nextjs");
	expect(act?.length).toBe(1);
});

test("記事一覧取得: failed", async () => {
	mockGetMyArticles(500);
	await getMyArticleLinksByCategory("testing").catch((err) => {
		expect(err).toMatchObject({
			err: { message: "internal server error" },
		});
	});
});

test("モック関数は実行された", () => {
	const mockfn = vi.fn();
	mockfn();
	expect(mockfn).toBeCalled();
});

test("モック関数は実行されていない", () => {
	const mockfn = vi.fn();
	expect(mockfn).not.toBeCalled();
});

test("モック関数を使ったアサーション", () => {
	const mockfn = vi.fn();
	mockfn("hello");
	expect(mockfn).toHaveBeenCalledTimes(1);
	expect(mockfn).toHaveBeenCalledWith("hello");
});

  // mockタイマーの使用を支持する
  vi.useFakeTimers()
  // mockタイマーの使用を解除する
  vi.useRealTimers()
  // mockタイマーに現在時刻として使用される時刻をセットする
  vi.setSystemTime(new Date())

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environmentMatchGlobs: [
      ['src/components/**/*.test.ts', 'happy-dom']
    ]
  }
})

pnpm add -D @testing-library/vue
// カスタムマッチャーを使うために
pnpm add -D @testing-library/jest-dom
// インタラクションなユーザー操作を再現するために
pnpm add -D @testing-library/user-event

pnpm add -D happy-dom

Error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

pnpm add -D @vitejs/plugin-vue

+import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vitest/config";

export default defineConfig({
+	plugins: [vue()],
	test: {
		environmentMatchGlobs: [["src/components/**/*.test.ts", "happy-dom"]],
	},
});

<script setup lang="ts">
defineProps<{ name: string; onSubmit?: (e: Event) => void }>();
</script>

<template>
  <form>
    <h2>アカウント情報</h2>
    <p>{{ name }}</p>
    <div>
      <button>編集する</button>
    </div>
  </form>
</template>

import { render } from "@testing-library/vue";
import Form from "./Form.vue";

test("名前の表示", () => {
	const { getByText } = render(Form, {
		props: {
			name: "yamanaka",
		},
	});
	expect(getByText("yamanaka")).toBeInTheDocument();
});

import { render } from "@testing-library/vue";
import Form from "./Form.vue";

test("フォームコンポーネントが正常に表示されていること", () => {
	const { getByText, getByRole } = render(Form, {
		props: {
			name: "yamanaka",
		},
	});
	expect(getByText("yamanaka")).toBeInTheDocument();
	expect(getByRole("button")).toBeInTheDocument()
	expect(getByRole("heading")).toHaveTextContent("アカウント情報")
});

test("ボタンをクリックするとイベントハンドラーが実行される", () => {
	const mockFn = vi.fn()
	const { getByRole } = render(Form, {
		props: {
			name: "yamanaka",
			onSubmit: mockFn
		}
	})
	fireEvent.click(getByRole("button"))
	expect(mockFn).toHaveBeenCalled()
})

test('Snapshot', () => {
  const { container } = renderAddressForm({ deliveryAddresses });
  expect(container).toMatchSnapshot();
});

test('アクセシビリティの確認', () => {
  const { container } = renderAddressForm({ deliveryAddresses });
  logRoles(container as HTMLElement);
});

test("データ取得成功時: ユーザー名があるとき", async () => {
	vi.spyOn(Fetchers, "getMyProfile").mockResolvedValueOnce({
		id: "xxxxxxx-123456",
		email: "test@test.com",
		name: "yamanaka",
	});
	await expect(getGreet()).resolves.toBe("Hello, yamanaka!");
});

test("モック関数を使ったアサーション", () => {
	const mockfn = vi.fn();
	mockfn("hello");
	expect(mockfn).toHaveBeenCalledTimes(1);
	expect(mockfn).toHaveBeenCalledWith("hello");
});

pnpm add -D msw@latest

import type { RequestHandler } from 'msw'
import { setupServer } from 'msw/node'
import { afterAll, afterEach, beforeAll } from 'vitest'

export function setupMockServer(...handlers: RequestHandler[]) {
  const server = setupServer(...handlers)
  beforeAll(() => server.listen())
  afterEach(() => server.resetHandlers())
  afterAll(() => server.close())
  return server
}

import { http, HttpResponse } from "msw"
import { articles } from "./fixture"

export function handleGetArticles() {
  return http.get('/api/articles', () => {
    return HttpResponse.json(articles)
  })
}

export const handlers = [handleGetArticles()]

import { expect, test } from 'vitest'
import { setupMockServer } from '../tests/setup'
import { handlers } from './__mock__/msw'
import { render } from '@testing-library/vue'
import ArticleList from './ArticleList.vue'

setupMockServer(...handlers)

test('記事一覧が表示される', async () => {
  const { findAllByRole } = render(ArticleList)
  expect(await findAllByRole('heading', { level: 2 })).toHaveLength(2)
})

pnpx storybook init

pnpm storybook

import Button from './Button.vue';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const meta = {
  title: 'Example/Button',
  component: Button,
  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ['autodocs'],
  argTypes: {
    size: { control: 'select', options: ['small', 'medium', 'large'] },
    backgroundColor: { control: 'color' },
  },
  args: {
    primary: false,
    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
    onClick: fn(),
  },
} satisfies Meta<typeof Button>;

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

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

export const Secondary: Story = {
  args: {
    primary: false,
    label: 'Button',
  },
};

export const Large: Story = {
  args: {
    label: 'Button',
    size: 'large',
  },
};

export const Small: Story = {
  args: {
    label: 'Button',
    size: 'small',
  },
};

import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

export const SPStory = {
  parameters: {
    viewport: {
      viewports: INITIAL_VIEWPORTS,
      defaultViewport: 'iphonex',
    },
  },
};

export const SPLoggedIn: Story = {
  args: {
    user: {
      name: 'Jane Doe',
    },
  },
  parameters: { ...SPStory.parameters },
};

pnpm add -D msw msw-storybook-addon

import { mswDecorator, initialize } from 'msw-storybook-addon';

export const decorators = [mswDecorator];

initialize();

pnpm msw init public

  staticDirs: ["../public"],

<script setup lang="ts">
import { onMounted, ref } from "vue";

type User = {
  name: string;
};

const data = ref<User>({ name: "" });
const loading = ref<boolean>(true);
const error = ref<Error | null>(null);

onMounted(async () => {
  try {
    const res = await fetch("/api/me");
    if (!res.ok) {
      throw new Error(`APIエラー: ${res.status}`);
    }
    data.value = await res.json();
  } catch (err) {
    error.value = err as Error;
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 画面の高さいっぱいに広げる */
}
.content {
  background-color: skyblue;
  padding: 20px;
  border-radius: 10px;
  width: 10rem;
  text-align: center;
}
</style>

<template>
  <div class="container">
    <div class="content">
      <p v-if="loading">Loading...</p>
      <p v-else-if="error">{{ error.message }}</p>
      <p v-else>{{ data.name }}</p>
    </div>
  </div>
</template>

import { http, HttpResponse } from "msw";
import { Mock } from "vitest";

export function handleMe(args?: {
  mock?: Mock;
  status?: number;
  delay?: number;
}) {
  return http.get("/api/me", async () => {
    args?.mock?.();
    if (args?.status) {
      return HttpResponse.json({}, { status: args.status });
    }
    if (args?.delay) {
      // 遅延
      await new Promise((resolve) => setTimeout(resolve, args.delay));
    }
    return HttpResponse.json({ name: "user" });
  });
}

export const handlers = [handleMe()];

import { Meta, StoryObj } from "@storybook/vue3";
import Hello from "../components/Hello.vue";
import { handleMe } from "../__mock__/me/msw";

const meta = {
  title: 'Example/Hello',
  component: Hello,
  tags: ['autodocs'],
} satisfies Meta<typeof Hello>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
  parameters: {
    msw: {
      handlers: [handleMe()],
    },
  },
};

export const Loading: Story = {
  parameters: {
    msw: {
      handlers: [handleMe({ delay: 1000 })],
    },
  },
};

export const Error: Story = {
  parameters: {
    msw: {
      handlers: [handleMe({ status: 500 })],
    },
  },
};

import { expect, userEvent, within } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/vue3';

import MyPage from './Page.vue';

const meta = {
  title: 'Example/Page',
  component: MyPage,
  render: () => ({
    components: { MyPage },
    template: '<my-page />',
  }),
  parameters: {
    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
    layout: 'fullscreen',
  },
  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ['autodocs'],
} satisfies Meta<typeof MyPage>;

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

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
export const LoggedIn: Story = {
  play: async ({ canvasElement }: any) => {
    const canvas = within(canvasElement);
    const loginButton = canvas.getByRole('button', { name: /Log in/i });
    await expect(loginButton).toBeInTheDocument();
    await userEvent.click(loginButton);
    await expect(loginButton).not.toBeInTheDocument();

    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
    await expect(logoutButton).toBeInTheDocument();
  },
};

export const LoggedOut: Story = {};

pnpm add -D @storybook/test-runner

pnpm test-storybook

║ Looks like Playwright Test or Playwright was just installed or updated. ║
║ Please run the following command to download new browsers:              ║
║                                                                         ║
║     pnpm exec playwright install                                        ║
║                                                                         ║
║ <3 Playwright Team

pnpx playwright install

pnpm test-storybook               

> storybook-demo@0.0.0 test-storybook /Users/yamanakajunichi/work/myapp/study/frontend-test/storybook-demo
> test-storybook

 PASS   browser: chromium  src/stories/Hello.stories.ts
 PASS   browser: chromium  src/stories/Header.stories.ts
 PASS   browser: chromium  src/stories/Page.stories.ts
 PASS   browser: chromium  src/stories/Button.stories.ts

Test Suites: 4 passed, 4 total
Tests:       12 passed, 12 total
Snapshots:   0 total
Time:        7.732 s
Ran all test suites.

import { composeStories } from "@storybook/vue3";
import * as stories from "../stories/Hello.stories";
import { screen, waitFor } from "@testing-library/vue";
import { handleMe, handlers } from "../__mock__/me/msw";
import { setupMockServer } from "../test/setup";

describe("Default", () => {
  setupMockServer(...handlers);
  test("Default", async () => {
    const { Default } = composeStories(stories);
    await Default.run();
    await waitFor(() => expect(screen.getByText("user")).toBeInTheDocument());
  });
});

describe("Error", () => {
  setupMockServer(handleMe({ status: 500 }));
  test("500", async () => {
    const { Error } = composeStories(stories);
    await Error.run();
    await waitFor(() => expect(screen.getByText("APIエラー: 500")).toBeInTheDocument());
  })
});

describe("Loading", () => {
  setupMockServer(handleMe({ delay: 1000 }));
  test("1000ms", async () => {
    const { Loading } = composeStories(stories);
    await Loading.run();
    await waitFor(() => expect(screen.getByText("Loading...")).toBeInTheDocument());
  });
});

pnpx reg-cli actual expected diff -R index.html

pnpm add -D storycap

// preview.ts
import { withScreenshot} from 'storycap'

export const decorator = [withScreenshot]

// .storybook/main.ts
  addons: [
    ...
    'storycap'
  ],

    "storycap": "pnpx storycap http://localhost:6006 --serverCmd 'pnpx http-server storybook-static -p 6006'"

pnpm build-storybook
pnpm storycap

# GitHub Actionsのcheckout時にこれを指定しないと親コミットが取れず失敗する
with:
    fetch-depth: 0