Vue 3.0 測(cè)試

#介紹

當(dāng)構(gòu)建可靠的應(yīng)用時(shí)，測(cè)試在個(gè)人或團(tuán)隊(duì)構(gòu)建新特性、重構(gòu)代碼、修復(fù) bug 等工作中扮演了關(guān)鍵的角色。盡管測(cè)試的流派有很多，它們?cè)?web 應(yīng)用這個(gè)領(lǐng)域里主要有三大類：

• 單元測(cè)試
• 組件測(cè)試
• 端到端 (E2E，end-to-end) 測(cè)試

本章節(jié)致力于引導(dǎo)大家了解測(cè)試的生態(tài)系統(tǒng)的并為 Vue 應(yīng)用或組件庫選擇適合的工具。

#單元測(cè)試

#介紹

單元測(cè)試允許你將獨(dú)立單元的代碼進(jìn)行隔離測(cè)試，其目的是為開發(fā)者提供對(duì)代碼的信心。通過編寫細(xì)致且有意義的測(cè)試，你能夠有信心在構(gòu)建新特性或重構(gòu)已有代碼的同時(shí)，保持應(yīng)用的功能和穩(wěn)定。

為一個(gè) Vue 應(yīng)用做單元測(cè)試并沒有和為其它類型的應(yīng)用做測(cè)試有什么明顯的區(qū)別。

#選擇框架

因?yàn)閱卧獪y(cè)試的建議通常是框架無關(guān)的，所以下面只是當(dāng)你在評(píng)估應(yīng)用的單元測(cè)試工具時(shí)需要的一些基本指引。

#一流的錯(cuò)誤報(bào)告

當(dāng)測(cè)試失敗時(shí)，提供有用的錯(cuò)誤信息對(duì)于單元測(cè)試框架來說至關(guān)重要。這是斷言庫應(yīng)盡的職責(zé)。一個(gè)具有高質(zhì)量錯(cuò)誤信息的斷言能夠最小化調(diào)試問題所需的時(shí)間。除了簡(jiǎn)單地告訴你什么測(cè)試失敗了，斷言庫還應(yīng)額外提供上下文以及測(cè)試失敗的原因，例如預(yù)期結(jié)果 vs 實(shí)際得到的結(jié)果。

一些諸如 Jest 這樣的單元測(cè)試框架會(huì)包含斷言庫。另一些諸如 Mocha 需要你單獨(dú)安裝斷言庫 (通常會(huì)用 Chai)。

#活躍的社區(qū)和團(tuán)隊(duì)

因?yàn)橹髁鞯膯卧獪y(cè)試框架都是開源的，所以對(duì)于一些旨在長(zhǎng)期維護(hù)其測(cè)試且確保項(xiàng)目本身保持活躍的團(tuán)隊(duì)來說，擁有一個(gè)活躍的社區(qū)是至關(guān)重要的。額外的好處是，在任何時(shí)候遇到問題時(shí)，一個(gè)活躍的社區(qū)會(huì)為你提供更多的支持。

#框架

盡管生態(tài)系統(tǒng)里有很多工具，這里我們列出一些在 Vue 生態(tài)系統(tǒng)中常用的單元測(cè)試工具。

#Jest

Jest 是一個(gè)專注于簡(jiǎn)易性的 JavaScript 測(cè)試框架。一個(gè)其獨(dú)特的功能是可以為測(cè)試生成快照 (snapshot)，以提供另一種驗(yàn)證應(yīng)用單元的方法。

資料：

• Jest 官網(wǎng)
• Vue CLI 官方插件 - Jest

#Mocha

Mocha 是一個(gè)專注于靈活性的 JavaScript 測(cè)試框架。因?yàn)槠潇`活性，它允許你選擇不同的庫來滿足諸如偵聽 (如 Sinon) 和斷言 (如 Chai) 等其它常見的功能。另一個(gè) Mocha 獨(dú)特的功能是它不止可以在 Node.js 里運(yùn)行測(cè)試，還可以在瀏覽器里運(yùn)行測(cè)試。

資料：

• Mocha 官網(wǎng)
• Vue CLI 官方插件 - Mocha

#組件測(cè)試

#介紹

測(cè)試大多數(shù) Vue 組件時(shí)都必須將它們掛載到 DOM (虛擬或真實(shí)) 上，才能完全斷言它們正在工作。這是另一個(gè)與框架無關(guān)的概念。因此組件測(cè)試框架的誕生，是為了讓用戶能夠以可靠的方式完成這項(xiàng)工作，同時(shí)還提供了 Vue 特有的諸如對(duì) Vuex、Vue Router 和其他 Vue 插件的集成的便利性。

#選擇框架

以下章節(jié)提供了在評(píng)估最適合你的應(yīng)用的組件測(cè)試框架時(shí)需要記住的事項(xiàng)。

#與 Vue 生態(tài)系統(tǒng)的最佳兼容性

毋容置疑，最重要的標(biāo)準(zhǔn)之一就是組件測(cè)試庫應(yīng)該盡可能與 Vue 生態(tài)系統(tǒng)兼容。雖然這看起來很全面，但需要記住的一些關(guān)鍵集成領(lǐng)域包括單文件組件 (SFC)、Vuex、Vue Router 以及應(yīng)用所依賴的任何其他特定于 Vue 的插件。

#一流的錯(cuò)誤報(bào)告

當(dāng)測(cè)試失敗時(shí)，提供有用的錯(cuò)誤日志以最小化調(diào)試問題所需的時(shí)間對(duì)于組件測(cè)試框架來說至關(guān)重要。除了簡(jiǎn)單地告訴你什么測(cè)試失敗了，他們還應(yīng)額外提供上下文以及測(cè)試失敗的原因，例如預(yù)期結(jié)果 vs 實(shí)際得到的結(jié)果。

#推薦

#Vue Testing Library (@testing-library/vue)

Vue Testing Library 是一組專注于測(cè)試組件而不依賴實(shí)現(xiàn)細(xì)節(jié)的工具。由于在設(shè)計(jì)時(shí)就充分考慮了可訪問性，它采用的方案也使重構(gòu)變得輕而易舉。

它的指導(dǎo)原則是，與軟件使用方式相似的測(cè)試越多，它們提供的可信度就越高。

資料：

• Vue Testing Library 官網(wǎng)

#Vue Test Utils

Vue Test Utils 是官方的偏底層的組件測(cè)試庫，它是為用戶提供對(duì) Vue 特定 API 的訪問而編寫的。如果你對(duì)測(cè)試 Vue 應(yīng)用不熟悉，我們建議你使用 Vue Testing Library，它是 Vue Test Utils 的抽象。

資源：

• Vue Test Utils 官方文檔
• Vue 測(cè)試指南 by Lachlan Miller

#端到端 (E2E) 測(cè)試

#介紹

雖然單元測(cè)試為開發(fā)者提供了一定程度的信心，但是單元測(cè)試和組件測(cè)試在部署到生產(chǎn)環(huán)境時(shí)提供應(yīng)用整體覆蓋的能力是有限的。因此，端到端測(cè)試可以說從應(yīng)用最重要的方面進(jìn)行測(cè)試覆蓋：當(dāng)用戶實(shí)際使用應(yīng)用時(shí)會(huì)發(fā)生什么。

換句話說，端到端測(cè)試驗(yàn)證應(yīng)用中的所有層。這不僅包括你的前端代碼，還包括所有相關(guān)的后端服務(wù)和基礎(chǔ)設(shè)施，它們更能代表你的用戶所處的環(huán)境。通過測(cè)試用戶操作如何影響應(yīng)用，端到端測(cè)試通常是提高應(yīng)用是否正常運(yùn)行的信心的關(guān)鍵。

#選擇框架

雖然 web 上的端到端測(cè)試因不可信賴 (片面的) 測(cè)試和減慢開發(fā)過程而得到負(fù)面的聲譽(yù)，但現(xiàn)代端到端工具在創(chuàng)建更可靠的、交互的和實(shí)用的測(cè)試方面取得了長(zhǎng)足進(jìn)步。在選擇端到端測(cè)試框架時(shí)，以下章節(jié)在你為應(yīng)用選擇測(cè)試框架時(shí)提供了一些指導(dǎo)。

#跨瀏覽器測(cè)試

端到端測(cè)試的一個(gè)主要優(yōu)點(diǎn)是它能夠跨多個(gè)瀏覽器測(cè)試應(yīng)用。盡管 100% 的跨瀏覽器覆蓋看上去很誘人，但需要注意的是，因?yàn)槌掷m(xù)運(yùn)行這些跨瀏覽器測(cè)試需要額外的時(shí)間和機(jī)器消耗，它會(huì)降低團(tuán)隊(duì)的資源回報(bào)。因此，在選擇應(yīng)用需要的跨瀏覽器測(cè)試數(shù)量時(shí)，必須注意這種權(quán)衡。

TIP

針對(duì)瀏覽器特定問題的一個(gè)最新進(jìn)展是，針對(duì)不常用的瀏覽器 (如：< IE11、舊版 Safari 等) 使用應(yīng)用監(jiān)視和錯(cuò)誤報(bào)告工具 (如：Sentry、LogRocket 等)。

#更快的反饋路徑

端到端測(cè)試和開發(fā)的主要問題之一是運(yùn)行整個(gè)套件需要很長(zhǎng)時(shí)間。通常，這只在持續(xù)集成和部署 (CI/CD) 管道中完成。現(xiàn)代的端到端測(cè)試框架通過添加類似并行化的特性來幫助解決這個(gè)問題，這使得 CI/CD 管道的運(yùn)行速度通常比以前快。此外，在本地開發(fā)時(shí)，有選擇地為正在處理的頁面運(yùn)行單個(gè)測(cè)試的能力，同時(shí)還提供測(cè)試的熱重載，將有助于提高開發(fā)者的工作流程和工作效率。

#一流的調(diào)試經(jīng)驗(yàn)

雖然開發(fā)者傳統(tǒng)上依賴于在終端窗口中掃描日志來幫助確定測(cè)試中出了什么問題，但現(xiàn)代端到端測(cè)試框架允許開發(fā)者利用他們已經(jīng)熟悉的工具，例如瀏覽器開發(fā)工具。

#推薦

雖然生態(tài)系統(tǒng)中有許多工具，但以下是一些 Vue.js 生態(tài)系統(tǒng)中常用的端到端測(cè)試框架。

#Cypress.io

Cypress.io 是一個(gè)測(cè)試框架，旨在通過使開發(fā)者能夠可靠地測(cè)試他們的應(yīng)用，同時(shí)提供一流的開發(fā)者體驗(yàn)，來提高開發(fā)者的生產(chǎn)率。

資料：

• Cypress 官網(wǎng)
• Vue CLI 官方插件 - Cypress
• Cypress Testing Library

#Nightwatch.js

Nightwatch.js 是一個(gè)端到端測(cè)試框架，可用于測(cè)試 web 應(yīng)用和網(wǎng)站，以及 Node.js 單元測(cè)試和集成測(cè)試。

資料：

• Nightwatch 官網(wǎng)
• Vue CLI 官方插件 - Nightwatch

#Puppeteer

Puppeteer 是一個(gè) Node.js 庫，它提供高階 API 來控制瀏覽器，并可以與其他測(cè)試運(yùn)行程序 (例如 Jest) 配對(duì)來測(cè)試應(yīng)用。

資料：

• Puppeteer 官網(wǎng)

#TestCafe

TestCafe 是一個(gè)基于端到端的 Node.js 框架，旨在提供簡(jiǎn)單的設(shè)置，以便開發(fā)者能夠?qū)Ｗ⒂趧?chuàng)建易于編寫和可靠的測(cè)試。

資料：

• TestCafe 官網(wǎng)