編集

Storybook v7

#Storybook

Storybook v7 がリリース。Storybook v7 では様々な最適化や機能の統廃合が行われ、今までより全体的に扱いやすくなっています。Monorepo であったり特殊な構成をしていない限り、マイグレーションガイドに従えば、すぐに移行は完了します。

#UI デザインの刷新

UI が全体的に刷新され、より重要な情報にアクセスしやすくなりました。

特にドキュメントがタブで切り替えて表示する形式から、コンポーネントの表示される箇所でそのまま表示されるようになったため、以前よりドキュメントへのアクセスが簡単になりました。

#First-class Framework integrations

Storybook v7 ではいくつかのフレームワークを決め打ちして、ゼロコンフィグで利用できるような対応が行われています。

https://storybook.js.org/blog/framework-api/

現在は Vite、Next.js、SvelteKit で導入されており、今後 Remix や Nuxt も予定されています。

Next.js の場合、Webpack、Babel、Turbopack などのビルド設定のミラーリングによるゼロコンフィグだけでなく、next/image や next/router などのモックが挿入されるため、以前よりはるかに導入しやすくなっています。

#Interaction testing - Group steps

Storybook のインタラクションテストでは、今まで jest の describe や it のようにそのテストコードが何をするためのものなのか表す手段やテストをグループ化する存在しませんでした。

今後は、次のように step メソッド利用して、ヒューマンリーダブルなグループ化を行えます。

jsx
// SignupForm.stories.ts
import type { Meta, StoryObj } from "@storybook/your-framework";
import { userEvent, within } from "@storybook/testing-library";
import { SignupForm } from "./SignupForm";
const meta: Meta<typeof SignupForm> = {
  title: "SignupForm",
  component: SignupForm,
};
export default meta;
type Story = StoryObj<typeof SignupForm>;

export const Submitted: Story = {
  play: async ({ args, canvasElement, step }) => {
    const canvas = within(canvasElement);
    await step("Enter email and password", async () => {
      await userEvent.type(canvas.getByTestId("email"), "hi@example.com");
      await userEvent.type(canvas.getByTestId("password"), "supersecret");
    });
    await step("Submit form", async () => {
      await userEvent.click(canvas.getByRole("button"));
    });
  },
};

#参考文献

編集