在使用material-ui 作為布局的項(xiàng)目中使用storybook 測試組件
- 安裝create-react-app
npx create-react-app my-app
2.安裝 material-ui相關(guān)庫類
yarn add material-ui/core material-ui/icons
3.安裝storybook
facebook 官方指南 里面有詳細(xì)介紹，反正我寫的也是不對的彪杉。
以上便配置好了相關(guān)環(huán)境叭首，但是由于material-ui組件會(huì)使用withstyles 封裝組件，而storybook原生必須要使用addDecorator給組件添加修飾器刑枝，顯然這里面有很多值得研究的地方，而我并沒有那么多時(shí)間去研究，所以直接google了一下凡恍，解決方法是安裝相關(guān)插件： storybook-addon-material-ui山林。
yarn add storybook-addon-material-ui // 一步到位
使用方法：
/// Login.stories.js
import React from 'react'
import {storiesOf, addDecorator} from '@storybook/react';
import {muiTheme} from 'storybook-addon-material-ui';
import Login from './index.js';
storiesOf("Login", module)
.addDecorator(muiTheme())
.add("Login Component Test", () => (
<Login />
))
實(shí)際上storybook可以添加一個(gè)插件房待，而我們偉大的一線開發(fā)者已經(jīng)為我們寫好相應(yīng)的插件，直接使用即可驼抹。
關(guān)于SPA 開發(fā)流程：
- 組件分離開發(fā)桑孩。
- 組件分離測試。
- 組件組合頁面框冀。
- 組件頁面測試流椒。
- redux內(nèi)容編寫。
- fake datas 編寫明也。
- routers 編寫宣虾。
- 測試。
