建站
咨詢
售后
建站咨詢
新聞中心
#介紹
當(dāng)構(gòu)建可靠的應(yīng)用時(shí)，測試在個(gè)人或團(tuán)隊(duì)構(gòu)建新特性、重構(gòu)代碼、修復(fù) bug 等工作中扮演了關(guān)鍵的角色。盡管測試的流派有很多，它們在 web 應(yīng)用這個(gè)領(lǐng)域里主要有三大類：
- 單元測試
- 組件測試
- 端到端 (E2E，end-to-end) 測試
本章節(jié)致力于引導(dǎo)大家了解測試的生態(tài)系統(tǒng)的并為 Vue 應(yīng)用或組件庫選擇適合的工具。
#單元測試
#介紹
單元測試允許你將獨(dú)立單元的代碼進(jìn)行隔離測試，其目的是為開發(fā)者提供對代碼的信心。通過編寫細(xì)致且有意義的測試，你能夠有信心在構(gòu)建新特性或重構(gòu)已有代碼的同時(shí)，保持應(yīng)用的功能和穩(wěn)定。
為一個(gè) Vue 應(yīng)用做單元測試并沒有和為其它類型的應(yīng)用做測試有什么明顯的區(qū)別。
#選擇框架
因?yàn)閱卧獪y試的建議通常是框架無關(guān)的，所以下面只是當(dāng)你在評估應(yīng)用的單元測試工具時(shí)需要的一些基本指引。
#一流的錯(cuò)誤報(bào)告
當(dāng)測試失敗時(shí)，提供有用的錯(cuò)誤信息對于單元測試框架來說至關(guān)重要。這是斷言庫應(yīng)盡的職責(zé)。一個(gè)具有高質(zhì)量錯(cuò)誤信息的斷言能夠最小化調(diào)試問題所需的時(shí)間。除了簡單地告訴你什么測試失敗了，斷言庫還應(yīng)額外提供上下文以及測試失敗的原因，例如預(yù)期結(jié)果 vs 實(shí)際得到的結(jié)果。
一些諸如 Jest 這樣的單元測試框架會(huì)包含斷言庫。另一些諸如 Mocha 需要你單獨(dú)安裝斷言庫 (通常會(huì)用 Chai)。
#活躍的社區(qū)和團(tuán)隊(duì)
因?yàn)橹髁鞯膯卧獪y試框架都是開源的，所以對于一些旨在長期維護(hù)其測試且確保項(xiàng)目本身保持活躍的團(tuán)隊(duì)來說，擁有一個(gè)活躍的社區(qū)是至關(guān)重要的。額外的好處是，在任何時(shí)候遇到問題時(shí)，一個(gè)活躍的社區(qū)會(huì)為你提供更多的支持。
#框架
盡管生態(tài)系統(tǒng)里有很多工具，這里我們列出一些在 Vue 生態(tài)系統(tǒng)中常用的單元測試工具。
#Jest
Jest 是一個(gè)專注于簡易性的 JavaScript 測試框架。一個(gè)其獨(dú)特的功能是可以為測試生成快照 (snapshot)，以提供另一種驗(yàn)證應(yīng)用單元的方法。
資料：
- Jest 官網(wǎng)
- Vue CLI 官方插件 - Jest
#Mocha
Mocha 是一個(gè)專注于靈活性的 JavaScript 測試框架。因?yàn)槠潇`活性，它允許你選擇不同的庫來滿足諸如偵聽 (如 Sinon) 和斷言 (如 Chai) 等其它常見的功能。另一個(gè) Mocha 獨(dú)特的功能是它不止可以在 Node.js 里運(yùn)行測試，還可以在瀏覽器里運(yùn)行測試。
資料：
- Mocha 官網(wǎng)
- Vue CLI 官方插件 - Mocha
#組件測試
#介紹
測試大多數(shù) Vue 組件時(shí)都必須將它們掛載到 DOM (虛擬或真實(shí)) 上，才能完全斷言它們正在工作。這是另一個(gè)與框架無關(guān)的概念。因此組件測試框架的誕生，是為了讓用戶能夠以可靠的方式完成這項(xiàng)工作，同時(shí)還提供了 Vue 特有的諸如對 Vuex、Vue Router 和其他 Vue 插件的集成的便利性。
#選擇框架
以下章節(jié)提供了在評估最適合你的應(yīng)用的組件測試框架時(shí)需要記住的事項(xiàng)。
#與 Vue 生態(tài)系統(tǒng)的最佳兼容性
毋容置疑，最重要的標(biāo)準(zhǔn)之一就是組件測試庫應(yīng)該盡可能與 Vue 生態(tài)系統(tǒng)兼容。雖然這看起來很全面，但需要記住的一些關(guān)鍵集成領(lǐng)域包括單文件組件 (SFC)、Vuex、Vue Router 以及應(yīng)用所依賴的任何其他特定于 Vue 的插件。
#一流的錯(cuò)誤報(bào)告
當(dāng)測試失敗時(shí)，提供有用的錯(cuò)誤日志以最小化調(diào)試問題所需的時(shí)間對于組件測試框架來說至關(guān)重要。除了簡單地告訴你什么測試失敗了，他們還應(yīng)額外提供上下文以及測試失敗的原因，例如預(yù)期結(jié)果 vs 實(shí)際得到的結(jié)果。
#推薦
#Vue Testing Library (@testing-library/vue)
Vue Testing Library 是一組專注于測試組件而不依賴實(shí)現(xiàn)細(xì)節(jié)的工具。由于在設(shè)計(jì)時(shí)就充分考慮了可訪問性，它采用的方案也使重構(gòu)變得輕而易舉。
它的指導(dǎo)原則是，與軟件使用方式相似的測試越多，它們提供的可信度就越高。
資料：
- Vue Testing Library 官網(wǎng)
#Vue Test Utils
Vue Test Utils 是官方的偏底層的組件測試庫，它是為用戶提供對 Vue 特定 API 的訪問而編寫的。如果你對測試 Vue 應(yīng)用不熟悉，我們建議你使用 Vue Testing Library，它是 Vue Test Utils 的抽象。
資源：
- Vue Test Utils 官方文檔
- Vue 測試指南 by Lachlan Miller
#端到端 (E2E) 測試
#介紹
雖然單元測試為開發(fā)者提供了一定程度的信心，但是單元測試和組件測試在部署到生產(chǎn)環(huán)境時(shí)提供應(yīng)用整體覆蓋的能力是有限的。因此，端到端測試可以說從應(yīng)用最重要的方面進(jìn)行測試覆蓋：當(dāng)用戶實(shí)際使用應(yīng)用時(shí)會(huì)發(fā)生什么。
換句話說，端到端測試驗(yàn)證應(yīng)用中的所有層。這不僅包括你的前端代碼，還包括所有相關(guān)的后端服務(wù)和基礎(chǔ)設(shè)施，它們更能代表你的用戶所處的環(huán)境。通過測試用戶操作如何影響應(yīng)用，端到端測試通常是提高應(yīng)用是否正常運(yùn)行的信心的關(guān)鍵。
#選擇框架
雖然 web 上的端到端測試因不可信賴 (片面的) 測試和減慢開發(fā)過程而得到負(fù)面的聲譽(yù)，但現(xiàn)代端到端工具在創(chuàng)建更可靠的、交互的和實(shí)用的測試方面取得了長足進(jìn)步。在選擇端到端測試框架時(shí)，以下章節(jié)在你為應(yīng)用選擇測試框架時(shí)提供了一些指導(dǎo)。
#跨瀏覽器測試
端到端測試的一個(gè)主要優(yōu)點(diǎn)是它能夠跨多個(gè)瀏覽器測試應(yīng)用。盡管 100% 的跨瀏覽器覆蓋看上去很誘人，但需要注意的是，因?yàn)槌掷m(xù)運(yùn)行這些跨瀏覽器測試需要額外的時(shí)間和機(jī)器消耗，它會(huì)降低團(tuán)隊(duì)的資源回報(bào)。因此，在選擇應(yīng)用需要的跨瀏覽器測試數(shù)量時(shí)，必須注意這種權(quán)衡。
TIP
針對瀏覽器特定問題的一個(gè)最新進(jìn)展是，針對不常用的瀏覽器 (如：< IE11、舊版 Safari 等) 使用應(yīng)用監(jiān)視和錯(cuò)誤報(bào)告工具 (如：Sentry、LogRocket 等)。
#更快的反饋路徑
端到端測試和開發(fā)的主要問題之一是運(yùn)行整個(gè)套件需要很長時(shí)間。通常，這只在持續(xù)集成和部署 (CI/CD) 管道中完成?，F(xiàn)代的端到端測試框架通過添加類似并行化的特性來幫助解決這個(gè)問題，這使得 CI/CD 管道的運(yùn)行速度通常比以前快。此外，在本地開發(fā)時(shí)，有選擇地為正在處理的頁面運(yùn)行單個(gè)測試的能力，同時(shí)還提供測試的熱重載，將有助于提高開發(fā)者的工作流程和工作效率。
#一流的調(diào)試經(jīng)驗(yàn)
雖然開發(fā)者傳統(tǒng)上依賴于在終端窗口中掃描日志來幫助確定測試中出了什么問題，但現(xiàn)代端到端測試框架允許開發(fā)者利用他們已經(jīng)熟悉的工具，例如瀏覽器開發(fā)工具。
#推薦
雖然生態(tài)系統(tǒng)中有許多工具，但以下是一些 Vue.js 生態(tài)系統(tǒng)中常用的端到端測試框架。
#Cypress.io
Cypress.io 是一個(gè)測試框架，旨在通過使開發(fā)者能夠可靠地測試他們的應(yīng)用，同時(shí)提供一流的開發(fā)者體驗(yàn)，來提高開發(fā)者的生產(chǎn)率。
資料：
- Cypress 官網(wǎng)
- Vue CLI 官方插件 - Cypress
- Cypress Testing Library
#Nightwatch.js
Nightwatch.js 是一個(gè)端到端測試框架，可用于測試 web 應(yīng)用和網(wǎng)站，以及 Node.js 單元測試和集成測試。
資料：
- Nightwatch 官網(wǎng)
- Vue CLI 官方插件 - Nightwatch
#Puppeteer
Puppeteer 是一個(gè) Node.js 庫，它提供高階 API 來控制瀏覽器，并可以與其他測試運(yùn)行程序 (例如 Jest) 配對來測試應(yīng)用。
資料：
- Puppeteer 官網(wǎng)
#TestCafe
TestCafe 是一個(gè)基于端到端的 Node.js 框架，旨在提供簡單的設(shè)置，以便開發(fā)者能夠?qū)Ｗ⒂趧?chuàng)建易于編寫和可靠的測試。
資料：
- TestCafe 官網(wǎng)
網(wǎng)站欄目：創(chuàng)新互聯(lián)VUE3教程：Vue3.0測試
分享地址：http://fisionsoft.com.cn/article/djgopge.html
