Jest測試環境配置詳解

Jest 是一個流行的 JavaScript 測試框架，它可以幫助你輕松地編寫和管理 JavaScript 測試。為了配置 Jest 測試環境，你需要遵循以下步驟：

1. 安裝 Jest：

   在項目根目錄下運行以下命令，將 Jest 添加到項目的開發依賴中：

   npm install --save-dev jest
   

   或者使用 yarn：

   yarn add --dev jest
   

2. 配置測試腳本：

   在 package.json 文件中，添加一個名為 test 的腳本，如下所示：

   "scripts": {
     "test": "jest"
   }
   

   現在，你可以通過運行 npm test 或 yarn test 來執行測試。

3. 創建測試文件：

   Jest 默認會查找以 .spec.js 或 .test.js 結尾的文件。你可以在項目中創建這些文件，并編寫相應的測試用例。例如，創建一個名為 sum.test.js 的文件，內容如下：

   const sum = require('./sum');
   
   test('adds 1 + 2 to equal 3', () => {
     expect(sum(1, 2)).toBe(3);
   });
   

4. 配置 Babel：

   如果你的項目使用了 ES6+ 語法，你需要配置 Babel 以確保 Jest 能夠正確地解析這些語法。首先，安裝 @babel/core 和 @babel/preset-env：

   npm install --save-dev @babel/core @babel/preset-env
   

   或者使用 yarn：

   yarn add --dev @babel/core @babel/preset-env
   

   然后，在項目根目錄下創建一個名為 .babelrc 的文件，并添加以下配置：

   {
     "presets": ["@babel/preset-env"]
   }
   

5. 配置 Jest：

   你可以通過在項目根目錄下創建一個名為 jest.config.js 的文件來自定義 Jest 的配置。以下是一個基本的 Jest 配置示例：

   module.exports = {
     verbose: true,
     collectCoverage: true,
     coverageDirectory: 'coverage',
     coverageReporters: ['text', 'lcov'],
     transform: {
       '^.+\\.js$': 'babel-jest',
     },
   };
   

   在這個配置中，我們啟用了詳細輸出（verbose），代碼覆蓋率收集（collectCoverage），并指定了代碼覆蓋率的輸出目錄（coverageDirectory）和報告格式（coverageReporters）。我們還配置了一個轉換器（transform），以便 Jest 能夠正確處理 ES6+ 語法。

6. 運行測試：

   現在，你可以通過運行 npm test 或 yarn test 來執行測試。Jest 將自動查找并運行所有測試文件，并生成一個詳細的測試報告。

這就是 Jest 測試環境的基本配置。你可以根據項目的需求進一步自定義 Jest 的配置，以滿足你的測試需求。更多關于 Jest 的信息和配置選項，請參考官方文檔：https://jestjs.io/docs/zh-Hans/getting-started。