Enzyme: Webpack tries to bundle `react-addons-test-utils` when it is not needed

[donaldpipowitch]

I use the newest version of enzyme, react-dom and react-test-renderer and I shouldn't need react-addons-test-utils anymore. But it looks like enzyme still requires react-addons-test-utils in webpack projects.

ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Can't resolve 'react-addons-test-utils' in '/Users/foo/bar/node_modules/enzyme/build'
 @ ./~/enzyme/build/react-compat.js 143:20-54

I think it comes from this try/catch-block. It looks like requireing react-dom/test-utils and/or react-test-renderer/shallow fail while bundling (or: they are bundled at build time and something fails inside this try/catch at runtime), so it tries to get react-addons-test-utils. Or does webpack try to bundled things inside a catch by default?

A special handling for react-addons-test-utils in webpack projects currently isn't mentioned in the docs.

[donaldpipowitch]

It looks like it works, if react-addons-test-utils is flagged as external in your webpack config:

{
  entry,
  output,
  // ...
  externals:  [
    'react/lib/ExecutionEnvironment',
    'react/lib/ReactContext',
    'react/addons',
    'react-addons-test-utils'  // NEW
  ]
}

[ljharb]

Seems like we may need to update the docs?

[jwbay]

Or does webpack try to bundled things inside a catch by default?

FWIW, yes. Webpack is pretty aggressive about bundling everything it thinks you need. It doesn't care what language construct the require statement is in; if it sees it, it's going to bundle the package.

[thiagodebastos]

FYI these are the warnings I get when running a simple test with jest:

console.error node_modules/fbjs/lib/warning.js:36
      Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning.
console.error node_modules/fbjs/lib/warning.js:36
      Warning: Shallow renderer has been moved to react-test-renderer/shallow. Update references to remove this warning.

https://github.com/airbnb/enzyme/issues/968#issuecomment-305735018 didn't help in my case.

"react-addons-test-utils": "^15.5.1"
"react": "^15.5.4"
"react-dom": "^15.5.4"

PS: Attempting to run enzyme on [email protected] gives the bug relating to requestAnimationFrame.

[ljharb]

Note that React 16 doesn't exist yet; and alphas are not supported.

[benbarber]

@thiagodebastos try removing react-addons-test-utils as a dependency and then installing react-test-renderer instead. That fixed the warnings for me when running jest.

[resting]

With "enzyme": "^2.9.1" and react-test-renderer": "^15.6.1" .
I get some weird console.log after the test ends.

Watch Usage
 › Press a to run all tests.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.
  console.log src/pages/shared/menu/collapsed.test.js:10
    ShallowWrapper {
      root: [Circular],
      unrendered: 
       { '$$typeof': Symbol(react.element),
         type: [Function: Collapsed],
         key: null,
         ref: null,
         props: {},
         _owner: null,
         _store: {} },
  ...

edit: My bad. It was from my test :)

[hansmosh]

Looks like the solution is documented here: https://github.com/airbnb/enzyme/blob/master/docs/guides/webpack.md#react-15-compatibility