作者 | sanjeev sharma
翻譯者 |徐學文.
策展 |丁曉雲.
你打算為你的 React 編寫測試嗎？因為找不到乙個好的教程來入門而感到沮喪？好吧，這篇文章正是您所需要的。 在本文中，我們將介紹編寫單元測試的所有步驟，以及在此過程中可能遇到的錯誤和問題。
本文使用 JEST 和 React 測試庫庫。 如果你想使用其他庫也沒關係，本文中的一些基礎知識也會有所幫助。
本文中介紹的所有**都託管在 GitHub 上，本文末尾提供了鏈結。
當然，產品開發可以在不編寫測試的情況下完成。 使用者、產品經理，甚至測試人員或 QA 都不在乎產品是否經過測試**。 但是，作為開發人員，您應該關心！
假設您有乙個擁有數萬使用者的使用者，當您對公共實用程式函式進行一些重構（或新增功能修復）時，並在呼叫該函式的應用中的某個位置對其進行測試時，它表明該函式有效。 所以你選擇在星期五上線（這是乙個低階錯誤）。 然後，該功能無法在應用程式的其他位置工作，導致週末線上中斷。 在這一點上，你多麼希望在這些地方有測試，可以在發布到生產環境之前自動執行，從而避免這種失敗。
上述情況比您想象的更常見。 你可能還沒有遇到過它（雖然這只是時間問題），但包括我在內的很多工程師都已經遇到過它。
因此，測試很重要，原因如下：
增強您對發布的信心。
測試本身就是乙個文件。
可用於除錯和重構。
從長遠來看，它有助於縮短開發時間。
對於所有希望晉公升的初級開發人員來說，具備編寫測試的能力非常重要。
我們將教您如何從頭開始編寫測試**，因此請準備好您的終端。 首先，讓我們使用 Vite 建立乙個示例專案。
建立專案後，使用以下命令執行它。
程式執行後，您將在頁面上看到乙個演示應用程式。
我們不會向應用程式新增新功能，但為了編寫按鈕測試，我們需要將按鈕重構為單獨的元件。
接下來，讓我們向頁面新增兩個按鈕：
按鈕的功能是在單擊時將 count 的值乘以 2。 另乙個按鈕在單擊時執行以下操作：如果 count 的值以 0 結尾，則將其值除以 2。 如果 count 的值是斐波那契數，則將其值相加 1。 否則，將 count 的值平方。 
我們需要在 utils 模組中宣告上面使用的兩個函式。 同時，我們也宣告了一些輔助函式，但由於它們在其他地方沒有使用，所以我們不需要在這裡匯出它們。
*準備好了，現在是時候開始編寫測試了**。 在這裡，我們跳過 React，先為實用程式函式編寫測試。 這有助於我們理解 Jest 框架的一般用法。
接下來，讓我們為 doublethenum 函式編寫乙個測試。
上面的 ** 用於測試我們的函式是否按預期執行。 任何測試**都將包括以下關鍵元件：
describe 函式：第乙個引數是乙個字串，將在測試執行時顯示。 第二個引數是測試實際執行的函式。 describe 函式的主要目的是對相同型別的測試進行分組。 這裡只有乙個測試，在另乙個示例中，你會看到有多個測試。 it函式：其引數結構類似於 describe 函式的引數結構。 但是，此處的字串引數應盡可能詳細地描述測試函式。 當然，您也可以使用測試功能來代替它。 Expect 語句塊：此函式中的前三行很簡單。 最後一行是斷言，用於確定 doublethenum 函式是否正常工作。 此外，我們在這裡使用 toequal matcher 函式。 Jest 提供了很多匹配器，例如：
tobenull 用於匹配 null。
TobeTruthy 用於匹配判定為 true 的語句。 有關媒人的更多資訊，請參閱以下鏈結：
為了執行測試，我們需要安裝 jest：
然後在包裝中json格式：
最後，通過執行 yarn test 命令來執行測試。
對於大多數人來說，上述步驟就足夠了。 但是，如果您在模組匯入或 TypeScript 方面遇到任何問題，請按照以下步驟操作：
安裝並設定 @babel preset-env：
然後，將其配置到包中喬斯：
安裝 TypeScript 依賴：
然後，開玩笑config.TS
然後執行測試，結果如下：
從輸出中，您可以看到我們在 describe 中宣告的字串資訊及其函式。
恭喜，你已經完成了你的第乙個測試！
喜歡這篇文章嗎？如果你覺得它很好，我建議你看看我最受歡迎的另一篇文章，The Complete Guide to Redux，它已經被 2 人閱讀了50,000：接下來，讓我們為 funkynum 函式編寫測試。
在編寫測試時，您應該盡可能多地涵蓋函式的分支和語句。 測試覆蓋率越高，乙個人的信心就越大。
如果再次執行測試，應看到以下輸出。
理想情況下，我們還應該為 isfibonacci 和 isperfectsquare 函式編寫單獨的 describe 語句塊。 在單元測試中，測試應彼此獨立。 為了簡潔起見，我們在這裡不這樣做。
技巧。 通過打電話。 跳過或測試skip 跳過任何測試，或呼叫 describeskip 跳過整個測試塊。
通過呼叫它僅或測試僅執行單個測試。
我們已經介紹了如何使用 Jest 進行 JS 測試。 現在，讓我們深入了解 React 上的測試。
在開始之前，我們還需要安裝一些依賴庫：
同時，你還需要在開玩笑中設定乙個遊戲config.TS：
讓我們為 counterbutton 元件編寫乙個基本測試：
在上面的部分中，我們提供了所需的 props 並嘗試渲染元件。 對於任何元件，這應該是您為其編寫的第乙個測試。 因為如果該測試失敗，那麼其他測試將毫無用處。
RTL（React Testing Library）的渲染函式將在文件中設定身體。
它還返回一些查詢方法，例如 GetByText，可用於查詢 DOM 中的元素。
點選這裡進行所有查詢。
如果再次執行測試，您應該會看到 2 組測試 - 全部為綠色且通過。
我們編寫的第二個測試是測試元件對 props 的響應。 如果 props 沒有相互依賴關係，則應為每個 prop 引數編寫單獨的測試。
getbytext 函式是一種查詢方法，它允許我們通過字串獲取元素。
tobeinthedocument 函式是乙個類似於 toequal 的匹配器。 jest 預設不提供此功能，需要先安裝 @testing-library jest-dom 庫才能使用。
不同的環境有不同的包，比如在 React Native 中，需要使用 @testing-library jest-native。
如果再次執行測試，則測試也應通過。
最後，讓我們寫這篇文章的最後乙個也是最重要的測試。 我們將編寫乙個測試來檢查單擊事件處理程式是否按預期工作。
為了生成使用者事件（例如點選和擊鍵），我們需要安裝另乙個包。
與之前的測試**相比，此測試**幾乎相同，只有一些細微的差異。
注意：由於它模擬使用者事件，因此此函式是非同步執行的。
在第一行開玩笑fn（） 是乙個模擬函式。 它允許您在測試執行時跟蹤許多有用的資訊，例如呼叫引數、呼叫次數等。 像這樣的函式，你稍後會看到很多。
我們還使用了新的查詢方法 getbyrole 來查詢按鈕元素。
在檢查是否呼叫了 mock 函式之前，我們需要等待 click 事件完成。
就是這樣！如果執行測試，它們也應該通過。
獲取全部 **：：
如果按照本文成功完成了測試的編寫，則可以開始將測試新增到庫中，並進一步探索各種測試功能。
此外，我建議您了解有關以下內容的更多資訊：
getbytestid - 這是一種非常常見的查詢方法。 當其他方法失敗時，可以使用它。 了解設定和拆卸方法。 它將提公升您的測試。 了解如何模擬 npm 模組、API 呼叫、全域性狀態和上下文等。 原文鏈結：React Unit Testing Examples： A Quick Start Guide Architecture Frameworks InfoQ 專題文章。