Using with webpack

优质

小牛编辑

135浏览

2023-12-01

Jest 可以用于使用 webpack 来管理资源、样式和编译的项目中。 webpack 确实相比超过其他类似工具来说，展示出一些特有的优势，因为它直接与你的app整合，允许管理资源文件，如图像和字体，并带有可以将系统编译为JavaScript 语言和工具。

Webpack 示例

我们通过以下常见的webpack 配置文件，将其转化为符合Jest使用的配置。

// webpack.config.js
module.exports = {
  module: {
    loaders: [
      {exclude: ['node_modules'], loader: 'babel', test: /\.jsx?$/},
      {loader: 'style-loader!css-loader', test: /\.css$/},
      {loader: 'url-loader', test: /\.gif$/},
      {loader: 'file-loader', test: /\.(ttf|eot|svg)$/},
    ],
  },
  resolve: {
    alias: {
      config$: './configs/app-config.js',
      react: './vendor/react-master',
    },
    extensions: ['', 'js', 'jsx'],
    modules: [
      'node_modules',
      'bower_components',
      'shared',
      '/shared/vendor/modules',
    ],
  },
};

If you have JavaScript files that are transformed by Babel, you can enable support for Babel by installing the babel-jest plugin. Non-Babel JavaScript transformations can be handled with Jest's transform config option.

处理静态文件

接下来，让我们配置Jest，使其优雅地处理资源文件，如样式表和图像。通常，这些文件在测试中无足轻重，因为我们可以安全地mock他们。然而，如果你使用CSS模块，那么最好是给你的类名查找模拟一个代理。

// package.json
{
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

所有mock文件本身:

// __mocks__/styleMock.js

module.exports = {};

// __mocks__/fileMock.js

module.exports = 'test-file-stub';

模拟 CSS 模块

你可以使用 ES6 Proxy来模拟一个 CSS :

yarn add --dev identity-obj-proxy

然后在样式对象上，你的所有className查找都会原样返回 (如 styles.foobar === 'foobar') 这对React的Snapshot Testing是相当方便的.

// package.json (for CSS Modules)
{
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    }
  }
}

Notice that Proxy is enabled in Node 6 by default. If you are not on Node 6 yet, make sure you invoke Jest using node --harmony_proxies node_modules/.bin/jest.

If moduleNameMapper cannot fulfill your requirements, you can use Jest's transform config option to specify how assets are transformed. For example, a transformer that returns the basename of a file (such that require('logo.jpg'); returns 'logo') can be written as:

// fileTransformer.js
const path = require('path');

module.exports = {
  process(src, filename, config, options) {
    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
  },
};

// package.json (for custom transformers and CSS Modules)
{
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "transform": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"
    }
  }
}

我们已经告知Jest忽略相关匹配的样式表或者图像文件，相反，导入我们的模拟文件。你可以通过调整正规表达式来匹配webpack可以处理的文件类型。

注：如果你bael-jest和额外的代码预处理器，你必须明确的定义babel-jest为你的Js代码的转换器，并且你需要映射所有.js文件到babel-jest模块。

"transform": {
  "^.+\\.js$": "babel-jest",
  "^.+\\.css$": "custom-transformer",
  ...
}

配置Jest来搜寻文件

现在Jest知道如何处理我们的文件了，接下来我们需要告诉它如何找到它们。 webpack的modulesDirectories, 和 extensions 选项都是和Jest的moduleDirectories 和 moduleFileExtensions选项类似的.

// package.json
{
  "jest": {
    "moduleFileExtensions": ["js", "jsx"],
    "moduleDirectories": ["node_modules", "bower_components", "shared"],

    "moduleNameMapper": {
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
    }
  }
}

Note: <rootDir> is a special token that gets replaced by Jest with the root of your project. Most of the time this will be the folder where your package.json is located unless you specify a custom rootDir option in your configuration.

同样 webpack的 resolve.root 选项，如设置的 NODE_PATH env变量，都可以设置或使用 modulePaths 选项。

// package.json
{
  "jest": {
    "modulePaths": ["/shared/vendor/modules"],
    "moduleFileExtensions": ["js", "jsx"],
    "moduleDirectories": ["node_modules", "bower_components", "shared"],
    "moduleNameMapper": {
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
    }
  }
}

And finally, we have to handle the webpack alias. For that we can make use of the moduleNameMapper option again.

// package.json
{
  "jest": {
    "modulePaths": ["/shared/vendor/modules"],
    "moduleFileExtensions": ["js", "jsx"],
    "moduleDirectories": ["node_modules", "bower_components", "shared"],

    "moduleNameMapper": {
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js",

      "^react(.*)$": "<rootDir>/vendor/react-master$1",
      "^config$": "<rootDir>/configs/app-config.js"
    }
  }
}

配置完成。 webpack 是一个复杂和灵活的工具，所以你可能需要做一些调整，以符合你的特定应用的需要。幸运的是对于大多数项目来说，使用Jest来处理webpack配置，应该会更灵活。

注︰对于更复杂的 webpack 配置，你可能需要研究一些项目，例如︰ babel-plugin-webpack-loaders。

使用 webpack 2

webpack 2 提供原生支持ES模块。 However, Jest runs in Node, and thus requires ES modules to be transpiled to CommonJS modules. As such, if you are using webpack 2, you most likely will want to configure Babel to transpile ES modules to CommonJS modules only in the test environment.

// .babelrc
{
  "presets": [["env", {"modules": false}]],

  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

Note: Jest caches files to speed up test execution. If you updated .babelrc and Jest is still not working, try running Jest with --no-cache.

If you use dynamic imports (import('some-file.js').then(module => ...)), you need to enable the dynamic-import-node plugin.

// .babelrc
{
  "presets": [["env", {"modules": false}]],

  "plugins": ["syntax-dynamic-import"],

  "env": {
    "test": {
      "plugins": ["dynamic-import-node"]
    }
  }
}

For an example of how to use Jest with Webpack with React, Redux, and Node, you can view one here.