このスクラップについて

ときどき Stroybook の公式サイトやリリースノートで見つけたことをメモする場所です。
気軽にコメントしていただいて構いません。

npx sb init でStroybookを導入したときに作成されるテンプレートにInteractionsアドオンが初めからインストールされるようになるみたいですね。

InteractionsアドオンはStorybook@6.4.0から追加された Interactive stories をデバッグするためのプラグインです。

実際に試してみると、以下のようにActionのタブの横に「Interactions」が追加されていることが確認できます。

コードにもアドオンが追加されています。

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/react"
}

アドオンのドキュメント見てみると、以下の設定を main.js に追記すると、アクションを巻き戻したり、進めたりしてデバッグできるみたいです。
これは便利！

// main.js
module.exports = {
  ...
  features: {
    interactionsDebugger: true,
  },
};

thasmt

ベータ版だけどStorybookの百科事典『 Component Encyclopedia 』というものが公式で公開されてました！
GithubやAdobeなど多くのチームがStorybookを公開していて確認することができます。
また、申請することで自分が作成したStorybookも公開できるようです。
https://storybook.js.org/showcase

thasmt

Storybook Test Runnerのベータ版が公開されました。

全ストーリーのPlay functionに登録したUIのレンダリングやアクションを問題なく実行できるかテストしてくれます。

Jestなどの自動テストと違うのは、実際にブラウザで立ち上げたStorybookに対してテストを実行できるので、テストで失敗したUIをそのままブラウザのStorybookを見ながらデバッグできることです。

テストで失敗した箇所のエラーの再現を手作業でする必要がなくなるのは便利ですね。

実際テスト実行して、エラーが起きた時のログはこんな感じに表示されます。

立ち上げたStorybookでもエラーを確認でき、その場でデバッグできます。

thasmt

Stroybookのテストについて記事が公式サイトで掲載されています。
test-runnerを使ったテストやJestとの連携など詳しく説明されています。

thasmt

v6.5ではOutlineアドオンがoキーをショートカットとして使えるようになるというリリースノート。
ショートカット意識して使ったことがなかったので調べてみると、立ち上げたStorybookのメニューから「Keyboard Shortcuts」を選択すると確認できました。

メニュー

ショートカット一覧画面