Storybookのaddonを一部紹介 #JavaScript

Storybookとは

ReactやReact-Native, Vue等のComponentをRenderしてテストできるツールだよ

addonとは

Storybookに追加できる拡張機能だよ
Storybook addon公式ドキュメント

ここでは追加できるaddonの一部とその設定方法を紹介するよ

addonの追加

storybookのconfigが含まれているディレクトリにaddon.jsを追加する。
その中にimport @storybook/[addon名]/registerを追加する。
その後、config.jsで各addonに定められた設定を行う。

addon.js

import '@storybook/addon-viewport/register'
import '@storybook/addon-options/register'
import '@storybook/addon-actions/register'
import '@storybook/addon-knobs/register'

`@storybook/addon-viewport`

ChromeDevToolsの様にViewportの設定ができるよ

** 追記 Storybook 5 になって若干書き方が変わりました。

Storybook 4 から前のバージョン

config.js

import { configureViewport } from '@storybook/addon-viewport'
configureViewport({  
  defaultViewport: 'iphone6p',
})

Storybook 5以降

config.js

import { addParameters } from '@storybook/react'
addParameters({
  viewport: {
    defaultViewport: 'iphone6p',
  }
})

`@storybook/addon-options`

Addonの設定ができるよ
Addonパネルを画面の右側に置く設定などが行えるよ（デフォルトでは下にある。操作しづらい)

config.js

import { addDecorator } from '@storybook/react'
import { withOptions } from '@storybook/addon-options'

addDecorator(
  withOptions({
    addonPanelInRight: true,
  }),
)

`@storybook/addon-actions`

onPress等のeventのシミュレートができるよ

button.story.js

import { storiesOf, addDecorator } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import { Button } from '../components' // 架空のComponent

storiesOf('Elements', module)
  .addDecorator(withKnobs)
  .add('Button', () => (
    <Button
      onPress={action('onPressAction')}
    />
  ))

`@storybook/addon-knobs`

storybookの画面上でprops等の編集ができるよ
optionsでescapeHTML:falseにすると ', &などの記号がそのまま表示される様になるよ（デフォルトだとhtml entityになってしまう)

config.js

import { addDecorator } from '@storybook/react'
import { withKnobs } from '@storybook/addon-knobs'

addDecorator(
  withKnobs({
    escapeHTML: false,
  }),
)

button.story.js

import { storiesOf, addDecorator } from '@storybook/react'
import {withKnobs, text} from '@storybook/addon-knobs'
import { Button } from '../components' // 架空のComponent

storiesOf('Elements', module)
  .addDecorator(withKnobs)
  .add('Button', () => (
    <Button
      label={text('label', 'Button')}
      onPress={action('onPressAction')}
    />
  ))