前端自動(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)目查詢(xún)新增功能
- 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)文章
vue3不同語(yǔ)法格式對(duì)比的實(shí)例代碼
vue3發(fā)布已有一段時(shí)間了,文檔也大概看了一下,不過(guò)對(duì)于學(xué)一門(mén)技術(shù),最好的方法還是實(shí)戰(zhàn),這篇文章主要給大家介紹了關(guān)于vue3不同語(yǔ)法格式對(duì)比的相關(guān)資料,需要的朋友可以參考下2021-08-08
這篇文章主要給大家介紹了關(guān)于vue-router懶加載的3種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
vue中實(shí)現(xiàn)子組件相互切換且數(shù)據(jù)不丟失的策略詳解
項(xiàng)目為數(shù)據(jù)報(bào)表,但是一個(gè)父頁(yè)面中有很多的子頁(yè)面,而且子頁(yè)面中不是相互關(guān)聯(lián),但是數(shù)據(jù)又有聯(lián)系,所以本文給大家介紹了vue中如何實(shí)現(xiàn)子組件相互切換,而且數(shù)據(jù)不會(huì)丟失,并有詳細(xì)的代碼供大家參考,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vuex管理狀態(tài)倉(cāng)庫(kù)使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
在Vue項(xiàng)目中可以直接使用localStorage,它支持Vue2和Vue3,在Vue2中,可以通過(guò)`localStorage.setItem()`、`localStorage.getItem()`和`localStorage.removeItem()`來(lái)保存、讀取和刪除數(shù)據(jù),本文給大家介紹vue中的localStorage使用詳解,感興趣的朋友一起看看吧2025-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)可增刪查改的成績(jī)單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
vue router-link下劃線和顏色問(wèn)題及解決
這篇文章主要介紹了vue router-link下劃線和顏色問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue 2.0 偵聽(tīng)器 watch屬性代碼詳解，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
在Vue3中使用BabylonJs開(kāi)發(fā)?3D的初體驗(yàn)
這篇文章主要介紹了在?Vue3?中使用?BabylonJs?開(kāi)發(fā)?3D?是什么體驗(yàn),在本文中，向您展示了如何創(chuàng)建?Vue?組件、Babylon?類(lèi)、在畫(huà)布上渲染場(chǎng)景以及創(chuàng)建?3D?網(wǎng)格，需要的朋友可以參考下2022-07-07
詳解vue-meta如何讓你更優(yōu)雅的管理頭部標(biāo)簽
這篇文章主要介紹了詳解vue-meta如何讓你更優(yōu)雅的管理頭部標(biāo)簽，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01