Skip to main content

[Note] StoryBook 筆記

Snippets#

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
export const actions = {
onPinTask: action('onPinTask'),
onArchiveTask: action('onArchiveTask'),
};
storiesOf('TaskList', module)
.addDecorator((story) => <div style={{ padding: '3rem' }}>{story()}</div>)
.add('default', () => <TaskList tasks={defaultTasks} {...actions} />)
.add('withPinnedTasks', () => <TaskList tasks={withPinnedTasks} {...actions} />)
.add('loading', () => <TaskList loading tasks={[]} {...actions} />)
.add('empty', () => <TaskList tasks={[]} {...actions} />);
  • action:在 Storybook 中提供 action 這個方法可以對某些事件進行測試。
  • addDecorator(),讓我們可以在 story root 的 DOM 周圍增加一些樣式或屬性,例如 <Provide> 也可以在這裡套用。
Last updated on