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

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

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

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

    所有mock文件本身:

    1. // __mocks__/styleMock.js
    3. module.exports = {};
    1. // __mocks__/fileMock.js
    3. module.exports = 'test-file-stub';

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

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

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

    If moduleNameMapper cannot fulfill your requirements, you can use Jest's 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:

    1. // fileTransformer.js
    2. const path = require('path');
    4. module.exports = {
    5.     return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
    6.   },
    7. };
    2. {
    3.   "jest": {
    4.     "moduleNameMapper": {
    5.       "\\.(css|less)$": "identity-obj-proxy"
    6.     },
    7.     "transform": {
    8.       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"
    9.     }
    10.   }
    11. }

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

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

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

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

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

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

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

    使用 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.

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

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

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