title: How to Unit Test React-Redux Connected Components?
body: <p>I am using Mocha, Chai, Karma, Sinon, Webpack for Unit tests.</p>
  
  <p>I followed this link to configure my testing environment for React-Redux Code.</p>
  
  <p><a href="https://medium.com/@scbarrus/how-to-get-test-coverage-on-react-with-karma-babel-and-webpack-c9273d805063#.7kcckz73r" rel="noreferrer">How to implement testing + code coverage on React with Karma, Babel, and Webpack</a></p>
  
  <p>I can successfully test my action and reducers javascript code, but when it comes to testing my components it always throw some error.</p>
  
  <pre><code>import React from 'react';
  import TestUtils from 'react/lib/ReactTestUtils'; //I like using the Test Utils, but you can just use the DOM API instead.
  import chai from 'chai';
  // import sinon from 'sinon';
  import spies from 'chai-spies';
  
  chai.use(spies);
  
  let should = chai.should()
    , expect = chai.expect;
  
  import { PhoneVerification } from '../PhoneVerification';
  
  let fakeStore = {
        'isFetching': false,
        'usernameSettings': {
          'errors': {},
          'username': 'sahil',
          'isEditable': false
        },
        'emailSettings': {
          'email': 'test@test.com',
          'isEmailVerified': false,
          'isEditable': false
        },
        'passwordSettings': {
          'errors': {},
          'password': 'showsomestarz',
          'isEditable': false
        },
        'phoneSettings': {
          'isEditable': false,
          'errors': {},
          'otp': null,
          'isOTPSent': false,
          'isOTPReSent': false,
          'isShowMissedCallNumber': false,
          'isShowMissedCallVerificationLink': false,
          'missedCallNumber': null,
          'timeLeftToVerify': null,
          '_verifiedNumber': null,
          'timers': [],
          'phone': '',
          'isPhoneVerified': false
        }
  }
  
  function setup () {
      console.log(PhoneVerification);
      // PhoneVerification.componentDidMount = chai.spy();
      let output = TestUtils.renderIntoDocument(&lt;PhoneVerification {...fakeStore}/&gt;);
      return {
          output
      }
  }
  
  describe('PhoneVerificationComponent', () =&gt; {
      it('should render properly', (done) =&gt; {
          const { output } = setup();
          expect(PhoneVerification.prototype.componentDidMount).to.have.been.called;
          done();
      })
  });
  </code></pre>
  
  <p>This following error comes up with above code.</p>
  
  <pre><code>FAILED TESTS:
    PhoneVerificationComponent
      ✖ should render properly
        Chrome 48.0.2564 (Mac OS X 10.11.3)
      Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
  </code></pre>
  
  <p>Tried switching from sinon spies to chai-spies.</p>
  
  <p>How should I unit test my React-Redux Connected Components(Smart Components)? </p>