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

前端測試，如果做得正確，將使我們的用戶滿意，并在使用我們的應(yīng)用程序時(shí)有良好的性能體驗(yàn)。另一方面，對于開發(fā)人員來說，解決bug會節(jié)省大量時(shí)間，或者在添加新功能時(shí)，不會破壞代碼以前的行為。

測試需要時(shí)間，也需要與開發(fā)過程中的變化保持一致。此外，隨著設(shè)備和瀏覽器的發(fā)展，我們需要跟上時(shí)代。在軟件測試中，有一個(gè)概念叫做脆弱測試問題。這可以定義為系統(tǒng)中的一個(gè)變化導(dǎo)致數(shù)百個(gè)測試失敗。

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

在著名的測試金字塔中，在底層中，我們會遇到測試覆蓋率較少的單元測試，但它們是執(zhí)行速度最快的單元測試。在第二級中，我們看到集成測試，它有更多的覆蓋面，但是它們較慢，因?yàn)樗赡芘c外部部分連接。最后，我們有E2E測試或一些呼叫接受測試，它們覆蓋了應(yīng)用程序的很大一部分，但它們是執(zhí)行最慢的。

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

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

易訪問性測試檢查用戶界面是否容易被每個(gè)用戶使用，并使我們的應(yīng)用程序?qū)堈先耸靠捎谩?/span>Jest-axe是一個(gè)很棒的Jest測試庫，它允許我們檢查應(yīng)用程序的可訪問性。

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

一些前端測試庫回顧

Jest是一個(gè)主要用于前端單元和集成測試的庫。它的機(jī)制實(shí)現(xiàn)了巧妙的并行測試，對于測試文件多的大項(xiàng)目非常快。

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

Cypress是一個(gè)庫，它將其測試注入到一個(gè)網(wǎng)站中，Cypress.io在瀏覽器中自行運(yùn)行該網(wǎng)站。我們可以高效地編寫單元、集成和端到端測試。它為開發(fā)者提供了更快的體驗(yàn)，我們可以很容易地在瀏覽器上看到錯(cuò)誤。

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

結(jié)論

前端測試應(yīng)該是我們開發(fā)的一部分，以便在代碼投入生產(chǎn)之前解決問題。我們應(yīng)該編寫單元測試來檢查應(yīng)用程序中的每一項(xiàng)功能，還應(yīng)該開發(fā)集成測試來檢查所有組件和模塊是否能夠正確地協(xié)同工作。另一方面，我們應(yīng)該編寫E2E測試來自動化手動點(diǎn)擊測試，并關(guān)注用戶如何與我們的應(yīng)用程序交互。