vue2單元測試環(huán)境搭建
從網(wǎng)上找了很多例子關(guān)于單元測試，都是如何新建項(xiàng)目的時(shí)候的添加單元測試，用vue-cli中怎么添加，但是我的項(xiàng)目已經(jīng)生成了，不能再一次重新初始化，這時(shí)如何添加單元測試，這里面遇到了好多坑，寫在這里記錄一下心得。
1、用vue-cli生成一個(gè)新的項(xiàng)目，把單元測試需要的文件直接復(fù)制到你的項(xiàng)目中
vue init webpack vuetest
文件下載地址 源代碼Github鏈接
2、安裝Karma+Mocha模塊，這個(gè)模塊依賴比較多，我在遇到了坑，解決問題半天發(fā)現(xiàn)缺少了某個(gè)模塊，在這里全部列出需要的模塊
npm i -D karma karma-webpack phantomjs-prebuilt karma-phantomjs-launcher karma-phantomjs-shim karma-chrome-launcher karma-sourcemap-loader mocha karma-mocha sinon chai sinon-chai karma-sinon-chai karma-spec-reporter karma-coverage istanbul-instrumenter-loader
3、修改package.json，在scripts里添加啟動代碼(如果有unit就替換掉)
"unit": "karma start test/unit/karma.conf.js --single-run",
4、修改test目錄下的index.js文件，這里是我遇到的最大的坑，解決了半天，總是提示.scss文件出錯，下面就是解決的辦法。
const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
改為：
const srcContext = require.context('../../src', true, /^\.\/(style$) /)
5、可以復(fù)制vue-cli生成的項(xiàng)目文件來測試，如下圖，并且配置好路由，測試一下單元測試模塊是否安裝成功
6、在項(xiàng)目中運(yùn)行下面的命令，啟動單元測試
npm run unit
同時(shí)在 test/unit/coverage 生成測試報(bào)告。以上就是一個(gè)簡單的 vue 單元測試實(shí)例。最后奉上源代碼https://github.com/mgbq/vue-permission
相關(guān)文章
詳解vue-cli快速構(gòu)建vue應(yīng)用并實(shí)現(xiàn)webpack打包
這篇文章主要介紹了詳解vue-cli快速構(gòu)建vue應(yīng)用并實(shí)現(xiàn)webpack打包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了vue-i18n實(shí)現(xiàn)中英文切換的方法，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
Vue創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的實(shí)例詳解
這篇文章主要介紹了Vue創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的實(shí)例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
關(guān)于vue組件的更新機(jī)制?resize()?callResize()
這篇文章主要介紹了關(guān)于vue組件的更新機(jī)制?resize()?callResize()，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
記一次用ts+vuecli4重構(gòu)項(xiàng)目的實(shí)現(xiàn)
這篇文章主要介紹了記一次用ts+vuecli4重構(gòu)項(xiàng)目的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖形驗(yàn)證碼登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了vue3.0-props、computed、自定義事件方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue開發(fā)模式是一種基于Vue.js框架的開發(fā)方式,它可以幫助開發(fā)者更高效地構(gòu)建和維護(hù)復(fù)雜的Web應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于vue關(guān)閉開發(fā)模式提示的簡單解決辦法,需要的朋友可以參考下2024-04-04
vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作
這篇文章主要介紹了vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue使用echarts詞云圖的實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于vue使用echarts詞云圖的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05