react-storybook 简单入门

发表于   |  

React Storybook

官方说法

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

通俗的说

Storybook 为UI组件开发提供了一个开发环境，你可以改变组件不同状态、不同交互，通过可视化的界面来查看组件的形态。说白了就是一个通过可视化的界面来写测试。


Demo

顾虑

在引入一个新库之前你可能最担心的是这玩意儿会不会对你现有的代码产生影响，storybook也考虑到你的顾虑，你可以放心地使用，因为它完全独立与你的组件库

├── .storybook
│ ├── config.js
│ └── webpack.config.js
├── stories
│ ├── your_first_story.js
│ └── index.js
├── src
│ ├── component
│ ├──—- component.js
│ └──—- index.js

使用方法

1、全局安装storybook cli命令行工具

npm i -g @storybook/cli

2、进入到你需要创建storybook的项目中去，执行

getstorybook

3、执行完上面命令后会在你的项目中生成 .storybook 和 stories 2个文件夹，并在 package.json 的scripts中生成 

1
2
3
"test:unit:watch": "cross-env NODE_ENV=test babel-node test/watch.js unit",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"

3个命令，然后执行

npm run storybook

就会在启动一个端口为6006的服务，然后在浏览器中打开就可以看到默认的界面了。

写故事

接下来的工作就是编写你的story！

先来看stories目录下官方给的示例代码 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/** stories/index.js **/  
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import { Button, Welcome } from '@storybook/react/demo';
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
storiesOf('Button', module)
  .add('with text', () => <Button onClick={action('clicked')}>Hello Button<\/Button>)
  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);

配置

在编写好了 Story 之后需要告诉 Storybook 应该如何加载，需要进行一些简单的配置，只要添加如下类似的内容到·.storybook/config.js 中 

1
2
3
4
5
6
7
8
import { configure } from '@storybook/react';
import React from 'react';
function loadStories() {
  require('../stories');
}
configure(loadStories, module);

addDecorator

在使用material-ui的时候所有的组件都必须给定 theme context ,我们不可能在每一个测试组件中都不给它外面套一层定义 context 的父组件,所以 stroybook 提供了一个 addDecorator 的方法，可以将 MuiThemeProvider作用于测试组件之上,配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { configure, addDecorator } from '@storybook/react';
import React from 'react';
// 使用 material-ui 需配置
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
addDecorator((getStory) => (
    <MuiThemeProvider muiTheme={getMuiTheme()}>
        {getStory()}
    </MuiThemeProvider>
))
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
function loadStories() {
  require('../stories');
  require('../stories/datepicker_single');
}
configure(loadStories, module);

你还可以在其中配置redux等来管理状态

参考

官方github地址
React Conf 2017 Thuret 分享视频