前言
最近發(fā)現(xiàn)一個(gè)問(wèn)題，vue-cli 提供的官方模板確實(shí)好用。但一直用下來(lái)手賤毛病又犯了，像穿了別人的內(nèi)衣，總感覺(jué)不舒服。
所以有機(jī)會(huì)就瞎倒騰了一遍，總算把各個(gè)流程摸了一把。這里分享一下配置帶覆蓋率的單元測(cè)試。分享出來(lái)供大家參考學(xué)習(xí)，話不多少了，來(lái)一起看看詳細(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
二、依賴(lài)
根據(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 開(kāi)始。跟官方的一致。設(shè)置 BABEL_ENV 可以在測(cè)試的時(shí)候才讓 Babel 引入 istanbul 計(jì)算覆蓋率。
{ "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è)置，寫(xiě) Chrome Extension 的話用 es2016 就行。
Babel 的 istanbul 插件是個(gè)很聰明的做法。
五、Loader 配置
從 Vue Loader 的文檔可以看到，不需要額外配置，它非常貼心自動(dòng)識(shí)別 Babel Loader。
如果還測(cè)試 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' } ] } })}七、引入所有組件
在 test/unit/index.js 里，這是官方的配置：
// require all test files (files that ends with .spec.js)const testsContext = require.context('./specs', true, //.spec$/)testsContext.keys().forEach(testsContext)// require all src files except main.js for coverage.// you can also change this to match only the subset of files that// you want coverage for.const srcContext = require.context('src', true, /^/.//(?!main(/.js)?$)/)srcContext.keys().forEach(srcContext)因?yàn)橹芭渲?loader 時(shí) src 文件夾下的 js 才會(huì)被收集計(jì)算覆蓋率，所以可以放心 require 。
第二段 require 是為了所有源碼一起算覆蓋率。可以看到官方配置只排除了 src 目錄里的 main.js，如果是多入口可以用 /^(?!.*//main(/.js)?$)/i 排除所有的 main.js 文件。
八、開(kāi)始測(cè)試
這基本上就是所有的配置了。其它的設(shè)置應(yīng)該都是圍繞插件本身，就不贅述。
九、Babeless 配置
如果不需要 Babel 可以用 istanbul-instrumenter-loader 收集覆蓋率。
js 文件的配置同 Babel。
Vue 文件需要在 options.loaders 選項(xiàng)里為 js 補(bǔ)上：
{ test: //.vue$/, loader: 'vue-loader', options: { loaders: { 'js': 'istanbul-instrumenter-loader' } }}總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
