title: Testing React Redux - cannot read properties of undefined, or wrapper undefined
body: <p>Im having a bit of a problem setting up a Redux store in my component for my test suite. The problem is that even if I try a unconnected mount then the test throws errors looking for variables in authState. I have the following component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Link, Redirect } from "react-router-dom";
  import {bindActionCreators} from 'redux';
  import {connect} from 'react-redux';
  import * as authActions from '../../../actions/auth.actions';
  
  export class PasswordReset extends Component {
      constructor(props) {
          super(props);
          this.state = {
              email: '',
              emailConfirm: '',
              message: ""
          };
      }
  
      handleChange = e =&gt; {
          e.preventDefault();
          const { value, name } = e.target;
  
          if (name === 'email') {
              this.setState({...this.state, email: value.trim()});
          } else if (name === 'secondary') {
              this.setState({...this.state, emailConfirm: value.trim()});
          }
      }
  
      handleSubmit = e =&gt; {
          e.preventDefault();
          if (this.state.email.length === 0 &amp;&amp; this.state.emailConfirm.length === 0) {
              this.setState({message: "Please Enter and Confirm Email Before Submit"});
              return;
          }
  
          if (this.state.email !== this.state.emailConfirm) {
              this.setState({message: 'Emails Do Not Match, Please Try Again'});
              return;
          }
  
          this.props.authActions.resetPassword(this.state.email);
      }
  
      render() {
          if (this.props.authState.resetStatus === 'reset') {
              return &lt;Redirect to='/login' /&gt;
          }
          const error = this.props.authState.resetError === 'TypeError: Failed to fetch' ? 'Agent Id does not exist' : false
          return (
              &lt;div className={'container-login100'}&gt;
                  &lt;div className={'wrap-login100 p-t-85 p-b-20'}&gt;
                      &lt;form className={'login100-form validate-form'}&gt;
                          &lt;span className={'login100-form-title p-b-70'}&gt;Reset Password&lt;/span&gt;
                          &lt;div className={'wrap-input100 validate-input m-t-85 m-b-35'}&gt;
                          &lt;div style={{margin: '0 auto', alignItems: 'center', justifyContent: 'center', display: 'flex', color: 'red'}}&gt;
                          {error || this.state.message}
                          &lt;/div&gt;
                              &lt;input
                                  onChange={e =&gt; this.handleChange(e)}
                                  className={'input100'}
                                  name='email'
                                  value={this.state.email}
                                  placeholder="Please Enter Your Email"
                                  required
                              /&gt;
                          &lt;/div&gt;
                          &lt;div className={'wrap-input100 validate-input m-t-85 m-b-35'}&gt;
                              &lt;input
                                  onChange={e =&gt; this.handleChange(e)}
                                  className={'input100'}
                                  name="secondary"
                                  value={this.state.secondary}
                                  placeholder="Please Confirm By Re-entering Your Email"
                                  required
                              /&gt;
                          &lt;/div&gt;
                          &lt;div className={'container-login100-form-btn'}&gt;
                              &lt;button className={'login100-form-btn btn-disabled'} onClick={e =&gt; this.handleSubmit(e)}&gt;Reset Password&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div className={'container-login100-form-btn'}&gt;
                              &lt;Link to='/login'&gt;Back to Login&lt;/Link&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  const mapStateToProps = state =&gt; ({
      authState: state.auth,
  })
  
  const mapDispatchToProps = dispatch =&gt; ({
      authActions: bindActionCreators({resetPassword: authActions.resetPassword}, dispatch),
  })
  
  export default connect(mapStateToProps, mapDispatchToProps)(PasswordReset);
  </code></pre>
  
  <p>And the following test structure:</p>
  
  <pre><code>import React from 'react';
  import configureStore from 'redux-mock-store';
  import Enzyme, {mount, shallow} from 'enzyme';
  import Provider from 'react-redux';
  import Adapter from 'enzyme-adapter-react-16';
  
  import ConnectedPasswordReset, {PasswordReset} from '../';
  
  Enzyme.configure({adapter: new Adapter()});
  
  const mockStore = configureStore();
  let wrapper, store, mWrapper;
  const initialState = {isLoggedIn: false, isInProgress: false, email: null, error: null, resetError: null, resetStatus: null};
  
  describe('PasswordReset component', () =&gt; {
      beforeEach(() =&gt; {
          store = mockStore(initialState);
          wrapper = shallow(&lt;PasswordReset store={store} /&gt;);
          mWrapper = mount(&lt;Provider store={store}&gt;&lt;ConnectedPasswordReset /&gt;&lt;/Provider&gt;);
      })
  
      it('shallow - should have initial state.email of ""', () =&gt; {
          expect(wrapper.state().email).toEqual('');
      });
  
      it('mount - should have a initial state.email of ""', () =&gt; {
          expect(mWrapper.state().email).toEqual('');
      });
  });
  </code></pre>
  
  <p>Im getting the following output:</p>
  
  <p><a href="https://i.stack.imgur.com/1SG1S.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1SG1S.png" alt="testing output"></a></p>