React實戰-基於Storybook的React組件測試
ReactJs的測試方法和測試工具很多，主要有Jtest、Karma,但是有一些小的第三方工具也很簡單、方便，其中StoryBook這款小工具很適合在頁面UI直觀的展示控件的允許效果，設置不同的運行場景。簡單幾步就能在網友上展示你的測試場景（微信：react-javascript）。
1.將storybook加入項目中
執行npm i --save @kadira/storybook,並在項目的配置文件中加入：
"scripts": {
"storybook": "start-storybook -p 9001 -c .storybook"
}
2.創建storybook的配置文件
storybook可以有多種不同的配置方式，但是還是採用它推薦的吧。一般單獨創建.storybook的目錄，創建config.js。
在配置文件中加載測試的場景文件，或者說是sotries文件。
import { configure } from '@kadira/storybook';
function loadStories() {
require('../stories/index.js');
// You can require as many stories as you need.
}
configure(loadStories, module);
3.編寫自己的測試場景
storybook提供了簡單的編寫測試場景的方式。如下：
storiesOf('Button', module)
.add('with text', () => (
<button onClick={action('clicked')}>Hello Button</button>
))
4.運行
允許場景也很簡單：npm run storybook。即可看到運行效果。
5 Demo
a.被測組件
export default class Hello extends Component{
render(){
return (
<input value={this.props.name}> </input>
);
}
}
b.測試場景
storiesOf('Hello', module)
.add('Hello', () => (
<Hello name='Hello'></Hello>
))
.add('Fuck', () => (
<Hello name='Fuck'></Hello>
));
c.運行效果
