Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update webpack.md to clarify what the config does #657

Closed
wants to merge 2 commits into from
Closed

Update webpack.md to clarify what the config does #657

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c1eb410
Remove `cheerio` as it's no longer optional depending on React versio…
wyuenho Nov 4, 2016
857c715
Merge branch 'master' into patch-1
wyuenho Nov 15, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 22 additions & 30 deletions docs/guides/webpack.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,50 +5,28 @@ If you are using a test runner that runs code in a browser-based environment, yo

Webpack uses static analysis to create a dependency graph at build-time of your source code to
build a bundle. Enzyme has a handful of conditional `require()` calls in it in order to remain
compatible with React 0.13 and React 0.14.
compatible with React 0.13 and React 0.14+.

Unfortunately, these conditional requires mean there is a bit of extra setup with bundlers like
webpack.

In your webpack configuration, you simply need to make sure that the following files are
labeled as "external", which means they will be ignored:
In your webpack configuration, you simply need to make sure that the following requirements are
labeled as "external", which prevents Webpack from shimming the requirements for them:

```
cheerio
react/addons
react/lib/ReactContext
react/lib/ExecutionEnvironment
```

Here is an example piece of configuration code marking these as external:
## React 0.13 Compatibility

```js
/* webpack.config.js */
// ...
externals: {
'cheerio': 'window',
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
'react-dom': true,
'react-dom/server': true,
'react-addons-test-utils': true
}
// ...
```

## React 0.14 Compatibility

If you are using React 0.14, the instructions above will be the same but with a different list of
externals:

```
cheerio
react-dom
react-dom/server
react-addons-test-utils
```

## React 15 Compatibility

If you are using React 15, your config should include these externals:
## React 0.14+ Compatibility

```js
/* webpack.config.js */
Expand All @@ -61,6 +39,20 @@ externals: {
// ...
```

Alternatively, you can use the [IgnorePlugin](http://webpack.github.io/docs/list-of-plugins.html#ignoreplugin) to make this more explicit.

```js
/* webpack.config.js */
// ...
plugins: [
// change the requirement request regexs if you are using React 0.13
// and want to ignore the React 0.14+ modules instead.
new webpack.IgnorePlugin(/react\/addons/),
new webpack.IgnorePlugin(/react\/lib\/ReactContext/),
new webpack.IgnorePlugin(/react\/lib\/ExecutionEnvironment/)
]// ...
```

## Example Projects

- [enzyme-example-karma-webpack](https://github.com/lelandrichardson/enzyme-example-karma-webpack)