title: Lost in testing Redux vs Sinon/React
body: <p>Im completely lost on how to test the React components itself which include XHR calls. I have below items</p>
  
  <ul>
  <li>LoginForm</li>
  <li>Redux with action + reducer</li>
  <li>Sinon (for spy/xhr stuff)</li>
  <li>Chai</li>
  </ul>
  
  <p>Below is some basic setup code. Please note that its not the full code but i guess you get the idea:</p>
  
  <p><strong>Form</strong> </p>
  
  
  
  <pre class="lang-react.js prettyprint-override"><code>class Form extends React.Component {
  
    constructor() {
      super();
      this.state = {
        username: null,
        password: null
      };
      this.handleForm = this.handleForm.bind(this);
    }
  
    handleForm(e) {
      e.preventDefault();
      this.props.dispatch(authenticateUser(this.state.username, this.state.password));
    }
  
    render() {
      &lt;Form&gt;
    }
  }
  </code></pre>
  
  <p><strong>Action</strong></p>
  
  <pre class="lang-react.js prettyprint-override"><code>export function authenticateUser(username, password) {
  
    return function(dispatch, getState) {
      dispatch({type: 'AUTHENTICATION_USER'});
  
      fetch(getState().config.login_endpoint, {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: {
          username: username,
          password: password
        }
      }).then(function (data) {
        if(data.status === 404) {
          dispatch({type: 'AUTHENTICATION_USER_NOTFOUND', payload: data.statusText});
        } else {
          dispatch({type: 'AUTHENTICATION_USER_FULFILLED', payload: data.json()});
        }
      }).catch(function (error) {
        dispatch({type: 'AUTHENTICATION_USER_REJECTED', payload: error.message});
      });
    };
  }
  </code></pre>
  
  <p><strong>Reducer</strong></p>
  
  <pre class="lang-react.js prettyprint-override"><code>export default function (state = {
    loading: false,
    errorMessage: null,
    passwordSent: false
  }, action) {
    switch (action.type) {
    case 'AUTHENTICATION_USER':
      return {...state, loading: true, errorMessage:null};
  
    case 'AUTHENTICATION_USER_NOTFOUND':
    case 'AUTHENTICATION_USER_REJECTED':
      return {...state, loading: false, errorMessage: action.payload};
  
    case 'AUTHENTICATION_USER_FULFILLED':
      window.location = '/';
      break;
    }
    return state;
  }
  </code></pre>
  
  <p>To test all this i setup a few test cases:</p>
  
  <pre class="lang-react.js prettyprint-override"><code>describe('components/LoginForm', () =&gt; {
    it('should push username and password in xhr call after form submit');
    it('redirects in case of succesfull login to the configured endpoint');
    it('should show an user error on a 404 response');
    it('should show an user error on a 500 response');
  });
  </code></pre>
  
  <p>Testing of all the internal component stuff is already finished but no idea how we can handle the XHR stuff and also the redux events. I checked this page as reference but i really dont get the idea and it is also focussed on <code>Jest</code> instead
  <a href="http://redux.js.org/docs/recipes/WritingTests.html" rel="nofollow noreferrer">http://redux.js.org/docs/recipes/WritingTests.html</a></p>
  
  <p>Hope that someone could bump me into the correct direction on how to handle this.</p>
  
  <p>Thanks</p>