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.

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

Add enzyme/webpack entrypoint with getPluginsForInstalledReact function #895

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
15 changes: 7 additions & 8 deletions docs/guides/karma.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ See the [webpack guide](webpack.md).
```js
/* karma.conf.js */

webpack: { //kind of a copy of your webpack config
devtool: 'inline-source-map', //just do inline source maps instead of the default
webpack: { // kind of a copy of your webpack config
devtool: 'inline-source-map', // just do inline source maps instead of the default
module: {
loaders: [
{
Expand All @@ -25,15 +25,14 @@ webpack: { //kind of a copy of your webpack config
query: {
presets: ['airbnb']
}
},
{
test: /\.json$/,
loader: 'json-loader',
}
]
},
externals: {
'cheerio': 'window',
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
}
plugins: require('enzyme/webpack').getPluginsForInstalledReact(),
},
```

Expand Down
65 changes: 16 additions & 49 deletions docs/guides/webpack.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,76 +5,43 @@ 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 and React 15.

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 you include `IgnorePlugin`s for
the conditional dependencies not needed for your version of `react`.

```
cheerio
react/addons
react/lib/ReactContext
react/lib/ExecutionEnvironment
```
Enzyme exports a function returning the `IgnorePlugin`s needed for the version of `react` you have installed.

Depending on if you are using Webpack 1 or Webpack 2 you will need different configurations.
Depending on if you are using Webpack 1 or Webpack 2 you will need different additions to your configuration.

### Webpack 1

```js
/* webpack.config.js */
// ...
externals: {
'cheerio': 'window',
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
{
plugins: require('enzyme/webpack').getPluginsForInstalledReact(),
loaders: {
{
test: /\.json$/,
loader: 'json-loader',
},
}
}
// ...
```

### Webpack 2

```js
externals: {
'cheerio': 'window',
'react/addons': 'react',
'react/lib/ExecutionEnvironment': 'react',
'react/lib/ReactContext': 'react',
},
```


## 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:

```js
/* webpack.config.js */
// ...
externals: {
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
{
plugins: require('enzyme/webpack').getPluginsForInstalledReact(),
}
// ...
```


## Example Projects

- [enzyme-example-karma-webpack](https://github.com/lelandrichardson/enzyme-example-karma-webpack)
35 changes: 1 addition & 34 deletions karma.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,6 @@

require('babel-register');

var IgnorePlugin = require('webpack').IgnorePlugin;
var REACT013 = require('./src/version').REACT013;
var REACT155 = require('./src/version').REACT155;

function getPlugins() {
var plugins = [];

/*
this list of conditional IgnorePlugins mirrors the conditional
requires in src/react-compat.js and exists to avoid error
output from the webpack compilation
*/

if (!REACT013) {
plugins.push(new IgnorePlugin(/react\/lib\/ExecutionEnvironment/));
plugins.push(new IgnorePlugin(/react\/lib\/ReactContext/));
plugins.push(new IgnorePlugin(/react\/addons/));
}
if (REACT013) {
plugins.push(new IgnorePlugin(/react-dom/));
}
if (REACT013 || REACT155) {
plugins.push(new IgnorePlugin(/react-addons-test-utils/));
}
if (!REACT155) {
plugins.push(new IgnorePlugin(/react-test-renderer/));
plugins.push(new IgnorePlugin(/react-dom\/test-utils/));
plugins.push(new IgnorePlugin(/create-react-class/));
}

return plugins;
}

module.exports = function karma(config) {
config.set({
basePath: '.',
Expand Down Expand Up @@ -101,7 +68,7 @@ module.exports = function karma(config) {
},
],
},
plugins: getPlugins(),
plugins: require('./src/webpack').getPluginsForInstalledReact(),
},

webpackServer: {
Expand Down
33 changes: 33 additions & 0 deletions src/webpack.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import { IgnorePlugin } from 'webpack';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately this means we have yet another implicit dependency :-/

Theoretically it's a safe one, if someone's importing the "webpack" entry point they're likely to have webpack available, but there's no way to declare version compatibility.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know :(
Another concern is that we'd be introducing a new API that we must remove once we release the rewrite with adapters...


import { REACT013, REACT155 } from './version';

// eslint-disable-next-line import/prefer-default-export
export function getPluginsForInstalledReact() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have any future plans for any other exports from this entry point, such that this shouldn't be the default export?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not really, i made it a named export to make the name of the function clarify what it does

const plugins = [];

/*
this list of conditional IgnorePlugins mirrors the conditional
requires in src/react-compat.js
*/

if (!REACT013) {
plugins.push(new IgnorePlugin(/react\/lib\/ExecutionEnvironment/));
plugins.push(new IgnorePlugin(/react\/lib\/ReactContext/));
plugins.push(new IgnorePlugin(/react\/addons/));
}
if (REACT013) {
plugins.push(new IgnorePlugin(/react-dom/));
}
if (REACT013 || REACT155) {
plugins.push(new IgnorePlugin(/react-addons-test-utils/));
}
if (!REACT155) {
plugins.push(new IgnorePlugin(/react-test-renderer/));
plugins.push(new IgnorePlugin(/react-dom\/test-utils/));
plugins.push(new IgnorePlugin(/create-react-class/));
}

return plugins;
}
1 change: 1 addition & 0 deletions webpack.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require('./build/webpack');