title: Testing with React's Jest and Enzyme when simulated clicks call a function that calls a promise
body: <ul>
  <li>React  v15.1.0</li>
  <li>Jest   v12.1.1</li>
  <li>Enzyme v2.3.0</li>
  </ul>
  
  <p>I'm trying to figure out how to test a component that calls a promise in a function invoked by a click. I was expecting Jest's <code>runAllTicks()</code> function to help me out here, but it doesn't seem to be executing the promise.</p>
  
  <p>Component:</p>
  
  <pre><code>import React from 'react';
  import Promise from 'bluebird';
  
  function doSomethingWithAPromise() {
    return new Promise((resolve) =&gt; {
      setTimeout(() =&gt; {
        resolve();
      }, 50);
    });
  }
  
  export default class AsyncTest extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        promiseText: '',
        timeoutText: ''
      };
  
      this.setTextWithPromise = this.setTextWithPromise.bind(this);
      this.setTextWithTimeout = this.setTextWithTimeout.bind(this);
    }
  
    setTextWithPromise() {
      return doSomethingWithAPromise()
        .then(() =&gt; {
          this.setState({ promiseText: 'there is text!' });
        });
    }
  
    setTextWithTimeout() {
      setTimeout(() =&gt; {
        this.setState({ timeoutText: 'there is text!' });
      }, 50);
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div id="promiseText"&gt;{this.state.promiseText}&lt;/div&gt;
          &lt;button id="promiseBtn" onClick={this.setTextWithPromise}&gt;Promise&lt;/button&gt;
          &lt;div id="timeoutText"&gt;{this.state.timeoutText}&lt;/div&gt;
          &lt;button id="timeoutBtn" onClick={this.setTextWithTimeout}&gt;Timeout&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>And the tests:</p>
  
  <pre><code>import AsyncTest from '../async';
  import { shallow } from 'enzyme';
  import React from 'react';
  
  jest.unmock('../async');
  
  describe('async-test.js', () =&gt; {
    let wrapper;
  
    beforeEach(() =&gt; {
      wrapper = shallow(&lt;AsyncTest /&gt;);
    });
  
    // FAIL
    it('displays the promise text after click of the button', () =&gt; {
      wrapper.find('#promiseBtn').simulate('click');
  
      jest.runAllTicks();
      jest.runAllTimers();
  
      wrapper.update();
  
      expect(wrapper.find('#promiseText').text()).toEqual('there is text!');
    });
  
    // PASS
    it('displays the timeout text after click of the button', () =&gt; {
      wrapper.find('#timeoutBtn').simulate('click');
  
      jest.runAllTimers();
  
      wrapper.update();
  
      expect(wrapper.find('#timeoutText').text()).toEqual('there is text!');
    });
  });
  </code></pre>