<a href="https://github.com/storybookjs/storybook/releases/tag/v6.4.0">Storybook の 6.4.0 がリリース</a>され、<code>Interactive stories</code>が新機能として追加されました。詳細は<a href="https://storybook.js.org/blog/interactive-stories-beta/">Storybook のブログ</a>でも記載されています。
<h2>概要</h2>
Interactive stories の Addon を追加すると、testing-library で定義した操作を Storybook 上で確認することができるようになります。
次の gif のようにユーザー操作に対するコンポーネントの状態を UI(Addon)からステップごとに確認できます。
<img src="/frontend-expert/image/storybook-interactive-stories/capture.gif" alt="Interactive addonを使った例" width="360" height="240" >
<h2>導入手順</h2>
<ol>
<li>パッケージを追加する</li>
<li>Storybook の<code>main.js</code>に設定を追加する</li>
<li>Interactive stories 用の story を<code>stories.tsx</code>に追加する</li>
</ol>
<h3>1. パッケージを追加する</h3>
Interactive addon を利用するには次のパッケージが必要です。 
(今回は React のコンポーネントを対象としています)
<ul>
<li>@storybook/addon-interactions</li>
<li>@storybook/react</li>
<li>@storybook/testing-library</li>
</ul>
次のコマンドを実行してインストールします。
<code>npm i -D @storybook/addon-interactions @storybook/react @storybook/testing-library</code>
今回試したバージョンは次になります。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "devDependencies": {
 "@storybook/addon-interactions": "6.4.0",
 "@storybook/react": "6.4.0",
 "@storybook/testing-library": "0.0.7"
 }
}
</code></pre></div>
<h3>2. Storybook の<code>main.js</code>に設定を追加する</h3>
<div class="remark-highlight"><pre class="language-js"><code class="language-js">module.exports = {
 stories: ["../src/components/**/**/*.stories.@(js|jsx|ts|tsx)"],
 addons: ["@storybook/addon-interactions"], // addonの追加
 features: {
 interactionsDebugger: true, // Interactive storiesをaddonで1ステップずつ確認できるようにするのに必要
 },
};
</code></pre></div>
<h3>3. Interactive stories 用の story を<code>stories.tsx</code>に追加する</h3>
例えば、次のサンプルコードでは Storybook 上にマウントされたコンポーネントに対して、<code>Add</code>のラベルがついたボタンを 4 回クリックした後に<code>Reset</code>のボタンをクリックする story を<code>@storybook/testing-library</code>を使って追加しています。
<div class="remark-highlight"><pre class="language-tsx"><code class="language-tsx">// Interactive storiesに関係ある部分しか記載してません
import { within, userEvent } from "@storybook/testing-library";

const Template: Story&#x3C;ExampleComponentProps> = (args) => (
 &#x3C;ExampleComponent {...args} />
);

export const Default = Template.bind({});
Default.play = async ({ canvasElement }) => {
 const canvas = within(canvasElement);
 await userEvent.click(canvas.getByRole("button", { name: "Add" }));
 await userEvent.click(canvas.getByRole("button", { name: "Add" }));
 await userEvent.click(canvas.getByRole("button", { name: "Add" }));
 await userEvent.click(canvas.getByRole("button", { name: "Add" }));
 await userEvent.click(canvas.getByRole("button", { name: "Reset" }));
};
</code></pre></div>
<code>Default.play = async ({ canvasElement }) => {</code>は Storybook6.4 でサポートされる<a href="https://storybook.js.org/blog/component-story-format-3-0/">CSF3</a>の構文です。 
また、まだ v0.5 ですが Storybook から<a href="https://github.com/storybookjs/eslint-plugin-storybook">eslint-plugin</a>も提供されているので、併せて試してみても良さそうです。
Interactive stories の addon を追加した Storybook を GitHub Pages でホスティングしたので、実際に触ってみたい方は次のリンクへ。 
<a href="https://nus3.github.io/p-storybook/?path=/story/components-examplecomponent--default">https://nus3.github.io/p-storybook/?path=/story/components-examplecomponent--default</a>
Storybook 上で複雑な操作があるコンポーネントのデバッグや共有がしやすくなりそうですね。
<h2>参考リンク</h2>
<ul>
<li><a href="https://storybook.js.org/blog/interactive-stories-beta/">https://storybook.js.org/blog/interactive-stories-beta/</a></li>
<li><a href="https://storybook.js.org/blog/component-story-format-3-0/">https://storybook.js.org/blog/component-story-format-3-0/</a></li>
<li><a href="https://github.com/nus3/p-storybook">実際に実装したリポジトリ</a></li>
</ul>