How to test: onClick event - Jest/ Enzyeme

Question

I am new to unit testing and I just ran a test coverage. This is the only line missing at the moment.

How could I test this line and make sure 100 % is covered

   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 (
  <div id='normalize-container'>
    <div id='normalize-header'>
    </div>
    <br /><br />
    <h3 className='normalized-header'>{this.props.newResponse ? 'Raw Data' : 'Normalized Data'}</h3><br/>
    <div>
      {this.props.newResponse ? null :
        this.props.THead ?
          <div>
            {!this.props.datasourceCatalog ? 
              <div id='next-button-modal'>
                {/*<button title='Proceed To Shape' className='request-button' id='next-btn-ready-modal' onClick={this.props.nextTab}><img src={nextImg}/></button>*/}
                <button title='Proceed To Shape' className='request-button' id='next-btn-ready-modal' onClick={(e) => {this.props.toggleModal(); this.props.nextTab();}}>
                  <FontAwesome
                  className='fa-angle-right'
                  name='view-externallink-img'
                  size='2x'/>                  
                </button>

                <h4>Proceed To Shape</h4>
              </div> : 
            null}

            <div className='normalize-table-container'>
              <div className="data-table-wrapper">
                <table>
                  <thead dangerouslySetInnerHTML={{__html: this.props.THead}} />
                  <tbody dangerouslySetInnerHTML={{__html: this.props.TBody}} />
                </table>
              </div>
            </div>
          </div>
        : null
      }
    </div>
  </div>

Using React JS - jest and enzyme

Testing file :

// 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', () => {
let wrapper;
let tree;

beforeEach(() => wrapper = shallow(<Normalize  {...baseProps} />));

it(' Should render with all of the props', () => { 

Render with all props are working - but just need to make sure how to test the line above, on click with 2 props.

Thank you

Answer 1

Something like this should work:

it('should call toggleModal and nextTab functions on button click', () => {
  // Reset info from possible previous calls of these mock functions:
  baseProps.toggleModal.mockClear();
  baseProps.nextTab.mockClear();

  // Remove props that would end up hiding the button
  wrapper.setProps({
    newResponse: null,
    datasourceCatalog: null
  });

  // Find the button and call the onClick handler
  wrapper.find('#next-btn-ready-modal').simulate('click');

  // Test to make sure prop functions were called via simulating the button click
  expect(baseProps.toggleModal).toHaveBeenCalled();
  expect(baseProps.nextTab).toHaveBeenCalled();
})

Note: you can also split these into separate tests, one to test each call separately.