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)。