使用 webpack

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

Webpack 示例

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

webpack.config.js

  1. module.exports = {
  2. module: {
  3. loaders: [
  4. {exclude: ['node_modules'], loader: 'babel', test: /\.jsx?$/},
  5. {loader: 'style-loader!css-loader', test: /\.css$/},
  6. {loader: 'url-loader', test: /\.gif$/},
  7. {loader: 'file-loader', test: /\.(ttf|eot|svg)$/},
  8. ],
  9. },
  10. resolve: {
  11. alias: {
  12. config$: './configs/app-config.js',
  13. react: './vendor/react-master',
  14. },
  15. extensions: ['', 'js', 'jsx'],
  16. modules: [
  17. 'node_modules',
  18. 'bower_components',
  19. 'shared',
  20. '/shared/vendor/modules',
  21. ],
  22. },
  23. };

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. Non-Babel JavaScript transformations can be handled with Jest’s transform config option.

处理静态文件

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

package.json

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

所有mock文件本身:

__mocks__/styleMock.js

  1. module.exports = {};

__mocks__/fileMock.js

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

模拟 CSS 模块

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

  1. yarn add --dev identity-obj-proxy

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

package.json (for CSS Modules)

  1. {
  2. "jest": {
  3. "moduleNameMapper": {
  4. "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
  5. "\\.(css|less)$": "identity-obj-proxy"
  6. }
  7. }
  8. }

请注意在Node 6是默认启用Proxy。 如果你不是Node 6,请确保你通过调用 node --harmony_proxies node_modules/.bin/jest来使用Jest。

如果 moduleNameMapper 不能满足你的需要,你就需要使用Jest的transform 来自定义对那些文件后缀应该如何转译。 例如,一个输出不带文件后缀的文件名 (such that require('logo. jpg'); returns 'logo') 应该这样写:

fileTransformer.js

  1. const path = require('path');
  2. module.exports = {
  3. process(src, filename, config, options) {
  4. return `module.exports = ${JSON.stringify(path.basename(filename))};`;
  5. },
  6. };

package.json (for custom transformers and CSS Modules)

  1. {
  2. "jest": {
  3. "moduleNameMapper": {
  4. "\\.(css|less)$": "identity-obj-proxy"
  5. },
  6. "transform": {
  7. "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"
  8. }
  9. }
  10. }

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

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

  1. "transform": {
  2. "\\.js$": "babel-jest",
  3. "\\.css$": "custom-transformer",
  4. ...
  5. }
  6. }

配置Jest来搜寻文件

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

package.json

  1. {
  2. "jest": {
  3. "moduleFileExtensions": ["js", "jsx"],
  4. "moduleDirectories": ["node_modules", "bower_components", "shared"],
  5. "moduleNameMapper": {
  6. "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
  7. "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
  8. }
  9. }
  10. }

提示: <rootDir> 代表项目根目录。 大多数情况下,这代表你的package.json所在的位置,除非你在项目配置中自定义了rootDir

类似的,Webpack的resolve.rootNODE_PATH环境变量都可以使用 modulePaths选项。

package.json

  1. {
  2. "jest": {
  3. "modulePaths": ["/shared/vendor/modules"],
  4. "moduleFileExtensions": ["js", "jsx"],
  5. "moduleDirectories": ["node_modules", "bower_components", "shared"],
  6. "moduleNameMapper": {
  7. "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
  8. "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
  9. }
  10. }
  11. }

最后,我们关注一下Webpack的alias。 在这里,我们可以再次使用 moduleNameMapper

package.json

  1. {
  2. "jest": {
  3. "modulePaths": ["/shared/vendor/modules"],
  4. "moduleFileExtensions": ["js", "jsx"],
  5. "moduleDirectories": ["node_modules", "bower_components", "shared"],
  6. "moduleNameMapper": {
  7. "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
  8. "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js",
  9. "^react(.*)$": "<rootDir>/vendor/react-master$1",
  10. "^config$": "<rootDir>/configs/app-config.js"
  11. }
  12. }
  13. }

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

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

使用 webpack 2

webpack 2 提供原生支持ES模块。 然而,Jest在Node中使用时需要将ES模块转化为CommonJS模块。 因此,如果你使用webpack 2,你也可能希望能配置Babel在test环境能将ES模块转化为CommonJS模块。

  1. // .babelrc
  2. {
  3. "presets": [["env", {"modules": false}]],
  4. "env": {
  5. "test": {
  6. "plugins": ["transform-es2015-modules-commonjs"]
  7. }
  8. }
  9. }

注意:Jest会通过缓存文件来加速测试的执行。 如果你更新了 .babelrc 文件,但是Jest还是不工作,尝试加入--no-cache参数来运行Jest。

如果你使用动态加载 (import('some-file.js').then(module => ...)),你还需要引入Babel的动态加载插件( dynamic-import-node )。

  1. // .babelrc
  2. {
  3. "presets": [["env", {"modules": false}]],
  4. "plugins": ["syntax-dynamic-import"],
  5. "env": {
  6. "test": {
  7. "plugins": ["dynamic-import-node"]
  8. }
  9. }
  10. }

这里有关于在Webpack+React+Redux或Node的使用说明。