title: What should be tested when calling onClick() with a redux action creator?
body: <p>I'm trying to test a simple checkbox input component that fires an action in it's onChange method to save the value of the checkbox (True or False). The component is below:</p>
  
  <pre><code>import React, {Component} from 'react';
  import uuid from 'uuid/v1';
  import './styles.css';
  import { connect } from 'react-redux';
  import { saveCheckboxInput } from '../../actions/userInputActions';
  
  class CheckboxSingle extends Component {
  
    constructor () {
      super();
      this.onChange = this.onChange.bind(this);
      this.state = {
        id : uuid(), // generate a unique id
      }
    }
  
    onChange(event) {
      const target = event.target;
      const value = target.type === 'checkbox' ? target.checked : target.value;
      this.props.saveCheckboxInput(this.props.linkId, value, this.props.desc, this.props.relatedLinkIds, this.props.stepNumber);
    }
  
    render(){
      return(
        &lt;div className="col-sm-12 no-padding-left"&gt;
          &lt;label className="checkbox-container label-text"&gt;{this.props.desc}
            &lt;input id={this.state.id} type="checkbox" name="checkBoxValue" checked={this.props.isChecked}
        onChange={(e) =&gt; this.onChange(e)}/&gt;
            &lt;span className="checkmark"&gt;&lt;/span&gt;
          &lt;/label&gt;
        &lt;/div&gt;
      )
    }
  }
  
  function mapStateToProps(state, ownProps) {
    // Tie checkBoxValue to store answer
    // Get answers in the context of checkbox (determines if checked or not)
    var stepAnswers = state.userInputState.stepResponses[ownProps.stepNumber];
    var isCheckedValue = null;
    // Note: only functional w/ one checkbox input in flow
    // TODO: make functional for multiple checkbox inputs in flow
    for(var i=0; i &lt; stepAnswers.length; i++) {
      if(stepAnswers[i].type === "questionnaire-checkbox-input") {
        isCheckedValue = stepAnswers[i].value;
      }
    }
    return {
      isChecked : isCheckedValue
    };
  }
  
  
  
  export default connect(
    mapStateToProps,
    { saveCheckboxInput },
   )(CheckboxSingle);
  </code></pre>
  
  <p>With the test to simulate the onChange() function below:</p>
  
  <pre><code>describe('CheckboxSingle', () =&gt; {
  
    const initialState = {
      userInputState: {
         stepResponses: [
          {},
          {
            type: "questionnaire-checkbox-input",
            name: "mockLinkId",
            value: false,
            prefixText: "mockDesc",
            relatedLinkIds: ["mock1", "mock2"]
          }
        ]
      }
    }
    const mockStore = configureStore()
    let store, shallowWrapper, dispatch
  
    beforeEach(() =&gt; {
      store = mockStore(initialState)
      dispatch = jest.fn();
      shallowWrapper = shallow(&lt;CheckboxSingle store={store} dispatch={dispatch} desc="mockDesc"
    linkId="mockLinkId" relatedLinkIds={["mock1", "mock2"]} stepNumber={1} /&gt;).dive()
    });    
  
    // TODO: test action creator firing upon click
    test('should call onChange after clicked', () =&gt; {
      const onChangeFake = jest.spyOn(shallowWrapper.instance(), 'onChange');
      shallowWrapper.find('input[type="checkbox"]').simulate('change', { target: { checked: true } });
      expect(onChangeFake).toHaveBeenCalledTimes(1);
    });
  
  });
  </code></pre>
  
  <p>What would be the best way to test that this.props.saveCheckboxInput is fired upon a change to the component (similar to the simulated change test)? New to enzyme so any insight would be appreciated!</p>