前端自動化測試Vue中TDD和單元測試示例詳解

更新時(shí)間：2023年02月14日 10:30:37 作者：云牧

這篇文章主要為大家介紹了前端自動化測試Vue中TDD和單元測試示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1、簡單用例入門

Vue 提供了 @vue/test-utils 來幫助我們進(jìn)行單元測試，創(chuàng)建 Vue 項(xiàng)目的時(shí)候勾選測試選項(xiàng)會自動幫我們安裝

先來介紹兩個(gè)常用的掛載方法：

mount：會將組件以及組件包含的子組件都進(jìn)行掛載
shallowMount：淺掛載，只會掛載組件，忽略子組件

再來看一個(gè)簡單的測試用例：

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 會返回一個(gè) wrapper，這個(gè) wrapper 上面會包含很多幫助我們測試的方法，參考：v1.test-utils.vuejs.org/zh/api/wrap…

2、快照測試

測試用例寫法如下：第一次測試會保存 wrapper 的快照，第二次會比較當(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、覆蓋率測試

覆蓋率測試是對測試完全程度的一個(gè)評估，測試覆蓋到的業(yè)務(wù)代碼越多，覆蓋率越高

在 jest.config.js 中我們可以設(shè)置 collectCoverageFrom，來設(shè)置需要進(jìn)行覆蓋率測試的文件

我們可以測試所有的 .vue 文件，忽略 node_modules 下所有文件

要注意，在 Vue 中配置 jest，參考：v1.test-utils.vuejs.org/zh/guides/#…

然后添加一條 script 命令，就能進(jìn)行測試了：

"test:unit": "vue-cli-service test:unit --coverage"

執(zhí)行命令會生成 coverage 文件夾，Icov-report/index.html 里會可視化展示我們的測試覆蓋率

4、結(jié)合 Vuex 進(jìn)行測試

如果我們在組件中引入了 Vuex 狀態(tài)或者使用了相關(guān)方法

在測試用例里，掛載組件的時(shí)候只需要傳入 vuex 的 store 即可

import store from "@/store/index";
const wrapper = mount(HelloWorld, {
  store
});

以上就是前端自動化測試Vue中TDD和單元測試示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue TDD單元測試的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

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