diff --git a/docs/Webpack.md b/docs/Webpack.md index 71f9cc607b8f..f9bdc768bbd4 100644 --- a/docs/Webpack.md +++ b/docs/Webpack.md @@ -143,7 +143,11 @@ Now that Jest knows how to process our files, we need to tell it how to _find_ t } ``` -> Note: `` 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. +:::info + +`` 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. + +::: Similarly, webpack's `resolve.root` option functions like setting the `NODE_PATH` env variable, which you can set, or make use of the `modulePaths` option. @@ -183,7 +187,11 @@ And finally, we have to handle the webpack `alias`. For that, we can make use of 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](https://github.com/istarkov/babel-plugin-webpack-loaders). +:::tip + +For more complex webpack configurations, you may also want to investigate projects such as: [babel-plugin-webpack-loaders](https://github.com/istarkov/babel-plugin-webpack-loaders). + +::: ## Using with webpack 2 @@ -201,7 +209,13 @@ webpack 2 offers native support for ES modules. However, Jest runs in Node, and } ``` -> 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`. +:::tip + +Jest caches files to speed up test execution. If you updated `.babelrc` and Jest is not working as expected, try clearing the cache by running `jest --clearCache`. + +::: + +:::tip If you use dynamic imports (`import('some-file.js').then(module => ...)`), you need to enable the `dynamic-import-node` plugin. @@ -219,4 +233,6 @@ If you use dynamic imports (`import('some-file.js').then(module => ...)`), you n } ``` +::: + For an example of how to use Jest with webpack with React, Redux, and Node, you can view one [here](https://github.com/jenniferabowd/jest_react_redux_node_webpack_complex_example).