Webpack 和 Jest

Facebook 使用 Jest 來測試所有 JavaScript 程式碼，包括 React 應用程式。Jest 的一個理念是提供一個整合的零配置體驗。我們觀察到，當工程師提供即用型工具時，他們最終會編寫更多測試，從而產生更穩定和健康的程式碼庫。

完整的工作示例在 GitHub 上可用作 web-components-webpack-es6-boilerplate

Jest 使用 jsdom 在 NodeJS 環境中執行測試。整個過程很簡單。讓我們考慮以下 webpack 設定，假設我們的專案結構如下所示：

-src
    --client
    --server
-webpack
    --config.js
package.json

一個簡單的目錄結構，旨在將 server render 邏輯與其餘邏輯分開。 Webpack config.js 檔案將包含以下模組：

  resolve: {
    modules: ["node_modules"],
    alias: {
      client: path.join(__dirname, "../src/client"),
      server: path.join(__dirname, "../src/server")
    },
    extensions: [".js", ".json", ".scss"]
  },

我們可以設定 Jest 來反映我們的 Webpack 配置。

module.exports = {
  setupTestFrameworkScriptFile: "<rootDir>/bin/jest.js",
  mapCoverage: true,
  moduleFileExtensions: ["js", "scss", "html"],
  moduleDirectories: ["node_modules"],
  moduleNameMapper: {
    "src/(.*)$": "<rootDir>/src/$1"
  },
  transform: {
    "^.+\\.(js|html|scss)$": "<rootDir>/bin/preprocessor.js"
  },
  testMatch: ["<rootDir>/test/**/?(*.)(spec|test).js"],
  testPathIgnorePatterns: ["<rootDir>/(node_modules|bin|build)"]
};

我們應該在哪裡儲存這個配置？

我們可以在 jest 金鑰下的 package.json 檔案中建立它，或者在專案根目錄中建立如示例 jest.config.js 檔案。

我們想要實現的是確保我們的 html 檔案將被正確匯入。這意味著通過自定義 preprocessor 轉義它們，因為只使用 babel-jest 會在嘗試解析非 js 檔案時丟擲錯誤。

另一個重要的事情是 setupTestFrameworkScriptFile 指令碼，實際上包括 custom elements polyfills 到 jsdom。以下是我們的 preprocessor.js 的樣子：

const babelJest = require("babel-jest");

const STYLE_URLS_REGEX = /styles:\s*\[\s*((?:'|").*\s*(?:'|")).*\s*.*\]/g;
const ESCAPE_TEMPLATE_REGEX = /(\${|\`)/g;

module.exports.process = (src, path, config) => {
  if (path.endsWith(".html")) {
    src = src.replace(ESCAPE_TEMPLATE_REGEX, "\$1");
    src = "module.exports=` + src + `;";
  }
  src = src.replace(STYLE_URLS_REGEX, "styles: []");

  return babelJest.process(src, path, config);
};

這個指令碼的作用很簡單：刪除樣式檔案內容，因為我們不需要/想要測試它，以及轉義模板，當我們匯入它們時，例如使用 require('template.html') 語法。然後它將內容傳遞給 babel 變壓器。

最後一件重要的事情是包括 web components polyfills。預設情況下，jsdom 尚不支援它們。要做到這一點，我們可以簡單地在我們的示例中新增 setupTestFrameworkScriptFile，它是 jest.js，具有以下內容：

require("document-register-element/pony")(window);

這樣我們就可以在 jsdom 中訪問 web components API 了。

設定完所有後我們應該有這樣的結構：

-bin
    --jest.js
    --preprocessor.js
-src
    --client
    --server
-webpack
    --config.js
-test
package.json
jest.config.js

我們將測試儲存在 test 目錄中，並可以使用命令執行：yarn run jest --no-cache --config $(node jest.config.js)。