undefined is not a constructor (evaluating '(0, _chai.expect)

[raptoria]

I am using Webpack 1 with React version 15.4.1 and karma 1.3.0.
I am having trouble with certain Chai assertions, ie. to.have.text and to.have.className give me the following errors:

✓ New Wave Button Exists
        ✗ New Wave Button contains Text
      undefined is not a constructor (evaluating '(0, _chai.expect)(wrapper.find('.newWaveButton')).to.have.text('New Wave')')
      webpack:///test/components/ModalPopup/ModalPopup.test.js:60:56 <- test/components/ModalPopup/ModalPopup.test.js:128:68

        ✗ New Wave Button contains class
      undefined is not a constructor (evaluating '(0, _chai.expect)(wrapper.find('.newWaveButton')).to.have.className('newWaveButton')')
      webpack:///test/components/ModalPopup/ModalPopup.test.js:65:61 <- test/components/ModalPopup/ModalPopup.test.js:133:73

Curiously, this test case passes:

    it('New Wave Button Exists', () => {
      const wrapper = mount(<ModalPopup />);
      expect(wrapper.find('.newWaveButton')).to.exist.and.have.length(1);
    });

These cases fail:

      it('New Wave Button contains Text', () => {
        const wrapper = mount(<ModalPopup />);
        expect(wrapper.find('.newWaveButton')).to.have.text('New Wave');
      });

      it('New Wave Button contains class', () => {
        const wrapper = mount(<ModalPopup />);
        expect(wrapper.find('.newWaveButton')).to.have.className('newWaveButton');
      });

Before I added Karma to my testing environment, these test cases passed.

My karma config:

var argv = require('yargs').argv;
         var path = require('path');
        var combineLoaders = require('webpack-combine-loaders');

module.exports = function(config) {
  config.set({
    browsers: ['PhantomJS'],
    singleRun: !argv.watch, // just run once by default
    frameworks: ['mocha', 'chai'],
    // npm i karma-spec-reporter --save-dev
    // displays tests in a nice readable format
    reporters: ['spec'],

    // include some polyfills for babel and phantomjs
    files: [
      'node_modules/babel-polyfill/dist/polyfill.js',
      './node_modules/phantomjs-polyfill/bind-polyfill.js',
      './test/**/*.js' // specify files to watch for tests
    ],
    preprocessors: {
      // these files we want to be precompiled with webpack
      // also run tests throug sourcemap for easier debugging
      ['./test/**/*.js']: ['webpack', 'sourcemap']
    },
    webpack: {
       devtool: 'inline-source-map',
       resolve: {
        // allow us to import components in tests like:
        // import Example from 'components/Example';
        root: path.resolve(__dirname, './src'),

        // allow us to avoid including extension name
        extensions: ['', '.js', '.jsx', '.json'],

        // required for enzyme to work properly
        alias: {
          'sinon': 'sinon/pkg/sinon'
        }
      },
      module: {
        // don't run babel-loader through the sinon module
        noParse: [
          /node_modules\/sinon\//
        ],
        // run babel loader for our tests
        loaders: [
          {
            test: /\.(js|jsx)$/,
            loaders: ['react-hot', 'babel'],
            exclude: /node_modules/
          },
          {
          test: /\.css$/,
          loader: combineLoaders([
            {
              loader: 'style-loader'
            }, {
              loader: 'css-loader',
              query: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]'
              }
             }
            ])
        },
        { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: "url-loader?limit=100000" },
        { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
        { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
        { test: /\.json$/, loader: "json"}
        ],
      },
      // required for enzyme to work properly
      externals: {
        'jsdom': 'window',
        'react/addons': true,
        'react/lib/ExecutionEnvironment': true,
        'react/lib/ReactContext': 'window'
      },
    },
    webpackMiddleware: {
      noInfo: true
    },
    // tell karma all the plugins we're going to be using
    plugins: [
      'karma-mocha',
      'karma-chai',
      'karma-webpack',
      'karma-phantomjs-launcher',
      'karma-spec-reporter',
      'karma-sourcemap-loader'
    ]
  });
};

[ayrton]

Can you post how you set up chai-enzyme?

[raptoria]

ah, right. That would be the most obvious question. I had chaiEnzyme imported in a setup.js but deleted it after I introduced karma.

Adding:

import chai from 'chai'
import chaiEnzyme from 'chai-enzyme'
chai.use(chaiEnzyme()) // Note the invocation at the end

fixed the issue.

thanks!