Vue UI测试框架storybook

展开全文

storybook是什么？

react开发者可能对这个比较熟悉了，即使用storybook的方式创建react组件，并且立即可测.这使组件的性能以及可用性得到了测试保障。
而对于vue开发者，传统的开发方式是 (前端开发/后端开发)–联调–测试。
其中测试包括了白盒测试、黑盒测试。其中黑盒测试常常就是测试功能的可能性，效率比较低下，且组件可扩展性通常无法保障，一旦有一些功能性改动，可能就涉及了源码修改，俗称迭代。
storybook可能在一定程度上避免这里，让组件更加组件化。

这里写图片描述

storybook for vue 使用方法

step1. 安装所需依赖包

npm i --save-dev @storybook/vue
npm i --save vue
npm i --save-dev babel-core

step2. package.json添加启动参数

{
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook"
  }
}

step3. 创建配置文件 XXX-project-Root/.storybook/config.js （注意配置文件名称固定）

import { configure } from '@storybook/vue'
const req = require.context('../src/stories', true, /.stories.js$/);
function loadStories() {
  req.keys().forEach((filename) => req(filename));
}
configure(loadStories, module)

step4. 开始创建自己的storybook组件并且引入，文件位置位于 XXX-project-Root/src/stories/index.stories.js

/* eslint-disable react/react-in-jsx-scope */

import { storiesOf } from '@storybook/vue';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import routes from '../router';
import store from '../vuex/store';

// 第一步，引入组件
import MyButton from './MyButton.vue';
import Welcome from './Welcome.vue';

Vue.use(VueRouter);
Vue.use(Vuex);
const router = new VueRouter({
  mode: 'hash',
  routes
});
new Vue({
  router,
  store
})

// 第二步，注册组件.
const install = function(config = {}) {
  if (install.installed) return;

  Vue.component(Header.name, Header);

  // Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;
  // Vue.$toast = Vue.prototype.$toast = Toast;
  // Vue.$indicator = Vue.prototype.$indicator = Indicator;
};
if (typeof window !== 'undefined') {
  install();
};

/* eslint-enable react/react-in-jsx-scope */
// 示例组件
storiesOf('Welcome', module).add('to Storybook', () => ({
  components: { Welcome },
  template: '<welcome :showApp="action" />',
  methods: { action: linkTo('Button') }
}));

// 自定义组件
  storiesOf('Header ', module).add('Vue common components', () => ({
    components: { Header },
    render() {
      return <ta-header title="测试标题" back fixed />;
    },
    methods: { action: linkTo('home') }
  }));

启动storybook后，vue组件使用别名@方式引入，报错无法被解析

解决办法: 新增一个配置文件 XXX-project-Root/.storybook/webpack.config.js

const path = require('path');

// load the default config generator.
const genDefaultConfig = require('@storybook/vue/dist/server/config/defaults/webpack.config.js');

module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env);

  // Extend it as you need.
  function resolve(dir) {
    return path.join(__dirname, '..', dir);
  }

  config.resolve = {
    extensions: ['.js', '.vue', '.json','.jsx'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  };

  return config;
};