怎么在vue項目中添加一個單元測試功能？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制網(wǎng)站建設(shè)服務(wù),專注于成都定制網(wǎng)站,高端網(wǎng)頁制作,對成都主動防護網(wǎng)等多個行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計,網(wǎng)站優(yōu)化推廣哪家好,專業(yè)成都網(wǎng)站營銷優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

1、用vue-cli生成一個新的項目，把單元測試需要的文件直接復(fù)制到你的項目中

vue init webpack vuetest

2、安裝Karma+Mocha模塊，這個模塊依賴比較多，我在遇到了坑，解決問題半天發(fā)現(xiàn)缺少了某個模塊，在這里全部列出需要的模塊

復(fù)制代碼 代碼如下:

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

3、修改package.json，在scripts里添加啟動代碼

 "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$) /)

應(yīng)該是karma為了測試代碼的覆蓋率，原本加載了除main.js的所有文件，我改為把style去除

5、可以復(fù)制vue-cli生成的項目文件來測試，如下圖，并且配置好路由，測試一下單元測試模塊是否安裝成功

6、在項目中運行下面的命令，啟動單元測試

npm run unit

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

標題名稱：怎么在vue項目中添加一個單元測試功能-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://weahome.cn/article/eiipd.html