vue2單元測試環(huán)境搭建
從網(wǎng)上找了很多例子關(guān)于單元測試，都是如何新建項目的時候的添加單元測試，用vue-cli中怎么添加，但是我的項目已經(jīng)生成了，不能再一次重新初始化，這時如何添加單元測試，這里面遇到了好多坑，寫在這里記錄一下心得。
1、用vue-cli生成一個新的項目，把單元測試需要的文件直接復制到你的項目中
vue init webpack vuetest
文件下載地址 源代碼Github鏈接
2、安裝Karma+Mocha模塊，這個模塊依賴比較多，我在遇到了坑，解決問題半天發(fā)現(xiàn)缺少了某個模塊，在這里全部列出需要的模塊
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、可以復制vue-cli生成的項目文件來測試，如下圖，并且配置好路由，測試一下單元測試模塊是否安裝成功
6、在項目中運行下面的命令，啟動單元測試
npm run unit
同時在 test/unit/coverage 生成測試報告。以上就是一個簡單的 vue 單元測試實例。最后奉上源代碼https://github.com/mgbq/vue-permission
相關(guān)文章
這篇文章主要介紹了vue-router路由模式詳解(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
vue循環(huán)中點擊選中再點擊取消(單選)的實現(xiàn)
這篇文章主要介紹了vue循環(huán)中點擊選中再點擊取消(單選)的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家詳細介紹了Vue計時器的用法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
validate?注冊頁的表單數(shù)據(jù)校驗實現(xiàn)詳解
這篇文章主要為大家介紹了validate?注冊頁的表單數(shù)據(jù)校驗實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
關(guān)于vue-socket.io使用及版本原因消息無法監(jiān)聽bug
這篇文章主要介紹了關(guān)于vue-socket.io使用及版本原因消息無法監(jiān)聽bug，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了寫一個Vue Popup組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
這篇文章主要介紹了詳解Weex基于Vue2.0開發(fā)模板搭建,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要給大家介紹了關(guān)于Vue數(shù)字相加、相減精度丟失處理3種方法的相關(guān)資料,前端在操作加減乘除計算時,經(jīng)常會出現(xiàn)精度缺失問題,有時會顯示為科學計數(shù)的樣式,需要的朋友可以參考下2023-08-08
vue使用better-scroll實現(xiàn)下拉刷新、上拉加載
這篇文章主要為大家詳細介紹了vue使用better-scroll實現(xiàn)下拉刷新、上拉加載，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
vue.js element-ui tree樹形控件改iview的方法
這篇文章主要介紹了vue.js element-ui tree樹形控件改iview的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03