很多開發人員都很喜歡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://www.geeksforgeeks.org/8-useful-testing-tools-libraries-and-frameworks-for-react-developers/