https://uga-box.hatenablog.com/entry/2024/06/14/000000

Storybook v8.1 のアプデ情報を確認した

storybook.js.org

New UI for creating and editing stories

画面からStoryが作れる機能が追加された

左ペインの検索フォーム横の「＋」を押すとStoryを新しく作るポップアップが表示される

存在するコンポーネント名を入力するとサジェストされ

選択するとStoryが生成される

.stories.tsx ファイルも生成される

import type { Meta, StoryObj } from '@storybook/react';

import { Button } from './Button';

const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    backgroundColor: "#29db41",
    label: "label"
  }
};

Type-safe module mocking

package.jsonにimportsというセクションを作る

これはsubpath importと呼ばれるNodeの機能

imports フィールドを使用すると、内部モジュールをカスタマイズしてエクスポートすることができる

例えば、DBアクセスするモジュールをimport ... from "./lib/db.ts"する代わりに、#をつけてimport ... from "#lib/db"すると、指定した特定のコンディションでモジュールを差し替えることができる

// package.json
{
  "type": "module",
  "imports": {
    "#lib/db": {
      "storybook": "./lib/db.mock.ts",
      "default": "./lib/db.ts"
    },
    "#*": [
      "./*",
      "./*.ts",
      "./*.tsx",
    ]
  }
}

コンディションはnode起動時に--conditions=xxxで指定できるが、

Modules: Packages | Node.js v22.3.0 Documentation

Storybookの場合はviteの設定でresolve.conditionsのstring[]に渡していた

https://github.com/storybookjs/storybook/pull/26688/commits/3ff3e13bffba90d197407c00658ed4eddf3b8806#diff-78b2bdf5bf345de09426a8389c7acef76797e37943497fc16bcc80ab00d1fd0dR68

そして、これはTypeScriptでも5.4からサポートされていて、自動補完でsubpathのimportができたりするので型セーフという話

Unit testing React Server Components

上の仕組みを利用して、RSCをモックしてRSCもテストできるよという話

mockをクライアント側でゴニョゴニョ作る必要がある

Portable stories for Playwright Component Tests

Storybook 8.1 以降で、React 18+ と Vue3 の Storybook ストーリーを Playwright CT で再利用できるようになった

Playwright CT は、高速で優れた VSCode 統合、テストジェネレーター、トレースビューアなどの機能を備えたコンポーネントテストツール

Storybook と Playwright CT を連携させるには、以下の 3 つのステップを実行する

グローバルアノテーションのインポート: Storybook のグローバルスタイルとアノテーション (args、デコレーターなど) を Playwright CT のセットアップファイル (playwright/index.tsx) にインポート。これにより、ポータブルストーリーでグローバル設定が考慮される
ポータブルストーリーファイルの作成: *.stories.portable.ts ファイルを作成し、Storybook の composeStories API を使用して、ストーリーファイル内のすべてのストーリーをポータブルコンポーネントに変換する
Playwright CT でのポータブルストーリーの使用: テストファイルで、作成したポータブルストーリーファイルをインポートし、Storybook の createTest API を使用する。ストーリーをマウントすると、デコレーター、ローダー、play 関数が実行される

Storybook は、Playwright CT テストを補完する機能も提供

分離開発環境: アプリケーションの他の部分から分離して UI コンポーネントを構築およびテストするためのサンドボックスのような環境を提供
ハンドオフとコラボレーション: チームメンバーがアプリ全体をデプロイせずに変更を確認および議論できるように、静的アプリを生成
ドキュメントとコンポーネントカタログ: UI コンポーネントの最新のドキュメントを自動的に生成
豊富なアドオンエコシステム: アクセシビリティテストから設計ツールとの統合まで、幅広い統合とアドオンをサポート
ビジュアルリグレッションテスト: UI がさまざまなデバイスやブラウザで意 intended どおりに表示されることを確認する Visual Tests アドオンを提供