Let's start with a common sort of webpack config file and translate it to a Jest setup.
transform config option.
Next, let's configure Jest to gracefully handle asset files such as stylesheets and images. Usually, these files aren't particularly useful in tests so we can safely mock them out. However, if you are using CSS Modules then it's better to mock a proxy for your className lookups.
And the mock files themselves:
Then all your className lookups on the styles object will be returned as-is (e.g.,
styles.foobar === 'foobar'). This is pretty handy for React Snapshot Testing.
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.
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
'logo') can be written as:
We've told Jest to ignore files matching a stylesheet or image extension, and instead, require our mock files. You can adjust the regular expression to match the file types your webpack config handles.
.js files to the babel-jest module.
Now that Jest knows how to process our files, we need to tell it how to find them. For webpack's
extensions options there are direct analogs in Jest's
<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.jsonis located unless you specify a custom
rootDiroption in your configuration.
resolve.root option functions like setting the
NODE_PATH env variable, which you can set, or make use of the
And finally, we have to handle the webpack
alias. For that, we can make use of the
moduleNameMapper option again.
That's it! webpack is a complex and flexible tool, so you may have to make some adjustments to handle your specific application's needs. Luckily for most projects, Jest should be more than flexible enough to handle your webpack config.
Note: For more complex webpack configurations, you may also want to investigate projects such as: babel-plugin-webpack-loaders.
webpack 2 offers native support for ES modules. 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
Note: Jest caches files to speed up test execution. If you updated .babelrc and Jest is still not working, try running Jest with
If you use dynamic imports (
import('some-file.js').then(module => ...)), you need to enable the
For an example of how to use Jest with Webpack with React, Redux, and Node, you can view one here.