title: How to test: onClick event - Jest/ Enzyeme
body: <p>I am new to unit testing and I just ran a test coverage. This is the only line missing at the moment.</p>
  
  <p>How could I test this line and make sure 100 % is covered</p>
  
  <pre><code>   export default class Normalize extends Component {
  
   constructor(props) {
  super(props)
  this.state = {}
   //    this.handleChange = this.handleChange.bind(this)
  }
  
   componentDidMount() {
   this.props.normalizeData(null)    
  }
  
   render () {
  return (
    &lt;div id='normalize-container'&gt;
      &lt;div id='normalize-header'&gt;
      &lt;/div&gt;
      &lt;br /&gt;&lt;br /&gt;
      &lt;h3 className='normalized-header'&gt;{this.props.newResponse ? 'Raw Data' : 'Normalized Data'}&lt;/h3&gt;&lt;br/&gt;
      &lt;div&gt;
        {this.props.newResponse ? null :
          this.props.THead ?
            &lt;div&gt;
              {!this.props.datasourceCatalog ? 
                &lt;div id='next-button-modal'&gt;
                  {/*&lt;button title='Proceed To Shape' className='request-button' id='next-btn-ready-modal' onClick={this.props.nextTab}&gt;&lt;img src={nextImg}/&gt;&lt;/button&gt;*/}
                  &lt;button title='Proceed To Shape' className='request-button' id='next-btn-ready-modal' onClick={(e) =&gt; {this.props.toggleModal(); this.props.nextTab();}}&gt;
                    &lt;FontAwesome
                    className='fa-angle-right'
                    name='view-externallink-img'
                    size='2x'/&gt;                  
                  &lt;/button&gt;
  
                  &lt;h4&gt;Proceed To Shape&lt;/h4&gt;
                &lt;/div&gt; : 
              null}
  
              &lt;div className='normalize-table-container'&gt;
                &lt;div className="data-table-wrapper"&gt;
                  &lt;table&gt;
                    &lt;thead dangerouslySetInnerHTML={{__html: this.props.THead}} /&gt;
                    &lt;tbody dangerouslySetInnerHTML={{__html: this.props.TBody}} /&gt;
                  &lt;/table&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          : null
        }
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Using React JS -  jest and enzyme</p>
  
  <p>Testing file :</p>
  
  <pre><code>// jest mock functions (mocks this.props.func)
  const normalizeData =  jest.fn();
  const toggleModal =  jest.fn();
  const nextTab =  jest.fn();
  const onClick =  jest.fn();
  
  // defining this.props
  const baseProps = {
  normalizeData,
  newResponse:{},
  THead:{},
  TBody:{},
  datasourceCatalog:{},
  toggleModal,
  nextTab,
  onClick,
  
  describe(' Normalize Test', () =&gt; {
  let wrapper;
  let tree;
  
  beforeEach(() =&gt; wrapper = shallow(&lt;Normalize  {...baseProps} /&gt;));
  
  it(' Should render with all of the props', () =&gt; { 
  </code></pre>
  
  <p>Render with all props are working - but just need to make sure how to test the line above, on click with 2 props.</p>
  
  <p>Thank you</p>