Can we simulate click events and check its functionality's result simultaneously?

[PriyalSayonetech]

Consider the below sample react code- (The code is to perform toggling when clicking a tab. when we click a tab, it becomes active and remaining all becomes inactive.)

propTypes: {
    selectedWidget: React.PropTypes.number,
    .........}

  render: function() {
   return (
      <div className="tabs">
        <div
          className={this.props.selectedWidget === 0? "active": void 0}
          onClick={function() { this.setActiveTab(0); }.bind(this)}>
            {Texts.get('HOME_METRICS_HEADER')}
        </div>
        <div
          className={this.props.selectedWidget === 1? "active": void 0}
          onClick={function() { this.setActiveTab(1); }.bind(this)}>
            {Texts.get('HOME_METRICS_HEADER_LENGTH')}
        </div>
    </div>
   )}

Now Below is the test i have written in enzyme:-

it('testing first tab click',()=>{

        const handleClick = sinon.spy();
        const wrapper = shallow(<Tabs selectedWidget={0} updateSelectedTab={handleClick}/>);
        wrapper.find('div.active').simulate('click');
        expect(handleClick).to.have.property('callCount', 1);

});

The above code, test is working perfectly. But i want to know whether the actual functionlity is happening? That is, when i check whether toggle functionality is working, it actually doesnt. When i click tab1, the tab2 must go inactive. but when i check for the inactive tab using "find()" its not found. So any idea about these guys?

Same way i have another doubt- On simulating a submit button, the submit functionality should actually work right? but when i check whether submitted data is saved in database, its not yet saved

[ljharb]

What version of enzyme and React are you using?

Separately, I'd suggest avoiding simulate entirely; do .prop('onClick')() instead.