使用karma+mocha+webpack3建構vue2單元測試環境步驟詳解

這次帶給大家使用karma mocha webpack3搭建vue2單元測試環境步驟詳解，使用karma mocha webpack3搭建vue2單元測試環境的注意事項有哪些，以下就是實戰案例，一起來看一下。

從網路上找了很多例子關於單元測試，都是如何新建專案的時候的新增單元測試，用vue-cli中怎麼添加，但是我的專案已經產生了，不能再一次重新初始化，這時如何添加單元測試，這裡面遇到了很多坑，寫在這裡記錄心得。

1、用vue-cli產生一個新的項目，把單元測試所需的檔案直接複製到你的專案中

vue init webpack vuetest

檔案下載地址原始碼Github連結

2、安裝Karma Mocha模組，這個模組依賴比較多，我在遇到了坑，解決問題半天發現缺少了某個模組，在這裡全部列出需要的模組

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 單元測試實例。最後奉上原始碼

深入研究參考文件

Vue.js學習系列六－Vue單元測試Karma Mocha學習筆記

karma webpack搭建vue單元測試環境

karma mocha webpack3 建構vue2 單元測試環境

#作者相關Vue文章

基於Vue2.0實作後台系統權限控制

[vue2. 0-基於elementui換膚[自訂主題]](https://juejin.im/post/5aea98...

Vue國際化處理vue-i18n 以及專案自動切換中英文

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！實作選取li高亮步驟詳解

#前端中排序演算法實例詳解

以上是使用karma+mocha+webpack3建構vue2單元測試環境步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！