Vue 3.0 測試

#介紹

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

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

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

#單元測試

#介紹

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

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

#選擇框架

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

#一流的錯誤報告

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

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

#活躍的社區(qū)和團隊

因為主流的單元測試框架都是開源的，所以對于一些旨在長期維護其測試且確保項目本身保持活躍的團隊來說，擁有一個活躍的社區(qū)是至關(guān)重要的。額外的好處是，在任何時候遇到問題時，一個活躍的社區(qū)會為你提供更多的支持。

#框架

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

#Jest

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

資料：

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

#Mocha

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

資料：

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

#組件測試

#介紹

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

#選擇框架

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

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

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

#一流的錯誤報告

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

#推薦

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

Vue Testing Library 是一組專注于測試組件而不依賴實現(xiàn)細節(jié)的工具。由于在設(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)境時提供應(yīng)用整體覆蓋的能力是有限的。因此，端到端測試可以說從應(yīng)用最重要的方面進行測試覆蓋：當用戶實際使用應(yīng)用時會發(fā)生什么。

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

#選擇框架

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

#跨瀏覽器測試

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

TIP

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

#更快的反饋路徑

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

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

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

#推薦

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

#Cypress.io

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

資料：

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

#Nightwatch.js

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

資料：

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

#Puppeteer

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

資料：

• Puppeteer 官網(wǎng)

#TestCafe

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

資料：

• TestCafe 官網(wǎng)