Using sinon and enzyme I wanna test the following component:

// Apple.js

class Apple extends Component {



  componentDidMount = () => {



    this.props.start();

    Api.get()

      .then(data => {

        console.log(data); // THIS IS ALWAYS CALLED

        this.props.end();

      });

  }



  render () {

    return (<div></div>);

  }

}

If I just check endApy.called, it's always false. But wrapping it in a setTimeout will make it pass. Why console.log() is always called but not the props.end? Why setTimeout fixes it? Is there a better way of doing this?

// Apple.test.js

import sinon from 'sinon';

import { mount } from 'enzyme';

import Api from './Api';

import Apple from './Apple';





test('should call end if Api.get is successfull', t => {

  t.plan(2);

    sinon

        .stub(Api, 'get')

        .returns(Promise.resolve());



    const startSpy = sinon.spy();

    const endApy = sinon.spy();



    mount(<Apple start={ startSpy } end={ endApy } />);



    t.equal(startSpy.called, true);                    // ALWAYS PASSES 

    t.equal(endSpy.called, true);                      // ALWAYS FAILS

    setTimeout(() => t.equal(endApy.called, true));    // ALWAYS PASSES



    Api.get.restore();

});