使用 Jest Vue Test Utils 對(duì) Vue 組件進(jìn)行單元測(cè)試指南
在本教程中，我們將學(xué)習(xí)如何在初學(xué)者級(jí)別將 Jest Vue Test Utils 與 Vue3 一起使用。在我們開(kāi)始之前，這里是基礎(chǔ)知識(shí)。
什么是 Vue 測(cè)試實(shí)用程序？
Vue Test Utils 是 Vue.js 的單元測(cè)試實(shí)用程序庫(kù)，它包含旨在簡(jiǎn)化 Vue 測(cè)試的實(shí)用程序集。js組件。它為我們提供了 vue js 與 vue js 組件交互的輔助方法。
什么是 Vue Jest？
Jest 是 facebook 創(chuàng)建的一個(gè) JavaScript 單元測(cè)試框架，它包括許多功能，如快照測(cè)試、代碼覆蓋率等。
Vue 測(cè)試實(shí)用程序入門(mén)
首先，我們將使用 Vue cli 創(chuàng)建我們的 vue 項(xiàng)目。
vue create <項(xiàng)目名稱(chēng)>
它將提示三個(gè)選項(xiàng)；繼續(xù)并選擇這個(gè)：手動(dòng)選擇功能。
？請(qǐng)選擇一個(gè)預(yù)設(shè)：（使用方向鍵）> 默認(rèn)值（[Vue 3] babel、eslint）
默認(rèn)（[Vue 2] babel、eslint）
手動(dòng)選擇特征
我們將使用空格鍵添加單元測(cè)試功能，之后我們將按回車(chē)鍵。
？請(qǐng)選擇預(yù)設(shè)：手動(dòng)選擇功能？檢查項(xiàng)目所需的功能：（按 <space> 進(jìn)行選擇，按 <a> 切換所有，按 <i> 反轉(zhuǎn)選擇，按 <enter>繼續(xù)）>(*) 巴別塔
( ) 打字稿
( ) 漸進(jìn)式 Web 應(yīng)用程序 (PWA) 支持
( ) 路由器
( ) 視圖
( ) CSS 預(yù)處理器
(*) 短絨/格式化程序
( ) 單元測(cè)試
( ) 端到端測(cè)試
可以根據(jù)需要添加其他功能，但在本教程中我們將僅使用單元測(cè)試。所以取消選擇 Linter / Formatter 或選擇 ESLint with error prevention only。
進(jìn)行之后，我們會(huì)被要求選擇Vue的版本，選擇3.x。
？檢查項(xiàng)目所需的功能：Babel、Unit？選擇你想要啟動(dòng)項(xiàng)目的 Vue.js 版本（使用箭頭鍵）> 3.x
2.x
使用箭頭鍵選擇開(kāi)玩笑作為下一個(gè)選項(xiàng)顯示。
？選擇一個(gè)你想用 3.x 啟動(dòng)項(xiàng)目的 Vue.js 版本？選擇一個(gè)單元測(cè)試解決方案：（使用箭頭鍵）> 笑話
摩卡+柴
此后，您將看到放置配置的選項(xiàng)，您應(yīng)該在其中選擇：在專(zhuān)用配置文件中，然后繼續(xù)。
？您更喜歡將 Babel、ESLint 等的配置放在哪里？（使用箭頭鍵）> 在專(zhuān)用配置文件中
在 package.json 中
在最后一個(gè)問(wèn)題中，鍵入 N，然后按回車(chē)鍵?，F(xiàn)在您的項(xiàng)目將由 Vue CLI 創(chuàng)建，文件夾結(jié)構(gòu)將如下所示：
cd to vue project created to change directory，在你喜歡的編輯器中打開(kāi)它。
想要借助 Vue.js 框架構(gòu)建高度定制化的 Web 界面？
Bacancy 在這里等你！立即聯(lián)系我們并從我們這里聘請(qǐng) vue js 開(kāi)發(fā)人員來(lái)構(gòu)建性能驅(qū)動(dòng)的用戶界面
如何使用 Jest Vue Test Utils 編寫(xiě)單元測(cè)試？
在本節(jié)中，我們采用了使用Jest Vue Test Utils在 Vue 應(yīng)用程序中編寫(xiě)單元測(cè)試的分步過(guò)程。
第 1 步：創(chuàng)建 Vue 組件
在 src/components 文件夾中創(chuàng)建一個(gè)名為 HtmlComponent.vue 的新組件。將代碼添加到您的組件。
<模板>
<div class="htmlClass">
<h1>{{標(biāo)題}}</h1>
</div></模板><!-- 添加“scoped”屬性以將 CSS 限制為僅此組件 --><樣式范圍></樣式>
第 2 步：創(chuàng)建測(cè)試文件，從 Test Utils 導(dǎo)入 Vue 組件和測(cè)試功能
現(xiàn)在，在 tests/unit 中創(chuàng)建一個(gè)名為 HtmlComponent.spec.ts 的測(cè)試文件。我們將在此處導(dǎo)入我們的組件，使用測(cè)試實(shí)用程序功能安裝它，并在其上運(yùn)行測(cè)試。
從“@/components/HtmlComponent.vue”導(dǎo)入 HtmlComponent從 '@vue/test-utils' 導(dǎo)入 { shallowMount }
第三步：在測(cè)試文件中添加測(cè)試用例
describe('HtmlComponent', () => {
it('應(yīng)該呈現(xiàn)正確的內(nèi)容', () => {
const wrapper = shallowMount(HtmlComponent)
讓 header = wrapper.find('.htmlClass h1')
期望（header.exists（））.toBe（真）
期望（標(biāo)題。文本（））
.toBe('Vue 很棒。')
})})
在上面的代碼中，shallowMount 方法將組件作為參數(shù)并返回其 Vue 實(shí)例和 DOM 節(jié)點(diǎn)。安裝我們的組件后，我們將使用 find、exists 和 toBe 的組合檢查 .htmlClass 中的 h1 是否存在。
之后，我們將檢查我們的標(biāo)頭元素是否包含與“Vue is awesome”相同的值?；虿?。
第 4 步：運(yùn)行測(cè)試用例
使用 npm 運(yùn)行該單元，您將獲得以下結(jié)果：
$ npm 運(yùn)行測(cè)試：?jiǎn)卧?gt; vue_3_jest_unit_testing@0.1.0測(cè)試：?jiǎn)卧?C:\Projects\Vue 測(cè)試\vue_3_jest_unit_testing> vue-cli-服務(wù)測(cè)試：?jiǎn)卧?br/> 通過(guò)測(cè)試/單元/HtmlComponent.spec.js
HTML組件
√ 應(yīng)該呈現(xiàn)正確的內(nèi)容（62 毫秒）測(cè)試套件：1 個(gè)通過(guò)，共 1 個(gè)測(cè)試：1 次通過(guò)，共 1 次快照：共 0 個(gè)時(shí)間：4.374 秒，估計(jì) 14 秒運(yùn)行所有測(cè)試套件。
恭喜，您已經(jīng)使用Jest Vue Test Utils完成了第一個(gè)單元測(cè)試。
第五步：測(cè)試Vue組件的不同測(cè)試用例
現(xiàn)在讓我們添加更多的測(cè)試用例。
it('檢查文本內(nèi)容是否符合變量中的定義', () => {
const wrapper = shallowMount(HtmlComponent, {
數(shù)據(jù) （） {
返回 {
title: '我愛(ài) Vue.'
}
}
})
讓 header = wrapper.find('.htmlClass h1')
expect(header.text()).toBe('我愛(ài) Vue.')})
在上面的代碼中，我們正在更改 title 變量的值并測(cè)試我們的 header 元素的值是否相同?，F(xiàn)在讓我們運(yùn)行我們的測(cè)試命令。
$ npm 運(yùn)行測(cè)試：?jiǎn)卧?gt; vue_3_jest_unit_testing@0.1.0測(cè)試：?jiǎn)卧?C:\Projects\Vue 測(cè)試\vue_3_jest_unit_testing> vue-cli-服務(wù)測(cè)試：?jiǎn)卧?br/> 通過(guò)測(cè)試/單元/HtmlComponent.spec.js
HTML組件
√ 應(yīng)該呈現(xiàn)正確的內(nèi)容（68 毫秒）
√ 檢查文本內(nèi)容是否符合變量定義（12 毫秒）測(cè)試套件：1 個(gè)通過(guò)，共 1 個(gè)測(cè)試：2 次通過(guò)，共 2 次快照：共 0 個(gè)時(shí)間：5.327 秒運(yùn)行所有測(cè)試套件。
讓我們?cè)?vue 模板中添加一些輸入和按鈕。
<模板>
<div class="htmlClass">
<h1>{{標(biāo)題}}</h1>
<表格>
<input type="text" id="firstName" v-model="firstName" />
<input type="text" id="secondName" v-model="secondName" />
<button @click="submitForm()" class="submitForm">提交</button>
</表格>
</div></模板><!-- 添加“scoped”屬性以將 CSS 限制為僅此組件 --><樣式范圍></樣式>
現(xiàn)在我們已經(jīng)在模板中添加了更多元素，讓我們創(chuàng)建新的測(cè)試用例。
test('應(yīng)該在用戶輸出中顯示表單元素', () => {
const wrapper = shallowMount(HtmlComponent)
期望（wrapper.find（'form'）。exists（））。toBe（真）
})
test('應(yīng)該在模板中包含輸入字段', () => {
const wrapper = shallowMount(HtmlComponent)
期望(wrapper.find('form > input').exists()).toBe(true)
})
test('應(yīng)該有按鈕', () => {
const wrapper = shallowMount(HtmlComponent)
期望（wrapper.find（'button'）。exists（））。toBe（真）
})
為了測(cè)試我們的新測(cè)試用例，讓我們重新運(yùn)行我們的測(cè)試命令。
$ npm 運(yùn)行測(cè)試：?jiǎn)卧?gt; vue_3_jest_unit_testing@0.1.0測(cè)試：?jiǎn)卧?C:\Projects\Vue 測(cè)試\vue_3_jest_unit_testing> vue-cli-服務(wù)測(cè)試：?jiǎn)卧?br/> 通過(guò)測(cè)試/單元/HtmlComponent.spec.js
HTML組件
√ 應(yīng)該呈現(xiàn)正確的內(nèi)容（72 毫秒）
√ 檢查文本內(nèi)容是否符合變量定義（9 毫秒）
√ 應(yīng)在用戶輸出中顯示表單元素（12 毫秒）
√ 應(yīng)包含模板中的輸入字段（11 毫秒）
√ 應(yīng)該有按鈕（11 毫秒）測(cè)試套件：1 個(gè)通過(guò)，共 1 個(gè)測(cè)試：5 個(gè)通過(guò)，總共 5 個(gè)快照：共 0 個(gè)時(shí)間：4.733 秒運(yùn)行所有測(cè)試套件。
如上所示，我們所有的案例都通過(guò)了檢查。
對(duì)于最后一輪，現(xiàn)在我們要檢查按鈕上的點(diǎn)擊事件是否按預(yù)期工作。
test('在按鈕上觸發(fā)點(diǎn)擊事件', async () => {
const wrapper = shallowMount(HtmlComponent)
常量按鈕 = wrapper.find('按鈕')
等待 button.trigger('點(diǎn)擊')
expect(wrapper.emitted()).toHaveProperty('提交表單')
})
在上面的代碼中，我們使用 trigger 屬性觸發(fā)了一個(gè)點(diǎn)擊事件。
$ npm 運(yùn)行測(cè)試：?jiǎn)卧?gt; vue_3_jest_unit_testing@0.1.0測(cè)試：?jiǎn)卧?C:\Projects\Vue 測(cè)試\vue_3_jest_unit_testing> vue-cli-服務(wù)測(cè)試：?jiǎn)卧?br/> 通過(guò)測(cè)試/單元/HtmlComponent.spec.js
HTML組件
√ 應(yīng)該呈現(xiàn)正確的內(nèi)容（77 毫秒）
√ 檢查文本內(nèi)容是否符合變量定義（28 毫秒）
√ 應(yīng)在用戶輸出中顯示表單元素（10 毫秒）
√ 應(yīng)包含模板中的輸入字段（8 毫秒）
√ 應(yīng)該有按鈕（9 毫秒）
√ 在按鈕上觸發(fā)點(diǎn)擊事件（17 毫秒）測(cè)試套件：1 個(gè)通過(guò)，共 1 個(gè)測(cè)試：6 個(gè)通過(guò)，總共 6 個(gè)快照：共 0 個(gè)時(shí)間：4.514 秒運(yùn)行所有測(cè)試套件。
現(xiàn)在我們所有的測(cè)試用例都通過(guò)了，表明當(dāng)我們的按鈕被點(diǎn)擊時(shí)，“提交表單”被發(fā)出。有了這個(gè)，我們可以得出結(jié)論，我們的按鈕完全按照我們的計(jì)劃工作。
您可以在Github Repository上找到上述解決方案來(lái)實(shí)現(xiàn)。
帶走
通過(guò)這個(gè)使用 Jest Vue Test 進(jìn)行 Vue 單元測(cè)試的簡(jiǎn)單教程，我們希望您能夠?qū)W習(xí)并嘗試在 Vue 中測(cè)試實(shí)用程序。如果您想了解 Vue 最新更新和新功能的其他策略，請(qǐng)查看我們的Vue 教程。Bacancy 是最好的 Vue 開(kāi)發(fā)公司，可滿足您的前端開(kāi)發(fā)需求，提供輕量級(jí)、高性能、經(jīng)濟(jì)高效且面向結(jié)果的 Vue 應(yīng)用程序。
（言鼎科技）專(zhuān)做軟件開(kāi)發(fā),微信小程序,網(wǎng)站開(kāi)發(fā),軟件外包,手機(jī)APP開(kāi)發(fā)，歡迎資訊！