vue項(xiàng)目中添加單元測(cè)試的方法
從網(wǎng)上找了很多例子關(guān)于單元測(cè)試，都是如何新建項(xiàng)目的時(shí)候的添加單元測(cè)試，用vue-cli中怎么添加，但是我的項(xiàng)目已經(jīng)生成了，不能再一次重新初始化，這時(shí)如何添加單元測(cè)試，這里面遇到了好多坑，寫(xiě)在這里記錄一下心得。
1、用vue-cli生成一個(gè)新的項(xiàng)目，把單元測(cè)試需要的文件直接復(fù)制到你的項(xiàng)目中
vue init webpack vuetest
2、安裝Karma+Mocha模塊，這個(gè)模塊依賴(lài)比較多，我在遇到了坑，解決問(wèn)題半天發(fā)現(xiàn)缺少了某個(gè)模塊，在這里全部列出需要的模塊
3、修改package.json，在scripts里添加啟動(dòng)代碼
"unit": "karma start test/unit/karma.conf.js --single-run",
4、修改test目錄下的index.js文件，這里是我遇到的最大的坑，解決了半天，總是提示.scss文件出錯(cuò)，下面就是解決的辦法。
const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
改為：
const srcContext = require.context('../../src', true, /^\.\/(style$) /)
應(yīng)該是karma為了測(cè)試代碼的覆蓋率，原本加載了除main.js的所有文件，我改為把style去除
5、可以復(fù)制vue-cli生成的項(xiàng)目文件來(lái)測(cè)試，如下圖，并且配置好路由，測(cè)試一下單元測(cè)試模塊是否安裝成功
6、在項(xiàng)目中運(yùn)行下面的命令，啟動(dòng)單元測(cè)試
npm run unit
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- vue 單元測(cè)試初探
- 詳解關(guān)于Vue單元測(cè)試的幾個(gè)坑
- 淺談Vue組件單元測(cè)試究竟測(cè)試什么
- 使用Karma做vue組件單元測(cè)試的實(shí)現(xiàn)
- vue-cli3 karma單元測(cè)試的實(shí)現(xiàn)
- 如何為vue的項(xiàng)目添加單元測(cè)試
- 對(duì) Vue-Router 進(jìn)行單元測(cè)試的方法
- 教你如何編寫(xiě)Vue.js的單元測(cè)試的方法
- 詳解使用jest對(duì)vue項(xiàng)目進(jìn)行單元測(cè)試
- 詳解Vue單元測(cè)試case寫(xiě)法
- vue 單元測(cè)試的推薦插件和使用示例
相關(guān)文章
Vue中computed、methods與watch的區(qū)別總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue中computed、methods與watch區(qū)別的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了基于vue hash模式微信分享#號(hào)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue.js學(xué)習(xí)筆記之v-bind和v-on解析
這篇文章主要介紹了vue.js學(xué)習(xí)筆記之v-bind和v-on解析，v-bind 指令用于響應(yīng)地更新 HTML 特征，v-on 指令用于監(jiān)聽(tīng)DOM事件，文中還給大家提到了v-bind,v-on的縮寫(xiě)，感興趣的朋友參考下吧2018-05-05
面試官問(wèn)你Vue2的響應(yīng)式原理該如何回答?
可能很多小伙伴之前都了解過(guò)?Vue2實(shí)現(xiàn)響應(yīng)式的核心是利用了ES5的Object.defineProperty?但是面對(duì)面試官時(shí)如果只知道一些模糊的概念。只有深入底層了解響應(yīng)式的原理，才能在關(guān)鍵時(shí)刻對(duì)答如流,本文就來(lái)和大家詳細(xì)聊聊，感興趣的可以收藏一下2022-12-12
Vue3中reactive與ref函數(shù)使用場(chǎng)景
這篇文章主要為大家介紹了Vue3?中有場(chǎng)景是?reactive?能做而?ref?做不了的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue中JS動(dòng)畫(huà)與Velocity.js的結(jié)合使用
這篇文章主要介紹了Vue中JS動(dòng)畫(huà)與Velocity.js的結(jié)合使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
Vue實(shí)現(xiàn)自動(dòng)檢測(cè)以及版本的更新
當(dāng)用戶(hù)在當(dāng)前站點(diǎn)停留時(shí)間比較長(zhǎng)，中途站點(diǎn)進(jìn)行升級(jí)更新之后，用戶(hù)如果不刷新頁(yè)面就任然停留在舊的頁(yè)面里，如何讓用戶(hù)收到一個(gè)提示，引導(dǎo)用戶(hù)進(jìn)行更新操作呢？下面給大家介紹如何站點(diǎn)更新如何在生產(chǎn)環(huán)境提示用戶(hù)更新，進(jìn)行頁(yè)面刷新操作，核心原理其實(shí)很簡(jiǎn)單2023-03-03
element-ui表格數(shù)據(jù)轉(zhuǎn)換的示例代碼
這篇文章主要介紹了element-ui表格數(shù)據(jù)轉(zhuǎn)換的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
在Vue應(yīng)用中,將頁(yè)面導(dǎo)出為PDF文件通常涉及到前端技術(shù)的組合,下面這篇文章主要給大家介紹了關(guān)于vue2前端導(dǎo)出pdf文件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Element-UI el-calendar樣式如何修改日歷
這篇文章主要介紹了Element-UI el-calendar樣式如何修改日歷問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08