2

I've install as per the documentation

npm i --save-dev enzyme

npm i --save-dev react-test-renderer react-dom (currently using React 15.5.4)

And altered my karma.conf file http://airbnb.io/enzyme/docs/guides/karma.html and http://airbnb.io/enzyme/docs/guides/webpack.html

My tests were running prior to trying to use Enzyme

But I get load errors when I run a .spec.js with these imports

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { connect, Provider } from 'react-redux'
import ConfigureMockStore  from 'redux-mock-store';
import { mount } from 'enzyme';

As soon as the import { mount } from 'enzyme'; is hit I get (plus a whole lot of other load failures)

ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Cannot resolve module 'react/addons' in D:\development\poc9-unittests\node_modules\enzyme\build
 @ ./~/enzyme/build/react-compat.js 46:16-39 47:46-69

ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Cannot resolve module 'react/lib/ReactContext' in D:\development\poc9-unittests\node_modules\enzyme\build
 @ ./~/enzyme/build/react-compat.js 48:23-56

My karma.conf is

var webpack = require('karma-webpack');

module.exports = function (config) {
  config.set({

    singleRun: false,
    watched: true,

    frameworks: ['jasmine'],
    browsers: ['Chrome'],

    files: [
      'tests.webpack.js'
    ],

    preprocessors: {
      'tests.webpack.js': [ 'webpack', 'sourcemap' ]
    },

    reporters: [ 'dots' ],

    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          {
             test: /\.js$/, 
             loader: 'babel-loader',  
             query: {
                  presets: ['airbnb']
             }
           }
        ]
      }
    },

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

    browserNoActivityTimeout: 300000,

    plugins: [
      'karma-webpack',
      'karma-jasmine',
      'karma-sourcemap-loader',
      'karma-chrome-launcher'
    ],

    webpackServer: {
      noInfo: true
    },


  });
};

Any ideas ?

Rory
  • 1,442
  • 4
  • 21
  • 38
  • Have you installed react-addons-test-utils, which is a dependency for enzyme? – Abhishek Jain Apr 26 '17 at 08:52
  • Yes "react-addons-test-utils": "^15.4.0" in both dependencies and devDependencies – Rory Apr 26 '17 at 08:55
  • can you setup a github repo, so that we can see what's going on. It's difficult to find the problem just by looking at the config file. – Abhishek Jain Apr 26 '17 at 08:58
  • yes I will, give me 10mins – Rory Apr 26 '17 at 08:59
  • Great.. I just realised that I answered another of your questions yesterday. Is it the same repo? – Abhishek Jain Apr 26 '17 at 08:59
  • yes but with more tests, Ill update this repo and let you know – Rory Apr 26 '17 at 09:02
  • Why do you have `react-addons-test-utils` in _both_ dependencies and devDependencies? Isn't that weird? – U r s u s Apr 26 '17 at 09:04
  • And I would also remove phantomjs and related deps as they are not used anymore. – Abhishek Jain Apr 26 '17 at 09:11
  • here's the repo https://github.com/bikerboyroy/Enzyme.. botShowUI.spec.js is where the error occurs – Rory Apr 26 '17 at 09:22
  • I am unable to install the dependencies on my machine (probably because I am behind a firewall). But one thing i noticed, which might not be the reason behind your issue, is that you still have query option in your karma.config, which you do not need, as it is coming from babelrc now. – Abhishek Jain Apr 26 '17 at 10:19
  • Do you mean loaders: [ { test: /\.js$/, loader: 'babel-loader', query: { presets: ['airbnb'] } } ] – Rory Apr 26 '17 at 10:29
  • yes, but that is not the reason behind your issue. See my answer below. That should fix it (hopefully!) – Abhishek Jain Apr 26 '17 at 10:55

1 Answers1

2

Couldn't run your project on my machine, but I remember having a similar issue in the past. Try adding the below to your karma config (inside webpack config), and see if it fixes it:-

    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          {
             test: /\.js$/, 
             loader: 'babel-loader',  
             query: {
                  presets: ['airbnb']
             }
           }
        ]
      },

      externals: {
      'jsdom': 'window',
      'cheerio': 'window',
      'react/lib/ExecutionEnvironment': true,
      'react/addons': true,
      'react/lib/ReactContext': 'window'
      }
    }
Abhishek Jain
  • 2,957
  • 23
  • 35