如何設置 Jest 進行 React 測試？
已發表: 2023-07-26隨著越來越多的開發人員採用 React 作為他們選擇的前端框架，確保我們編寫的代碼具有最高質量變得越來越重要。 質量保證的一個重要方面是測試，Jest 是一種流行的測試框架，經常與 React 一起使用。
Jest 是一個由 Facebook 構建的開源測試框架，旨在使 JavaScript 代碼的測試盡可能簡單高效。 它速度快，具有易於使用的 API，並附帶許多內置功能，使測試變得輕而易舉。
在本文中，我們將指導您完成為 React 測試設置 Jest 的過程。 我們將涵蓋您開始時需要了解的所有內容，從安裝 Jest 到編寫您的第一個測試用例。
React 測試的玩笑
Jest 是一個流行的測試框架，用於測試 React 應用程序。 它由 Facebook 創建，以其易用性和快速設置時間而聞名。 Jest 旨在與 React 開箱即用，並提供許多功能來使測試變得更容易。
以下是一些使 Jest 成為測試 React 應用程序的流行選擇的功能：
i) 快照測試： Jest 提供快照測試功能，允許您將組件的當前輸出與之前存儲的快照進行比較。 這樣可以輕鬆檢查組件的輸出是否發生了任何意外的更改。
ii) 模擬： Jest 提供內置模擬功能，允許您創建模擬函數和模塊。 當您需要模擬不易獲得或難以測試的功能或模塊的行為時，這非常有用。
iii) 代碼覆蓋率： Jest 提供代碼覆蓋率報告，顯示測試覆蓋的代碼百分比。 這對於識別代碼中未經測試且可能需要額外注意的區域非常有用。
iv) 異步測試： Jest 通過提供管理異步代碼的實用程序，使測試異步代碼變得容易。 這允許您編寫測試，在做出斷言之前等待 Promise 或其他異步代碼解析。
v) 輕鬆設置： Jest 很容易為您的 React 應用程序設置和配置。 它具有開箱即用的默認配置，但可以進行自定義以滿足您的特定需求。
總的來說，Jest 是一個強大而靈活的測試框架，可以輕鬆測試 React 應用程序。 它的眾多功能和簡單的設置使其成為想要為其 React 組件編寫可靠測試的開發人員的流行選擇。
設置 Jest 進行 React 測試
您需要遵循某些步驟來設置 Jest 以進行 2023 年的 React 測試。
1）安裝笑話
Jest 可以使用npm 或yarn 安裝在您的項目中。 以下是使用 npm 安裝 Jest 的步驟：
i) 打開終端或命令提示符並導航到項目目錄。
ii) 運行以下命令將 Jest 安裝為項目中的開發依賴項：
npm install –save-dev 玩笑
此命令將安裝 Jest 並將其添加到項目的 package.json 文件的 devDependencies 部分下。
安裝完成後，您可以開始使用 Jest 編寫測試。 您可以使用 npm test 命令運行測試。 默認情況下，Jest 會查找以.test.js或.spec.js擴展名命名的測試文件。 但是，您可以通過修改 Jest 配置文件中的 testMatch 屬性來配置 Jest 以查找具有其他擴展的測試。
就是這樣！ 您現在已經在項目中安裝了 Jest，並且可以開始為您的應用程序編寫測試。
2）創建配置文件
要為 Jest 創建配置文件，您可以在項目的根目錄中創建一個名為jest.config.js的文件。 該文件將包含 Jest 在運行測試時應使用的配置選項。
這是一個配置文件示例：
模塊. 導出 = {
// 指示哪些文件類型應被視為測試文件。
測試匹配：[
'**/__tests__/**/*.js?(x)',
'**/?(*.)+(spec|test).js?(x)'
],
// Jest 用於搜索文件的目錄路徑列表。
根：['<rootDir>/src']，
// 從正則表達式到變壓器路徑的映射。
轉換： {
'^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'
},
// Jest 用於檢測測試文件的 glob 模式。
測試路徑忽略模式：[
'<根目錄>/node_modules/',
'<根目錄>/build/'
],
// Jest 在撰寫報導報告時使用的記者姓名列表。
覆蓋率記者：['json', 'text', 'html'],
// 模塊使用的文件擴展名數組。
moduleFileExtensions: ['js', 'json', 'jsx']
};
此示例配置文件指定以下選項：
a) testMatch：指定用於識別測試文件的模式。
b) root：指定 Jest 應在其中查找文件的目錄。
c) 轉換：指定 Jest 在運行測試之前應應用於文件的轉換。
d) testPathIgnorePatterns：指定搜索測試文件時要忽略的模式。
e)coverageReporters：指定 Jest 應該用來生成覆蓋率報告的報告器。
f) moduleFileExtensions：指定 Jest 在搜索文件時應查找的文件擴展名。
您可以修改此配置文件以滿足您的項目的需要。 創建配置文件後，Jest 將在項目中運行測試時自動使用它。
3）編寫你的測試
一旦安裝了 Jest 並設置了配置文件，您就可以開始為 React 應用程序編寫測試。 以下是創建測試文件並編寫測試的步驟：
i)創建一個擴展名為.test.js或.spec.js的新文件。 這將是您的測試文件。
ii)在測試文件中，導入要測試的組件或功能：
從 './myFunctions' 導入 { sum } ；
iii)編寫你的測試。 測試是使用 Jest API 檢查組件或函數是否按預期運行的函數：
描述('總和', () => {
test('1 + 2 加起來等於 3', () => {
期望(sum(1, 2)).toBe(3);
});
});
在此示例中，我們正在測試一個將兩個數字相加的簡單求和函數。 描述函數將相關測試分組在一起，而測試函數指定單個測試用例。 Expect 函數檢查 sum 函數是否返回預期值。
iv)通過在項目目錄中執行 npm test 命令來運行測試。 Jest 將在您的項目中搜索測試文件並執行它找到的任何測試。
您可以根據需要添加任意數量的測試，以涵蓋組件或函數的所有功能。 Jest 提供了廣泛的匹配和其他實用程序，您可以使用它們來創建更複雜的測試。
通過為 React 應用程序編寫測試，您可以確保代碼按預期工作，並避免在更改代碼庫時引入回歸。
4) 運行測試
要使用 Jest 運行測試，您可以在項目目錄中使用 npm test 命令。 Jest 將自動檢測並運行項目中與 Jest 配置文件中指定的模式匹配的任何測試文件。
當您運行 npm test 時，Jest 將在控制台中輸出測試結果。 如果所有測試都通過，Jest 將顯示測試結果摘要：
通過 src/components/Example.test.js
✓ 渲染不會崩潰（21 毫秒）
測試套件：1 個通過，總共 1 個
測試：1 次通過，總共 1 次
快照： 共 0 個
時間：3.204s，預計4s
運行所有測試套件。
如果任何測試失敗，Jest 將顯示一條錯誤消息，描述失敗以及失敗測試的位置：
失敗 src/components/Example.test.js
- 示例組件 › 渲染而不會崩潰
類型錯誤：無法讀取未定義的屬性“映射”
10 | 10 使成為（） {
11 | 11 const { items } = this.props;
> 12 | return items.map(item => <div key={item.id}>{item.name}</div>);
| ^
13 | }
14 | 14 }
15 | 15
在Example.render (src/components/Example.js:12:17)
在 ReactTestRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1052:32)
在 Object.<anonymous> (src/components/Example.test.js:9:16)
測試套件：1 次失敗，總共 1 次
測試：1 次失敗，總共 1 次
快照： 共 0 個
時間：3.537s，預計4s
運行所有測試套件。
Jest 還提供了一系列可用於自定義測試行為的選項，例如在監視模式下運行測試、生成代碼覆蓋率報告等。 您可以在 Jest 文檔中找到有關這些選項的更多信息。
包起來
LambdaTest 是一個強大的基於雲的測試平台，可以與 Jest 結合使用來測試 React 應用程序。 通過利用 LambdaTest 基於雲的基礎架構的可擴展性，您可以在各種瀏覽器和設備上快速高效地運行 Jest 測試，確保您的應用程序在不同環境中按預期運行。
在本博客中，我們介紹了設置 Jest 來測試 React 應用程序所需的步驟。 我們還學習瞭如何配置 Jest 以使用 LambdaTest 作為測試環境、使用 Jest 編寫測試以及在 LambdaTest 的基於雲的基礎設施上執行測試。
結合使用 LambdaTest 和 Jest 為 React 開發人員提供了強大的測試解決方案，可以幫助他們在開發週期的早期捕獲回歸和錯誤，從而提高應用程序的整體質量。
因此，如果您希望簡化 React 測試工作流程，請考慮結合使用 LambdaTest 和 Jest 來為您的 React 應用程序實現全面、可擴展且高效的測試。