Vue CLI拥有开箱即用的通过Jest或Mocha进行单元测试的内置选项。还有官方的Vue Test Utils提供更多详细的指引和自定义设置。
为什么要手动搭建环境：由于Vue项目是团队基于webpack4搭建的，而非基于vueCli搭建，所以需要手动集成vue的单元测试到现有Vue项目中。
现有brick项目的基本环境：
1.webpack4，
2.vue：2.5.2 ;
3.vue-template-compiler:2.5.2(和vue版本对应);
4.babel/cli:^7.2.3
下面开始搭建环境
开始
1.首先我们用vuecli新建一个包含单元测试的项目
看下package.json的内容：
{
"name": "unitt",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-unit-mocha": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"@vue/test-utils": "1.0.0-beta.29",
"chai": "^4.1.2",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"vue-template-compiler": "^2.6.10"
}
}
安装用yarn或者npm install ；接着跑下项目npm run serve；浏览器打开：http://localhost:8080/#/
这样项目就算跑成功了，
接下来看下单元测试的；
执行：npm run test:unit;输出如下；
说明单元测试成功；
2：集成到现有brick项目
1、观察demo的package.json发现里面的scripts用到vue-cli-service；看devDependencies里面包含： "@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-unit-mocha": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"@vue/test-utils": "1.0.0-beta.29",
"chai": "^4.1.2",
"core-js": "^2.6.5",
2、把这些复制到现有brick项目的dependencies里面，重新安装brick项目的包。
3、把 "test": "vue-cli-service test:unit",复制到brick项目的scripts里面；
4、把demo项目的src复制到brick，并且重命名为src2；
5、把demo项目的tests文件夹复制到brick。
6、执行test；发现报错提示：说当前vue版本太低不得低于2.5.18，于是升级到对应的vue版本，并且记得升级对应的vue-template-compiler;
7、再次执行test，就跑成功了。可以看到输出
到此单元测试环境已经集成到brick项目了。
在测试用例里面如何加入elementui框架？
在tests/unit/下面新建一个spec.js；
import Vue from 'vue';
import { shallowMount } from '@vue/test-utils';
import { expect } from 'chai';
import ElementUI from 'element-ui';
import BkTitle from '../../packages/material-component/title.vue';
Vue.use(ElementUI);
这样就可以测试有用到elementUI的组件了。
最后附上mocha的教程：阮1f-测试框架Mocha实例教程
