Vue CLI擁有開箱即用的通過Jest或Mocha進(jìn)行單元測試的內(nèi)置選項(xiàng)。還有官方的Vue Test Utils提供更多詳細(xì)的指引和自定義設(shè)置。
為什么要手動(dòng)搭建環(huán)境：由于Vue項(xiàng)目是團(tuán)隊(duì)基于webpack4搭建的镜沽，而非基于vueCli搭建魁衙，所以需要手動(dòng)集成vue的單元測試到現(xiàn)有Vue項(xiàng)目中尔许。
現(xiàn)有brick項(xiàng)目的基本環(huán)境：
??? 1.webpack4，
??? 2.vue：2.5.2? ;
??? 3.vue-template-compiler:2.5.2(和vue版本對應(yīng));
??? 4.babel/cli:^7.2.3
下面開始搭建環(huán)境
開始
1.首先我們用vuecli新建一個(gè)包含單元測試的項(xiàng)目
?看下package.json的內(nèi)容：
{
? "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 案狠；接著跑下項(xiàng)目npm run serve服傍；瀏覽器打開：http://localhost:8080/#/
這樣項(xiàng)目就算跑成功了，
接下來看下單元測試的骂铁；
執(zhí)行：npm run test:unit;輸出如下吹零；
說明單元測試成功；
2：集成到現(xiàn)有brick項(xiàng)目
1拉庵、觀察demo的package.json發(fā)現(xiàn)里面的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、把這些復(fù)制到現(xiàn)有brick項(xiàng)目的dependencies里面钞支，重新安裝brick項(xiàng)目的包茫蛹。
3、把 "test": "vue-cli-service test:unit",復(fù)制到brick項(xiàng)目的scripts里面烁挟；
4婴洼、把demo項(xiàng)目的src復(fù)制到brick，并且重命名為src2撼嗓；
5柬采、把demo項(xiàng)目的tests文件夾復(fù)制到brick。
6且警、執(zhí)行test粉捻；發(fā)現(xiàn)報(bào)錯(cuò)提示：說當(dāng)前vue版本太低不得低于2.5.18，于是升級到對應(yīng)的vue版本振湾，并且記得升級對應(yīng)的vue-template-compiler;
7杀迹、再次執(zhí)行test，就跑成功了押搪∈骼遥可以看到輸出
到此單元測試環(huán)境已經(jīng)集成到brick項(xiàng)目了。
在測試用例里面如何加入elementui框架大州？
在tests/unit/下面新建一個(gè)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實(shí)例教程
