目前hips采用的單測組合是jest + Vue-Test-Utils，前端單元測試聪全，就是要在項目里加上這兩個配置。
采用 jest + Vue Test Utils進行單元測試的原因
1.Jest是 Facebook的一套開源的 JavaScript 測試框架辅辩， 它自動集成了斷言难礼、JSDom、覆蓋率報告等開發(fā)者所需要的所有測試工具玫锋，配置較少蛾茉，對vue框架友好。
2.Vue Test Utils 是 Vue.js 官方的單元測試實用工具庫撩鹿，為jest和vue提供了一個橋梁谦炬，暴露出一些接口，讓我們更加方便的通過Jest為Vue應(yīng)用編寫單元測試节沦。
3.vue-cli 默認的單元測試也是使用的這套方案
現(xiàn)在我們分幾種情況來考慮一下：
- 基于
vue-cli3創(chuàng)建項目
首先是全局安裝vue-cli键思，現(xiàn)在已經(jīng)是最新4.x，如果安裝3.x可以 npm install -g @vue/cli@3.x
npm install -g @vue/cli
# OR
yarn global add @vue/cli
接著我們可以使用vue-cli去創(chuàng)建一個vue項目了
vue create test-demo
命令輸入之后 我們有default和Manually select features兩個選項甫贯，default是默認吼鳞，回車之后就整個配置好，Manually select features是手動選擇那些配置要加入到項目中叫搁，我們選Manually select features這個選項赔桌。
我們選中unit testing選項（附：選中與取消是按空格鍵盤）一路回車，我們看項目需要渴逻，然后選擇構(gòu)建
test選擇jest疾党，當(dāng)然選擇mocha也可以，一路回車惨奕，通過vue-cli3我們就完成了構(gòu)建一個項目雪位。
進入到項目中，直接使用命令即可進行單測梨撞，單測的代碼寫在tests/unit目錄下雹洗。
- 基于
vue-cli3創(chuàng)建項目（但未引入jest）
有時候我們選擇了default模式一路暢通就建好了項目，或者本身項目是基于海馬匯標(biāo)準(zhǔn)子應(yīng)用工程去構(gòu)建的聋袋，這時候我們想給項目加個單測部分队伟，怎么搞呢？
vue add unit-jest
我們在項目目錄下幽勒，執(zhí)行上面的命令嗜侮，它就會幫我們?nèi)グ惭bjest模塊，緊接著啥容，我們的項目就可以進行單元測試了锈颗。
- 普通vue項目
還有一些老的項目，可能不是基于vue-cli3 去創(chuàng)建的咪惠，本著良心運維的原則击吱，我們也提供如下指導(dǎo)。
jest和 @vue/test-utils 是我們的單測依賴遥昧，vue-jest是一個 預(yù)處理器覆醇，如果不安裝vue-jest朵纷，jest無法處理.vue文件。
npm install --save-dev babel-plugin-transform-vue-jsx jest @vue/test-utils jest-serializer-vue babel-jest vue-jest
# OR
yarn add -S babel-plugin-transform-vue-jsx jest @vue/test-utils jest-serializer-vue babel-jest vue-jest
在`package.json`里加入jest命令命令
//package.json
"scripts": {
"unit": "jest --config test/unit/jest.conf.js --coverage",
}
創(chuàng)建測試目錄永脓，新建測試配置文件
mkdir test/unit
vim jest.conf.js
jest.conf.js 配置如下
const path = require('path');
module.exports = {
rootDir: path.resolve(__dirname, '../../'),
moduleFileExtensions: [
'js',
'json',
'vue',
],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1', // @路徑轉(zhuǎn)換袍辞，例如：@/views/shop/info.vue
},
transform: {
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
'.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
},
testPathIgnorePatterns: [
'<rootDir>/test/e2e',
],
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
setupFiles: ['<rootDir>/test/unit/setup'],
coverageDirectory: '<rootDir>/test/unit/coverage',
collectCoverageFrom: [
'src/**/*.{js,vue}',
'!src/main.js',
'!src/router/departmentalExpenses.js',
'!**/node_modules/**',
],
};
unit目錄下我們再建立一個specs目錄，用于存放我們的測試用例常摧，不建立也可以搅吁。執(zhí)行test命令時，會自動檢查文件后綴為spec.js的文件進行單元測試落午，并生成測試覆蓋數(shù)據(jù)谎懦。
vue項目中引入jest和 Vue-Test-Utils 通常情況就這幾種，后續(xù)有新的方案溃斋，會再補充上來界拦，也歡迎指正。
