Enzyme: _cheerio2.default.load is not a function

[goerwin]

I'd appreciate any help with this: I'm using webpack + karma for my tests and did the setup as indicated in the installation guides. But when I try to use enzyme.render(reactElement) I got that error. This is my karma.config.js:

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai'],
    port: 9876,
    browsers: ['Chrome'],

    files: [
      'node_modules/babel-polyfill/dist/polyfill.min.js',
      './src/**/*.test.js'
    ],

    preprocessors: {
      './src/**/*.test.js': ['webpack']
    },

    plugins: [
      // Browsers
      'karma-phantomjs-launcher',
      'karma-chrome-launcher',
      'karma-mocha',
      'karma-chai',
      'karma-webpack'
    ],

    webpack: {
      resolve: {
        modules: [require('path').resolve(__dirname, './src'), 'node_modules']
      },
      module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
          }
        ]
      },
      externals: {
        cheerio: 'window',
        'react/addons': true,
        'react/lib/ReactContext': true,
        'react/lib/ExecutionEnvironment': true
      }
    },
    webpackMiddleware: { quiet: false }
  });
};

and component.test.js:

import React from 'react';
import * as enzyme from 'enzyme';
import SidebarMenu from './sidebar-menu';

describe.only('<SidebarMenu />', function () {
  it('should render correctly', () => {
    const reactElement = <SidebarMenu title="Menu" />;
    const element = enzyme.render(reactElement);
    expect(element.find('.sidebar-menu')).to.have.length(1);
  });
});

[ttrmw]

Seeing the same thing with Jest, see #286

[rnsloan]

I remember running into this error with webpack (not using karma). I cannot remember what I did specifically to fix it but here are the parts of my webpack config for testing to getting cheerio working:

module.exports = {
  resolve: { 
    extensions: ['.json']
  },
  externals: {
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': 'window',
  },
  module: {
    loaders: [
      {test: /\.json$/, loaders: ['json']},
    ]
  }
};

Maybe one of these addresses the issue.

I do not include cheerio: 'window' https://github.com/lelandrichardson/enzyme-example-karma-webpack/pull/2

Update 2016-04-15: upgrading to React 15 needed to add: 'react/addons': true to webpack externals

[goerwin]

Ok, using the json-loader and removing cheerio from excludes, did it for me. But now there is a new error arising.

Uncaught Error: Cannot find module "../maps/decode.json" 
at <- webpack:///~/htmlparser2/~/entities/lib/decode_codepoint.js:1:0

Oh man, making enzyme work with webpack/karma is so frustrating.

[ttrmw]

I think our issue might be distinct and Jest related - it seems like Jest's mocking behaviour could be causing our problem. Despite unmocking Enzyme, Cheerio appears to be mocked.

[rnsloan]

I have never seen that decode.json error. I am not using Jest or Karma.

[mmahalwy]

@erwingaitano any solution?

[valgreens]

Having the same problem and error message as @erwingaitano I finally could make it work (using react 0.14).
My steps to fix it:
npm install json-loader --save-dev
I added this to webpack's loaders object on karma config:

{
    test: /\.json$/, loader: 'json'
}

Reduced the externals object to:

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

And added json to the list of resolved extensions
extensions: ['', '.js', '.scss', '.json']

Hope this would help someone with the same problems in the future because it took me a while to figure it out.

[kevinold]

Just FYI, this solution from @valgreens for 0.14 also works for React 15.

[nfcampos]

@valgreens thanks for sharing your solution. very similar to what I did to compile enzyme's test files with webpack to run with karma (#421). the reason for most of the awkwardness of using enzyme with webpack is due to the conditional require calls we need to have in order to simultaneously support react 0.13, 0.14 and 15.

[chrylis]

The workaround @valgreens posted works for me on 15, except that I still need all of the React excludes.

[ljharb]

I don't think this is relevant any more now that we're on v3.

[jshado1]

I just encountered this when calling shallowWrapper.render(), so it's still a thing @ljharb 😉 (React 16)

[ljharb]

@jshado1 If you could file a new issue, and include your webpack config (since that's likely the culprit), that'd be helpful.

[jshado1]

Turns out I didn't actually need render (I just needed to switch from shallow to mount).