Enzyme: Cannot resolve module 'react/addons'

[dannymk]

React: 15.2.1

ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Cannot resolve module 'react/addons' in ./node_modules/enzyme/build
@ ./~/enzyme/build/react-compat.js 40:16-39 41:46-69

[blainekasten]

Do you have react-addons-test-utils installed?

[aweary]

Are you sure you're using React 15.2.1? That require statement is only supposed to run for React 13.x.

if (REACT013) {
  renderToStaticMarkup = React.renderToStaticMarkup;
  /* eslint-disable react/no-deprecated */
  findDOMNode = React.findDOMNode;
  unmountComponentAtNode = React.unmountComponentAtNode;
  /* eslint-enable react/no-deprecated */
  TestUtils = require('react/addons').addons.TestUtils;
  batchedUpdates = require('react/addons').addons.batchedUpdates;
  // ...
}

If you can provide a reproducible case that would be great.

[dannymk]

npm version react: ... version: '15.2.1', ...
npm view react-addons-test-utils: ... version: '15.2.1', ...

so they are both installed and what I mentioned earlier.

From another post I figured out that I had to modify: cfg/test.js
The json loader was obviously important.

Regardless I have it working now. Thank you for your help.

[aweary]

Regardless I have it working now. Thank you for your help.

Glad to hear it!

[owencorpening]

Wait! What fixed the react/addons bug??

[dannymk]

https://github.com/newtriks/generator-react-webpack/issues/256

[marcinbridge]

Add to karma.conf:

...
webpack: {
  ...
  externals: {
      ...
      'react/addons': true,
   },

  },

[dtothefp]

Just an FYI on this I have a minimal use case repo which shows the errors

Webpack2
https://github.com/dtothefp/karma-webpack-enzyme/blob/master/karma.conf.js#L43

Webpack1
https://github.com/dtothefp/karma-webpack-enzyme/blob/webpack1/karma.conf.js#L43

In both cases I have to add

externals: {
  'jsdom': 'window',
  'cheerio': 'window',
  'react/lib/ExecutionEnvironment': true,
  'react/addons': true,
  'react/lib/ReactContext': 'window'
},

otherwise I get errors

ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Cannot resolve module 'react/addons' in /Users/davidfox-powell/dev/webpack2/node_modules/enzyme/build
 @ ./~/enzyme/build/react-compat.js 41:16-39 42:46-69

ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Cannot resolve module 'react/lib/ReactContext' in /Users/davidfox-powell/dev/webpack2/node_modules/enzyme/build
 @ ./~/enzyme/build/react-compat.js 43:23-56

ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Cannot resolve module 'react/lib/ExecutionEnvironment' in /Users/davidfox-powell/dev/webpack2/node_modules/enzyme/build
 @ ./~/enzyme/build/react-compat.js 73:4-45

without jsdom and cheerio as externals I get a successful WebpackDevServer build but failures in chrome

Chrome 54.0.2840 (Mac OS X 10.11.6) ERROR
  Uncaught Error: Cannot find module "../maps/decode.json"
  at webpack:///~/entities/lib/decode_codepoint.js:1:0 <- test.config.js:17459

Chrome 54.0.2840 (Mac OS X 10.11.6): Executed 0 of 0 ERROR (0.455 secs / 0 secs)

[kentcdodds]

Just in case someone in the future runs into the same problem I ran into which led me here. I had a really odd situation where I was doing a dynamic require which resulted in webpack attempting to create a bundle for my co-located test file which required enzyme and attempted to resolve the react/addons module (which doesn't exist since I'm using 15.4.x) so I was also getting this error. To resolve it, I just stopped doing my dynamic require stuff. I didn't need it anyway :) Hope this is helpful!

[velidan]

@kentcdodds Hello. I have the same issue but I didn't know how I can disable dynamic require in webpack 2. Because it builds my react project. How I can do that stuff like you? Could you tell me, please, how did you do that? Thanks!

[velidan]

I used this "hack" to resolve that issue.
https://github.com/airbnb/enzyme/issues/302#issuecomment-207190560

My question isn't actual anymore. Thanks :)

[tony1377]

Thanks @kentcdodds wouldn't have found the cause without your comment.

I think the reason this happens is when using a dynamic import webpack doesn't know what you will require ahead of time so it creates a bundle for every js file in the directory which your trying to import from, including test files.

For anyone else who comes here with this problem, one solution is to wrap the tests in a if block so that they only run when in a test environment. This means that you'll need to use require instead of import for pulling in your dependancies.

Here's an example.

// in MyComponent.test.js

if (process.env.NODE_ENV === 'test') {

  const React = require('react')
  const ReactDOM = require('react-dom')
  const renderer = require('react-test-renderer');
  const {mount} = require('enzyme');

  it('renders without crashing', () => {
    ...
  })

}

[ljharb]

That seems like a really inefficient solution to a webpack config flaw. Why would webpack be bundling up tests, ever?

[kentcdodds]

@ljharb, it's totally possible/reasonable for this to happen with co-located tests and dynamic requires. Don't have time to go into it right now. In any case, what I'd do instead is make it so your dynamic require couldn't possibly get to your tests. What you have there is a pretty bad hack and I wouldn't personally be satisfied if that were my "solution." I'm sure there's a way that you can configure webpack to ignore a __tests__ folder for example. I'm not sure how to do that, but I expect it's possible.

[ljharb]

@kentcdodds one of the many downsides of colocated tests is that you have to configure all your tools to be aware of them; if your webpack config doesn't skip over your colocated tests, then it's a flaw in your config. If the config can't work around it, then the solution is easy - don't colocate your tests.

[tony1377]

@kentcdodds, @ljharb, thanks for you feedback

Note to self, don't post "solutions" when it's late in the night and you've been working on a problem for too long :)

To give a little context, the app I'm working is right at beginning of development (only has 2 small test files
currently), so when I came up with this idea there was almost no cost to switching to it. I would not have
considered it (even given the lateness of the hour) if we had an lots of test files already in place.

For the record, I didn't just jump on that "solution" before trying the one's you suggested. My first instinct was to move tests out of the folder, but I find great benefit in having co-located tests so I was trying to avoid that if possible. So then I looked at configuring webpack but as far as I'm aware create-react-app doesn't enable that, so that was out. So then I looked into require.context but after digging into that some I found that it wasnt' recommended to use.

I'll go with moving the tests to a different folder and call it a day.