Jest與Webpack集成指南

Jest 和 Webpack 都是流行的 JavaScript 工具，可以很好地協同工作。Jest 是一個測試框架，用于編寫和運行測試；Webpack 是一個模塊打包器，用于編譯和優化前端代碼。將 Jest 與 Webpack 集成意味著你可以使用 Webpack 的功能（如加載器、插件等）來處理 Jest 測試中的模塊。

以下是將 Jest 與 Webpack 集成的基本步驟：

1. 安裝依賴

首先，確保你已經安裝了 Node.js 和 npm。然后，在項目根目錄下運行以下命令，安裝 Jest 和 Webpack 相關的依賴：

npm install --save-dev jest webpack webpack-cli babel-loader @babel/core @babel/preset-env

2. 配置 Babel

創建一個名為 .babelrc 的文件，用于配置 Babel。這里我們使用 @babel/preset-env 預設，它可以將 ES6+ 代碼轉換為 ES5 代碼，以確保在不同瀏覽器中的兼容性。

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

3. 配置 Webpack

創建一個名為 webpack.config.js 的文件，用于配置 Webpack。在這個文件中，我們需要定義一個入口點（entry point），指定輸出文件的名稱和路徑，以及使用 Babel 加載器處理 JavaScript 文件。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

4. 配置 Jest

在 package.json 文件中，添加一個名為 jest 的字段，用于配置 Jest。我們需要告訴 Jest 使用 Webpack 處理測試文件，并指定 Webpack 配置文件的路徑。

{
  "jest": {
    "transform": {
      "^.+\\.(js|jsx)$": "babel-jest"
    },
    "transformIgnorePatterns": ["/node_modules/"],
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.js?$",
    "moduleFileExtensions": ["js", "json", "jsx"],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "setupFilesAfterEnv": ["<rootDir>/setupTests.js"]
  }
}

5. 創建測試文件

在項目中創建一個名為 __tests__ 的文件夾，用于存放測試文件。在這個文件夾中，你可以編寫針對項目中不同功能的測試。

例如，創建一個名為 example.test.js 的測試文件：

import sum from '../src/sum';

describe('sum', () => {
  it('adds two numbers', () => {
    expect(sum(1, 2)).toBe(3);
  });
});

6. 運行測試

在 package.json 文件中的 scripts 字段中添加一個名為 test 的腳本，用于運行 Jest。

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

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

這就是將 Jest 與 Webpack 集成的基本指南。你可以根據項目的需求進一步自定義配置，例如添加更多的 Webpack 加載器、插件或 Jest 插件。