雲棲號資訊：【點擊查看更多行業資訊】
在這裏您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！
很多開發人員都很喜歡 React，在前端領域它也是很流行的 UI 庫了。我們也知道應用要交付生產環境前是必須要經過完善的測試的，而測試應用程序時，有趁手的工具能極大減輕開發人員的負擔、提升測試效率並減少測試漏洞。正所謂"工欲善其事，必先利其器"，這篇文章就爲大家推薦 8 個好用的測試工具、庫和框架。本文編譯自 GeeksforGeeks 網站。
如果你是前端工程師，日常工作中經常會用到 React 庫，那麼你手裏可能已經有一些用來測試 React 應用的工具或框架了。許多開發人員會使用 Jest、Enzyme 或其他一些流行的工具和庫來測試 React 應用組件。但畢竟蘿蔔青菜各有所愛，開源生態系統中又有大量用於 React 應用的測試框架和工具，所以很多人（尤其是新人）很容易在這個問題上犯選擇困難症。下面我們會介紹一些流行好用的 React 測試框架和庫，供大家參考。
1.Jest
Jest 是最受歡迎的測試框架，每週下載超過 1600 萬次。它是由 Facebook 創建和維護的。FB 團隊用它來測試所有 JavaScript 代碼，也包括 React 應用程序。Airbnb、Uber、Intuit 等公司的團隊也在用它。Jest 附帶了測試運行器和斷言功能。就算是剛剛接觸 JS 編程的新手，也可以用 Jest 來測試自己的作品。
特點：
速度夠快。從 Mocha 切換到 Jest 後，Airbnb 的總測試運行時間從 12 分鐘減到了 4 分半。
它可以執行快照、並行化和異步方法測試。
可以用它 mock 你的函數，包括第三方的 node_module 庫
可以使用快照來管理具有較大對象的測試。
帶有報告指南的標準語法。
與 React、VueJS、Angular 等許多項目兼容。
2.Mocha
Mocha 是另一個針對 JavaScript 開發人員的流行測試框架。它爲 NodeJS 程序、異步測試、測試覆蓋報告以及許多庫提供了瀏覽器支持。使用 Mocha 時，你可以完全掌控代碼的測試方法與工具選項，還可以隨意加入或抽出工具鏈中的多數庫和工具。Jest 有一些缺點，比如說 mocking 就有些難懂，那麼這時候 Mocha 就是一個不錯的替代方案。
特點：
運行在 Node.js 上，並支持異步前端和後端測試。
錯誤跟蹤。
人們經常使用 Mocha 與 Enzyme 和 Chai 的組合處理斷言和 mocking 等。推薦使用 Enzyme+Mocha 的組合測試用 ReactJS 編寫的 Web 應用程序。
3.Chai
Chai 是針對 node 和瀏覽器的流行斷言和期望庫，可以與任何 JavaScript 測試框架搭配。斷言是一種聲明測試期望的方法。Mocha 沒有內置的斷言庫，因此許多開發人員選擇 Chai 和 Mocha 來測試 React 應用程序。它的某些功能，例如 expect、should 和斷言，可以幫助你聲明測試中的期望。它可以用來對函數下斷言。
4.Jasmine
Jasmine 是一個很棒的 BDD 開源框架和測試運行器，可用於測試各種 JavaScript 應用程序。它包括了可視測試和響應測試，可以用來測試分辨率各異的多種設備。許多使用 Angular CLI 的開發人員都喜歡使用 Jasmine 來測試應用程序。開發人員通常將其與 Babel 和 Enzyme 結合起來測試 React 應用程序。
特點：
Jasmine 不需要文檔對象模型（DOM）。
前端和後端測試。
異步函數測試。
Mocking 請求。
自定義相等性 checker 斷言。
自定義 matcher 聲明。
可靠的文檔和社區支持。
不過，Jasmine 不支持快照測試、代碼覆蓋工具、並行化（需要第三方工具）和原生 DOM 操作（需要第三方工具）。
5.Enzyme
Enzyme 是一個測試工具，可以幫助開發人員輕鬆測試 React 組件。它是由 Airbnb 開發和維護的，也是前端領域最常用的框架之一。開發人員喜歡將它與其他框架（如 Jest、Chai 或 Mocha）搭配起來測試 React 應用程序。它只能用於渲染組件、訪問事物、查找元素、與元素交互以及模擬事件。可以使用 Chai 或 Jest 爲其斷言。你可以用它測試 React 組件的輸出，抽象化組件的渲染。
特點：
使用 shallow 渲染（淺渲染）。
訪問組件的業務實現。
進行完整的 DOM 渲染。
在 shallow 渲染中使用 react-hook，但這裏有一些限制。
6.Cypress IO
Cypress 是一個非常快速的端到端測試框架，你無需其他任何測試框架就可以編寫測試。它允許你在真實的瀏覽器或命令行中運行測試。此外你還可以同時使用瀏覽器開發工具。該框架帶有控制面板，可讓你控制測試狀態。
特點：
帶快照的時間旅行功能（time travel）。
屏幕截圖和視頻。
自動等待。
控制網絡流量，而無需接觸服務器來測試極端情況。
內置的並行化和負載平衡功能簡化了調試工作。
不錯的 API，可以同頁面組件交互。
7.React-testing-library
React-testing-library 由 KentC.Dodds 創建，得到了廣大開發人員的支持。你可以用它輕鬆測試組件並在測試中模擬用戶行爲。這個庫是一套完整的 React DOM 測試工具，主要用來模仿實際的用戶操作和工作流程。
特點：
查詢文本、標籤、displayValue、角色和 testId 中的元素。
觸發任何事件。
使用 wait 等待元素出現。
這個庫也有一些侷限，你不能進行 shallow 渲染，也不能訪問組件的內部業務，例如狀態。
8.Puppeteer
Puppeteer 不是一個 JavaScript 框架，它是一個 Chromium Node 庫，提供了 API 以通過 DevTools 協議控制 Chrome 或 Chromium。你可以啓動 Chrome，然後使用它提供的 API 在頁面之間導航、獲取按鈕並點擊它們。Puppeteer 運行在真實的瀏覽器上，你可以用類似瀏覽器的 API 編寫端到端測試。Puppeteer 的功能很多，例如生成屏幕截圖、從 SPA 生成預渲染的內容、自動執行表單提交和鍵盤輸入之類的動作等。你可以將 Puppeteer 與 Jest 搭配使用，對你的 React 應用程序執行端到端測試。
特點：
簡單的自動化 UI 測試、表單提交和鍵盤輸入。
輕鬆創建網頁的屏幕截圖和 PDF 文件。
支持測試 Chrome 擴展程序。
Puppeteer 不支持那麼多擴展，但它的未來充滿光明。
小結
每個測試庫和框架都有其優點和缺點。無論是單元測試、集成測試還是端到端測試，選擇合適的工具才能獲得最好的結果。希望本文推薦的這些工具可以幫到大家，你還有哪些工具可以推薦呢？請在評論中分享吧。
【雲棲號在線課堂】每天都有產品技術專家分享！
課程地址：https://yqh.aliyun.com/zhibo立即加入社羣，與專家面對面，及時瞭解課程最新動態！
【雲棲號在線課堂 社羣】https://c.tb.cn/F3.Z8gvnK
原文發佈時間：2020-07-23
本文作者：anuupadhyay
本文來自：“InfoQ”，瞭解相關信息可以關注“InfoQ”