Merge pull request #15 from nus3/update-testing-library

Update testing library

apps/react-vitest/.storybook/main.ts

@@ -1,19 +1,36 @@
-module.exports = {
-	framework: "@storybook/react",
+import { dirname, join } from "node:path";
+
+import type { StorybookConfig } from "@storybook/react-vite";
+
+function getAbsolutePath(value: string) {
+	return dirname(require.resolve(join(value, "package.json")));
+}
+
+const config: StorybookConfig = {
+	framework: {
+		// HACK: "@storybook/react-vite"しか許可されていない部分をstringも許可するように
+		// @ts-expect-error
+		name: getAbsolutePath("@storybook/react-vite"),
+		options: {},
+	},
+
 	stories: ["../src/components/**/*.stories.@(js|jsx|ts|tsx)"],
+
 	addons: [
-		"@storybook/addon-links",
-		"@storybook/addon-essentials",
-		"@storybook/addon-interactions",
+		getAbsolutePath("@storybook/addon-links"),
+		getAbsolutePath("@storybook/addon-essentials"),
+		getAbsolutePath("@storybook/addon-interactions"),
 	],
+
 	staticDirs: ["../public"],
-	core: {
-		builder: "@storybook/builder-vite",
-	},
-	features: {
-		storyStoreV7: true,
-	},
+
 	async viteFinal(config) {
 		return config;
 	},
+
+	docs: {
+		autodocs: true,
+	},
 };
+
+export default config;

apps/react-vitest/package.json

@@ -11,9 +11,11 @@
 		"fix:unsafe": "biome check --apply-unsafe .",
 		"lint": "biome lint .",
 		"test": "vitest",
+		"test:ui": "vitest --ui",
 		"type-check": "tsc --noEmit",
-		"storybook": "start-storybook -p 1234",
-		"build-storybook": "build-storybook"
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"test-storybook": "test-storybook"
 	},
 	"dependencies": {
 		"clsx": "1.1.1",
@@ -22,23 +24,24 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.7.0",
-		"@storybook/addon-docs": "6.5.6",
-		"@storybook/addon-essentials": "6.5.6",
-		"@storybook/addon-interactions": "6.5.6",
-		"@storybook/addon-links": "6.5.6",
-		"@storybook/builder-vite": "0.1.35",
-		"@storybook/react": "6.5.6",
-		"@storybook/testing-library": "0.0.11",
-		"@storybook/testing-react": "1.3.0",
+		"@storybook/addon-docs": "8.0.8",
+		"@storybook/addon-essentials": "8.0.8",
+		"@storybook/addon-interactions": "8.0.8",
+		"@storybook/addon-links": "8.0.8",
+		"@storybook/react": "8.0.8",
+		"@storybook/react-vite": "8.0.8",
+		"@storybook/test": "8.0.8",
+		"@storybook/test-runner": "0.17.0",
 		"@testing-library/jest-dom": "6.4.2",
-		"@testing-library/react": "13.3.0",
-		"@testing-library/user-event": "14.2.0",
+		"@testing-library/react": "15.0.2",
+		"@testing-library/user-event": "14.5.2",
 		"@types/react": "18.2.25",
 		"@types/react-dom": "18.2.25",
 		"@vitejs/plugin-react": "4.2.1",
 		"@vitest/ui": "1.5.0",
 		"jsdom": "24.0.0",
 		"msw": "2.2.13",
+		"storybook": "8.0.8",
 		"typescript": "5.2.2",
 		"vite": "5.2.8",
 		"vitest": "1.5.0",

apps/react-vitest/src/components/Button/Button.stories.tsx

@@ -1,17 +1,18 @@
-import { action } from "@storybook/addon-actions";
-
+import { fn } from "@storybook/test";
 import { Button } from "./Button";
 
-import type { ComponentStoryObj, Meta } from "@storybook/react";
+import type { StoryObj, Meta } from "@storybook/react";
 
-export default {
-	title: "Button",
+const meta: Meta = {
 	component: Button,
-} as Meta;
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const Default: ComponentStoryObj<typeof Button> = {
+export const Default: Story = {
 	args: {
 		children: "label",
-		onClick: action("onClick"),
+		onClick: fn(),
 	},
 };

apps/react-vitest/src/components/DateText/DateText.stories.tsx

@@ -1,12 +1,14 @@
 import { DateText } from "./DateText";
 
-import type { ComponentStoryObj, Meta } from "@storybook/react";
+import type { StoryObj, Meta } from "@storybook/react";
 
-export default {
-	title: "DateText",
+const meta: Meta = {
 	component: DateText,
-} as Meta;
+} satisfies Meta<typeof DateText>;
 
-export const Default: ComponentStoryObj<typeof DateText> = {
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
 	args: {},
 };

apps/react-vitest/src/components/GetExamplesButton/GetExamplesButton.test.tsx

@@ -22,10 +22,9 @@ describe("GetExamplesButton", () => {
 	});
 
 	test("should render loading", async () => {
+		vi.useFakeTimers({ shouldAdvanceTime: true });
 		const user = userEventSetup();
 
-		vi.useFakeTimers();
-
 		vi.spyOn(exampleApi, "getExamples").mockImplementation(() =>
 			delayedResponse<exampleApi.GetExamplesResponse>(500, {
 				examples: [
@@ -37,15 +36,16 @@ describe("GetExamplesButton", () => {
 		);
 
 		render(<GetExamplesButton />);
+
 		await user.click(screen.getByRole("button"));
 
-		await screen.findByTestId("Loading");
+		expect(screen.getByTestId("Loading")).toBeInTheDocument();
 		act(() => {
 			vi.advanceTimersByTime(500);
 		});
 		await waitFor(() => expect(screen.queryByTestId("Loading")).toBeNull());
 
 		vi.runOnlyPendingTimers();
-		vi.useFakeTimers();
+		vi.useRealTimers();
 	});
 });

apps/react-vitest/src/components/SelectBox/SelectBox.stories.tsx

@@ -1,16 +1,17 @@
-import { action } from "@storybook/addon-actions";
-
 import { SelectBox } from "./SelectBox";
 
-import type { ComponentStoryObj, Meta } from "@storybook/react";
+import type { StoryObj, Meta } from "@storybook/react";
+import { fn } from "@storybook/test";
 
-export default {
-	title: "SelectBox",
+const meta: Meta = {
 	component: SelectBox,
-} as Meta;
+} satisfies Meta<typeof SelectBox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const Default: ComponentStoryObj<typeof SelectBox> = {
+export const Default: Story = {
 	args: {
-		onClick: action("onClick"),
+		onClick: fn(),
 	},
 };

apps/react-vitest/src/components/Toast/Toast.stories.tsx

@@ -1,21 +1,30 @@
-import { userEvent, within } from "@storybook/testing-library";
+import { expect, userEvent, within } from "@storybook/test";
 
-import { Toast } from "./Toast";
+import { AUTO_CLOSE_TIME, TOAST_ANIMATION_TIME, Toast } from "./Toast";
 
-import type { ComponentStoryObj, Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 
-export default {
-	title: "Toast",
+const meta: Meta = {
 	component: Toast,
-} as Meta;
+} satisfies Meta<typeof Toast>;
 
-export const Default: ComponentStoryObj<typeof Toast> = {
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
 	args: {
 		children: "Hello nus3 in Storybook!!",
 	},
-	play: ({ canvasElement }) => {
+	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 		const btn = canvas.getByRole("button");
-		userEvent.click(btn);
+
+		await userEvent.click(btn);
+		await expect(canvas.getByRole("alert")).toBeInTheDocument();
+
+		// HACK: 不安定になる気しかしない
+		setTimeout(async () => {
+			await expect(canvas.queryByRole("alert")).toBeNull();
+		}, AUTO_CLOSE_TIME + TOAST_ANIMATION_TIME);
 	},
 };

apps/react-vitest/src/components/Toast/Toast.test.tsx

@@ -1,16 +1,12 @@
-import { composeStories } from "@storybook/testing-react";
 import { act, render, screen } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 
 import { userEventSetup } from "../../../test/helpers/userEventSetup";
 import { AUTO_CLOSE_TIME, TOAST_ANIMATION_TIME, Toast } from "./Toast";
-import * as ToastStories from "./Toast.stories";
-
-const { Default } = composeStories(ToastStories);
 
 describe("Toast", () => {
 	beforeEach(() => {
-		vi.useFakeTimers();
+		vi.useFakeTimers({ shouldAdvanceTime: true });
 	});
 
 	afterEach(() => {
@@ -33,18 +29,4 @@ describe("Toast", () => {
 
 		expect(screen.queryByRole("alert")).toBeNull();
 	});
-
-	test("should be show and hide toast in story", async () => {
-		const { container } = render(<Default />);
-		expect(screen.queryByRole("alert")).toBeNull();
-
-		await Default.play({ canvasElement: container });
-		expect(screen.getByRole("alert")).toBeInTheDocument();
-
-		act(() => {
-			vi.advanceTimersByTime(TOAST_ANIMATION_TIME + AUTO_CLOSE_TIME);
-		});
-
-		expect(screen.queryByRole("alert")).toBeNull();
-	});
 });

apps/react-vitest/src/hooks/useHash.test.ts

@@ -1,5 +1,5 @@
 import { renderHook, waitFor } from "@testing-library/react";
-import { describe, expect, test, vi, beforeEach } from "vitest";
+import { beforeEach, describe, expect, test, vi } from "vitest";
 
 import { useHash } from "./useHash";