前端自動(dòng)化測(cè)試Vue中TDD和單元測(cè)試示例詳解
1、簡(jiǎn)單用例入門(mén)
Vue 提供了 @vue/test-utils 來(lái)幫助我們進(jìn)行單元測(cè)試，創(chuàng)建 Vue 項(xiàng)目的時(shí)候勾選測(cè)試選項(xiàng)會(huì)自動(dòng)幫我們安裝
先來(lái)介紹兩個(gè)常用的掛載方法：
mount：會(huì)將組件以及組件包含的子組件都進(jìn)行掛載shallowMount：淺掛載，只會(huì)掛載組件，忽略子組件
再來(lái)看一個(gè)簡(jiǎn)單的測(cè)試用例：
import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";
describe("HelloWorld.vue", () => {
it("renders props.msg when passed", () => {
const msg = "new message";
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
});
expect(wrapper.props("msg")).toBe(msg);
});
});
shallowMount 會(huì)返回一個(gè) wrapper，這個(gè) wrapper 上面會(huì)包含很多幫助我們測(cè)試的方法，參考：v1.test-utils.vuejs.org/zh/api/wrap…
2、快照測(cè)試
測(cè)試用例寫(xiě)法如下： 第一次測(cè)試會(huì)保存 wrapper 的快照，第二次會(huì)比較當(dāng)前 wrapper 和快照的區(qū)別
describe("HelloWorld.vue", () => {
it("renders props.msg when passed", () => {
const msg = "new message";
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
});
expect(wrapper).toMatchSnapshot();
});
});
3、覆蓋率測(cè)試
覆蓋率測(cè)試是對(duì)測(cè)試完全程度的一個(gè)評(píng)估，測(cè)試覆蓋到的業(yè)務(wù)代碼越多，覆蓋率越高
在 jest.config.js 中我們可以設(shè)置 collectCoverageFrom，來(lái)設(shè)置需要進(jìn)行覆蓋率測(cè)試的文件
我們可以測(cè)試所有的 .vue 文件，忽略 node_modules 下所有文件
要注意，在 Vue 中配置 jest，參考：v1.test-utils.vuejs.org/zh/guides/#…
然后添加一條 script 命令，就能進(jìn)行測(cè)試了：
"test:unit": "vue-cli-service test:unit --coverage"
執(zhí)行命令會(huì)生成 coverage 文件夾，Icov-report/index.html 里會(huì)可視化展示我們的測(cè)試覆蓋率
4、結(jié)合 Vuex 進(jìn)行測(cè)試
如果我們?cè)诮M件中引入了 Vuex 狀態(tài)或者使用了相關(guān)方法
在測(cè)試用例里，掛載組件的時(shí)候只需要傳入 vuex 的 store 即可
import store from "@/store/index";
const wrapper = mount(HelloWorld, {
store
});以上就是前端自動(dòng)化測(cè)試Vue中TDD和單元測(cè)試示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue TDD單元測(cè)試的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
- vue前端測(cè)試開(kāi)發(fā)watch監(jiān)聽(tīng)data的數(shù)據(jù)變化
- springboot?vue測(cè)試平臺(tái)開(kāi)發(fā)調(diào)通前后端環(huán)境實(shí)現(xiàn)登錄
- springboot?vue測(cè)試前端項(xiàng)目管理列表分頁(yè)功能實(shí)現(xiàn)
- springboot?vue測(cè)試平臺(tái)前端項(xiàng)目查詢新增功能
- springboot?vue接口測(cè)試HutoolUtil?TreeUtil處理樹(shù)形結(jié)構(gòu)
- springboot?vue接口測(cè)試前后端樹(shù)節(jié)點(diǎn)編輯刪除功能
- springboot?vue接口測(cè)試前端動(dòng)態(tài)增刪表單功能實(shí)現(xiàn)
相關(guān)文章
這篇文章主要為大家介紹了Vue完整版和runtime版的區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了Vue自定義toast組件的相關(guān)資料,需要的朋友可以參考下2018-08-08
Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法
我們經(jīng)常需要接入統(tǒng)計(jì)服務(wù)以方便運(yùn)營(yíng)，這篇文章主要介紹了Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
這篇文章主要介紹了7個(gè)實(shí)用的Vue開(kāi)發(fā)技巧文。中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，下面我們來(lái)一起學(xué)習(xí)一下吧2019-05-05
本篇文章主要介紹了vue使用Axios做ajax請(qǐng)求詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
vue中使用v-if隱藏元素時(shí)會(huì)出現(xiàn)閃爍問(wèn)題的解決
這篇文章主要介紹了vue中使用v-if隱藏元素時(shí)會(huì)出現(xiàn)閃爍問(wèn)題的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue+SpringBoot開(kāi)發(fā)V部落博客管理平臺(tái)
V部落是一個(gè)多用戶博客管理平臺(tái)。這篇文章主要介紹了Vue+SpringBoot開(kāi)發(fā)V部落博客管理平臺(tái),需要的朋友可以參考下2017-12-12
本篇文章主要介紹了如何理解Vue的作用域插槽的實(shí)現(xiàn)原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Vue3在css中使用v-bind綁定js/ts變量(在scss和less中使用方式)
v-bind是Vue.js中的一個(gè)核心指令,用于在Vue組件或DOM元素上綁定數(shù)據(jù)屬性,下面這篇文章主要給大家介紹了關(guān)于Vue3在css中使用v-bind綁定js/ts變量的相關(guān)資料,也可以在scss和less中使用方式,需要的朋友可以參考下2024-04-04
Vue3中el-table表格數(shù)據(jù)不顯示的原因和解決方法
這篇文章主要給大家介紹了Vue3中el-table表格數(shù)據(jù)不顯示的原因和解決方法,文中有詳細(xì)的代碼示例供大家參考,如果有遇到相同問(wèn)題的朋友可以參考閱讀本文,希望能夠幫到您2023-11-11