「Play function」とは？

Play関数は、コンポーネントを操作したり、ユーザーの介入を必要とするシナリオをテストしたりできるようになります。

設定する

今回は既存環境に導入する想定で進めていきます！
まずはaddon-interactionsをインストールします。

pnpm add -D @storybook/addon-interactions

次にStorybookの設定を更新します。

addons: [
  '@storybook/addon-interactions', // 追加する
],

formを用意します。

import { FC } from 'react';

export const Form: FC = () => {
  return (
    <form
      className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
    >
      <div className="mb-4">
        <label
          className="block text-gray-700 text-sm font-bold mb-2"
          htmlFor="email"
        >
          メールアドレス
        </label>
        <input
          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="email"
          type="email"
          placeholder="メールアドレス"
          data-testid="email"
        />
      </div>
      <div className="mb-6">
        <label
          className="block text-gray-700 text-sm font-bold mb-2"
          htmlFor="password"
        >
          パスワード
        </label>
        <input
          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
          id="password"
          type="password"
          placeholder="パスワード"
          data-testid="password"
        />
      </div>
      <div className="flex items-center justify-between">
        <button
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          type="submit"
        >
          サブミット
        </button>
      </div>
    </form>
  );
};

次にStoryファイルを用意します。

import type { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/test';
import { Form } from './Form';

const meta = {
  title: 'Components/Form',
  component: Form,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Form>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
  },
};

play関数を実行するためにはファイル上部で下記の記述を追加します！

import { userEvent, within } from '@storybook/test';

ここまで書くとStorybookで下記のように動作することが確認できます！

めっちゃすごいですよね！？
結構手軽にかけてしまったので驚きました…。

サブミットボタンもクリックさせてみます！
下記を追加します。

await userEvent.click(canvas.getByRole('button'));

するとこんなのが出ました…

ストーリーがないか、ストーリーが選択できてないと怒られました…。

formタグにactionを設定するのを忘れておりました…

action属性を追加します。

<form action="/">

するとStorybookの一番上にあるコンポーネントのDocsが表示されるようになりました。

ただ、どうせならFormコンポーネントのDocsが表示されてほしいですね…
試してみましたが、解決できなかったのでわかったら追記しておきます…。

`step` を追加する

play関数の部分を下記のように変えてみました。

play: async ({ canvasElement, step }) => {
    const canvas = within(canvasElement);
    await step('Enter credentials', 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'));
    });
  },

stepでグルーピングすることで画像のようなネスト構造になって見やすくなります！

まとめ

コンポーネントがレンダリングされる前にコードを実行するmountメソッド内の関数を使用することで、レンダリング前にコードを実行できます。

mountを利用してモックデータの作成することも可能です！

公式ドキュメントに記載があるイベントは一部だけなようなので詳細はこちらのサイトから確認できます！

まだわからない部分は多いですが、簡単なテストであればStorybookで実施できてしまうのは良いですね！

さらに深くキャッチアップしていきたいと思います！

参考