CODEWITHSUNDEEP
reactjswebpackkarma-jasmineenzyme
Rory
Rory

Reputation: 1492

Enzyme / Karma / Webpack / Jasmine / React testing not working

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 ?

Upvotes: 2

Views: 912

Answers (1)

Abhishek Jain
Abhishek Jain

Reputation: 2977

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'
      }
    }

Upvotes: 2

Related Questions