前言

最近發(fā)現(xiàn)一個問題，vue-cli 提供的官方模板確實好用。但一直用下來手賤毛病又犯了，像穿了別人的內(nèi)衣，總感覺不舒服。

所以有機(jī)會就瞎倒騰了一遍，總算把各個流程摸了一把。這里分享一下配置帶覆蓋率的單元測試。分享出來供大家參考學(xué)習(xí)，話不多少了，來一起看看詳細(xì)的介紹：

一、文件結(jié)構(gòu)

基本的文件結(jié)構(gòu)。

├─src│ ├─assets│ ├─components│ ├─app.vue│ └─main.js├─test│ └─unit│  ├─coverage│  ├─specs│  ├─index.js│  └─karma.conf.js├─.babelirc├─webpack.conf.js└─package.json

二、依賴

根據(jù)需要增刪

yarn add -D /cross-env /# webpackwebpack /webpack-merge /vue-loader /# babelbabel-core /babel-loader /babel-plugin-transform-runtime /babel-preset-es2015 /babel-register /babel-plugin-istanbul /# karmakarma /karma-coverage /karma-phantomjs-launcher /karma-sourcemap-loader /karma-spec-reporter /karma-webpack /mocha /karma-mocha /sinon-chai /karma-sinon-chai /chai /sinon /

三、入口

先從 package.json 開始。跟官方的一致。設(shè)置 BABEL_ENV 可以在測試的時候才讓 Babel 引入 istanbul 計算覆蓋率。

{ "scripts": { "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", "test": "npm run unit", }}

四、配置 Babel

在 .babelirc 中：

{ "presets": ["es2015"], "plugins": ["transform-runtime"], "comments": false, "env": { "test": {  "plugins": [ "istanbul" ] } }}

按需設(shè)置，寫 Chrome Extension 的話用 es2016 就行。

Babel 的 istanbul 插件是個很聰明的做法。

五、Loader 配置

從 Vue Loader 的文檔可以看到，不需要額外配置，它非常貼心自動識別 Babel Loader。

如果還測試 js 文件那么給源文件夾下的 js 文件配置 Babel Loader 就行。

以 src 為例：

{ module: { rules: [  {  test: //.vue$/,  loader: 'vue-loader'  },  {  test: //.js$/,  loader: 'babel-loader',  include: [   path.resolve(__dirname, '../src')  ],  exclude: /node_modules/  } ] }}

六、Karma 配置

為 webpack 設(shè)置環(huán)境

// karma.conf.jsconst merge = require('webpack-merge')let webpackConfig = merge(require('../../webpack.conf'), { devtool: '#inline-source-map', plugins: [ new webpack.DefinePlugin({  'process.env': '"testing"' }) ]})// no need for app entry during testsdelete webpackConfig.entry

接著輸出 karma 配置，基本沿用官方的配置。注意不同的瀏覽器需要安裝不同的 karma 插件。

// karma.conf.jsmodule.exports = function (config) { config.set({ // to run in additional browsers: // 1. install corresponding karma launcher // http://karma-runner.github.io/0.13/config/browsers.html // 2. add it to the `browsers` array below. browsers: ['Chrome'], frameworks: ['mocha', 'sinon-chai'], reporters: ['spec', 'coverage'], files: ['./index.js'], preprocessors: {  './index.js': ['webpack', 'sourcemap'] }, webpack: webpackConfig, webpackMiddleware: {  noInfo: true }, coverageReporter: {  dir: './coverage',  reporters: [  { type: 'lcov', subdir: '.' },  { type: 'text-summary' }  ] } })}