在前端，通常會測試最終用戶與我們的應用程序的交互。我們應該向用戶保證，當他們登錄、打開彈出窗口、添加評論或與我們的應用程序進行任何其他交互時，不會遇到任何錯誤和不愉快的體驗。

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

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

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

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

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

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

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

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

一些前端測試庫回顧

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

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

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

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

結論

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