StorybookのActionsを使用したコールバックのハンドリング

date

Dec 31, 2022

repo_url

slug

storybook-actions

status

Published

summary

type

Post

thumbnail_url

tags

storybook

outer_link

コンポーネントをクリックした際などに適切にコールバックが呼ばれるかどうかをStorybook上で確認できます。

メタデータオブジェクトの中に新しくargTypesを追加し、その中にチェックしたいコールバック名をキーとするオブジェクトを追加します。

今回はボタンが押されたか確認をしたいので、onClickを設定します。そしてonClickの中のactionへコールバックが呼ばれた際に表示しないメッセージを指定します。

export default {
  title: 'StyledButton',
  component: StyledButton,
  //onClickが呼ばれたときにclickedというアクションを出力する
  argTypes: {
    onClick: { action: 'clicked' },
  },
} as ComponentMeta<typeof StyledButton>

this is caption

任意のデータをActionsで表示させたい場合

メタデータで定義する代わりに、@storybook/addon-actoinsのactionsを手続き的に呼び出して出力できます。

//↓これはメタデータで定義するやり方
export default {
  title: 'StyledButton',
  component: StyledButton,
  argTypes: {
    onClick: { action: 'clicked' },
  },
} as ComponentMeta<typeof StyledButton>;

Actionsを呼び出す方法

import { useState } from 'react';
import { ComponentMeta } from '@storybook/react';
import { StyledButton } from '../components/StyledButton';
// 新しくactionsをインポート
import { action } from '@storybook/addon-actions';

export default {
  //グループ名
  title: 'StyledButton',
  //使用するコンポーネント
  component: StyledButton,
  //onClickが呼ばれたときにclickedというアクションを出力する
  argTypes: {
    onClick: { action: 'clicked' },
  },
} as ComponentMeta<typeof StyledButton>;

// incrementという名前でactionを出力するための関数をつくる
const incrementAction = action('increment');

export const Primary = (props) => {
  const [count, setCount] = useState(0);
  const onClick = (e: React.MouseEvent) => {
    // 現在のカウントを渡してActionを呼ぶ
    incrementAction(e, count);
    setCount((c) => c + 1);
  };

  return (
    <StyledButton {...props} variant='primary' onClick={onClick}>
      Count is : {count}
    </StyledButton>
  );
};