title: How to unit test a React component that renders after fetch has finished?
body: <p>I'm a Jest/React beginner. In jest's <code>it</code> I need to wait until all promises have executed before actually checking.</p>
  
  <p>My code is similar to this:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class MyComponent extends Component {
      constructor(props) {
          super(props);
          this.state = { /* Some state */ };
      }
  
      componentDidMount() {
          fetch(some_url)
              .then(response =&gt; response.json())
              .then(json =&gt; this.setState(some_state);
      }
  
      render() {
          // Do some rendering based on the state
      }
  }
  </code></pre>
  
  <p>When the component is mounted, <code>render()</code> runs twice: once after the constructor runs, and once after <code>fetch()</code> (in <code>componentDidMount()</code>) finishes and the chained promises finish executing).</p>
  
  <p>My testing code is similar to this:</p>
  
  <pre class="lang-js prettyprint-override"><code>describe('MyComponent', () =&gt; {
  
      fetchMock.get('*', some_response);
  
      it('renders something', () =&gt; {
          let wrapper = mount(&lt;MyComponent /&gt;);
          expect(wrapper.find(...)).to.have.something();
      };
  }
  </code></pre>
  
  <p>Whatever I return from <code>it</code>, it runs after the first time <code>render()</code> executes but before the second time. If, for example, I return <code>fetchMock.flush().then(() =&gt; expect(...))</code>, the returned promise executes before the second call to <code>render()</code> (I believe I can understand why).</p>
  
  <p>How can I wait until the second time <code>render()</code> is called before running <code>expect()</code>?</p>