關(guān)于Vue Webpack2單元測(cè)試示例詳解
前言
最近發(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
二、依賴
根據(jù)需要增刪
yarn add -D \ cross-env \ # webpack webpack \ webpack-merge \ vue-loader \ # babel babel-core \ babel-loader \ babel-plugin-transform-runtime \ babel-preset-es2015 \ babel-register \ babel-plugin-istanbul \ # karma karma \ 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.js
const 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 tests
delete webpackConfig.entry
接著輸出 karma 配置，基本沿用官方的配置。注意不同的瀏覽器需要安裝不同的 karma 插件。
// karma.conf.js
module.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ì)腳本之家的支持。
相關(guān)文章
詳解vue中父子組件傳遞參數(shù)props的實(shí)現(xiàn)方式
這篇文章主要給大家介紹了在vue中，父子組件傳遞參數(shù)?props?實(shí)現(xiàn)方式，文章通過(guò)代碼示例介紹的非常詳細(xì)，對(duì)我們的學(xué)習(xí)或工作有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
在本篇文章里小編給大家整理的是一篇關(guān)于Vue中的常用指令及用法總結(jié)內(nèi)容，對(duì)此有興趣的朋友們可以跟著學(xué)習(xí)下。2022-01-01
Vue3+TypeScript實(shí)現(xiàn)二維碼生成組件
在?Web?應(yīng)用中,生成二維碼是常見(jiàn)的需求,本文介紹如何用?Vue3?和?TypeScript?開(kāi)發(fā)一個(gè)二維碼生成組件,支持生成圖片或?canvas?形式的二維碼,并提供豐富的配置選項(xiàng),感興趣的小伙伴跟著小編一起來(lái)看看吧2024-04-04
vue.js el-tooltip根據(jù)文字長(zhǎng)度控制是否提示toolTip問(wèn)題
這篇文章主要介紹了vue.js el-tooltip根據(jù)文字長(zhǎng)度控制是否提示toolTip問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
element-ui 表格數(shù)據(jù)時(shí)間格式化的方法
這篇文章主要介紹了element-ui 表格數(shù)據(jù)時(shí)間格式化的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue給對(duì)象添加屬性沒(méi)有響應(yīng)式的問(wèn)題及解決
這篇文章主要介紹了vue給對(duì)象添加屬性沒(méi)有響應(yīng)式的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要給大家介紹了關(guān)于vue中正確使用jsx的相關(guān)資料,JSX就是Javascript和XML結(jié)合的一種格式,React發(fā)明了JSX,利用HTML語(yǔ)法來(lái)創(chuàng)建虛擬DOM,當(dāng)遇到<,JSX就當(dāng)HTML解析,遇到{就當(dāng)JavaScript解析,需要的朋友可以參考下2021-07-07
vue中的data,computed,methods,created,mounted用法及說(shuō)明
這篇文章主要介紹了vue中的data,computed,methods,created,mounted用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
詳解如何使用router-link對(duì)象方式傳遞參數(shù)？
這篇文章主要介紹了如何使用router-link對(duì)象方式傳遞參數(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家介紹了使用Vite處理css?less及postcss的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07