根據(jù) Bob 大叔的說法，測(cè)試是系統(tǒng)的一部分；許多開發(fā)人員認(rèn)為相反，因?yàn)樗麄儧]有部署。他宣稱這是一個(gè)災(zāi)難性的觀點(diǎn)，因?yàn)闇y(cè)試的作用是支持開發(fā)并保持系統(tǒng)的健壯性和易于更改。

在前端，通常會(huì)測(cè)試最終用戶與我們應(yīng)用程序的交互。我們應(yīng)該向用戶保證，當(dāng)他們登錄、打開彈出窗口、添加評(píng)論或與我們的應(yīng)用程序進(jìn)行任何其他交互時(shí)，不會(huì)遇到任何錯(cuò)誤和不愉快的體驗(yàn)。

在前端進(jìn)行測(cè)試，如果正確完成，將使我們的用戶感到滿意，并在使用我們的應(yīng)用程序時(shí)獲得良好的性能體驗(yàn)。另一方面，對(duì)于開發(fā)者來說，會(huì)節(jié)省大量的時(shí)間去解決bug，或者在添加新特性的時(shí)候，不會(huì)破壞代碼之前的行為。

為什么測(cè)試會(huì)不利？如何設(shè)計(jì)測(cè)試系統(tǒng)？

測(cè)試需要時(shí)間，也需要與開發(fā)過程中的變化保持一致。此外，隨著設(shè)備和瀏覽器的發(fā)展，我們需要與時(shí)俱進(jìn)。在軟件測(cè)試中，有一個(gè)稱為脆弱測(cè)試問題的概念。這可以定義為導(dǎo)致數(shù)百個(gè)測(cè)試失敗的系統(tǒng)中的一個(gè)更改。Bob 大叔強(qiáng)調(diào)了設(shè)計(jì)良好的測(cè)試系統(tǒng)對(duì)于我們系統(tǒng)的穩(wěn)定性和回歸的預(yù)期好處的重要性（Clean Architecture，Robert C. Martin，2018）。

我們將描述一些可能有助于我們測(cè)試系統(tǒng)設(shè)計(jì)的方法和策略：

Martin Fowler 在他的文章“關(guān)于測(cè)試的多樣化和奇異的形式”中講述了當(dāng)他們向測(cè)試專家詢問單元測(cè)試的定義時(shí)他的那一刻。他說，這位專家的回答是，他在培訓(xùn)課程的第一天早上就涵蓋了 24 種不同的單元測(cè)試定義。由于單元測(cè)試有許多不同的定義，在本文中，我們將包括 Fowler 稱為單獨(dú)測(cè)試的一種。

在著名的測(cè)試金字塔中，在底部，我們遇到了測(cè)試覆蓋率較低但執(zhí)行速度最快的單元測(cè)試。在第二層，我們看到了集成測(cè)試，它的覆蓋率更高，但速度較慢，因?yàn)樗赡軙?huì)連接到外部部件。最后，我們有 E2E 測(cè)試或一些呼叫驗(yàn)收測(cè)試，它們覆蓋了應(yīng)用程序的很大一部分，但它們執(zhí)行起來最慢。

單元測(cè)試單獨(dú)檢查我們的組件是否正常工作。它們還涵蓋了要測(cè)試的邊緣案例，這使我們的代碼庫(kù)更加可靠。單元測(cè)試之后是集成測(cè)試的實(shí)施。集成測(cè)試檢查相互連接時(shí)獨(dú)立開發(fā)的兩個(gè)軟件單元或模塊之間的通信。他們分析系統(tǒng)連接時(shí)的行為，并檢查微服務(wù)之間的交互。它們還包括 API 連接，這就是為什么它們?cè)趩卧獪y(cè)試方面速度較慢的原因，因?yàn)檫B接可能會(huì)延遲，或者服務(wù)可能會(huì)關(guān)閉。在前端，集成測(cè)試用于檢查返回 API 的數(shù)據(jù)是否具有正確的對(duì)象、數(shù)組或格式。

E2E 測(cè)試模擬用戶行為并檢查用戶與我們應(yīng)用程序的所有交互。它們是在真實(shí)瀏覽器中執(zhí)行的集成測(cè)試的專門版本。它們通常在合并或發(fā)布之前運(yùn)行，因?yàn)橥瓿蓽y(cè)試的執(zhí)行可能需要數(shù)小時(shí)。

在下文中，我們還提到了測(cè)試技術(shù)，例如 Accessibility 和 UI：

可訪問性測(cè)試檢查用戶界面是否可供每個(gè)用戶輕松使用，并使我們的應(yīng)用程序可用于殘障人士。Jest-axe 是一個(gè)很棒的 Jest 測(cè)試庫(kù)，它允許我們檢查應(yīng)用程序的可訪問性。

UI 測(cè)試檢查我們應(yīng)用程序的用戶界面是否正常工作。如果用戶輸入內(nèi)容、單擊復(fù)選框或刪除元素，應(yīng)該可以正常工作并按預(yù)期更新 UI 狀態(tài)。

一些前端測(cè)試庫(kù)回顧

Jest 是一個(gè)主要用于前端單元和集成測(cè)試的庫(kù)。由于其巧妙的并行測(cè)試機(jī)制實(shí)現(xiàn)，對(duì)于測(cè)試文件較多的大型項(xiàng)目來說速度非常快。

測(cè)試庫(kù)是一個(gè)我們可以編寫單元和集成測(cè)試的庫(kù)。它有助于方便的選擇器、觸發(fā)事件、配置、處理異步代碼等等。

Cypress 是一個(gè)將其測(cè)試注入 Cypress.io 在瀏覽器中自行運(yùn)行的網(wǎng)站的庫(kù)。我們可以高效地編寫單元、集成和端到端測(cè)試。

它為開發(fā)者提供了更快的體驗(yàn)，我們可以很容易地在它的瀏覽器上看到錯(cuò)誤。

Applitools 用于視覺回歸測(cè)試。憑借其先進(jìn)的 AI 技術(shù)，它可以檢測(cè)圖像和 DOM 之間的差異。檢查我們網(wǎng)站的外觀是否與前一個(gè)相同或是否發(fā)生錯(cuò)誤非常有用。此外，如果用戶在移動(dòng)設(shè)備或網(wǎng)絡(luò)上可以正確看到網(wǎng)站上的任何項(xiàng)目或按鈕，它還會(huì)檢查不同的瀏覽器和平臺(tái)。

結(jié)論

前端測(cè)試應(yīng)該是我們開發(fā)的一部分，以便在代碼投入生產(chǎn)之前解決代碼中的問題。我們應(yīng)該編寫單元測(cè)試來檢查我們應(yīng)用程序中的每個(gè)功能，還應(yīng)該開發(fā)集成測(cè)試來檢查所有組件和模塊是否一起正常工作。另一方面，我們應(yīng)該編寫 E2E 測(cè)試來自動(dòng)化手動(dòng)點(diǎn)擊測(cè)試，并以用戶與我們的應(yīng)用程序交互的方式為中心。

我們應(yīng)該編寫測(cè)試來提供信心，而不僅僅是改進(jìn)指標(biāo)。正如 Robert C. Martin 所說，我們應(yīng)該避免編寫與系統(tǒng)強(qiáng)耦合的測(cè)試。因?yàn)榧词故亲钗⒉蛔愕赖母囊矔?huì)導(dǎo)致許多測(cè)試中斷。