title: React Enzyme - Test `componentDidMount` Async Call
body: <p>everyone.</p>
  
  <p>I'm having weird issues with testing a state update after an async call happening in <code>componentDidMount</code>.</p>
  
  <p>Here's my component code:</p>
  
  <pre><code>'use strict';
  
  
  import React from 'react';
  import UserComponent from './userComponent';
  const request = require('request');
  
  
  class UsersListComponent extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        usersList: []
      };
    }
  
    componentDidMount() {
      request('https://api.github.com/users', (err, res) =&gt; {
        if (!err &amp;&amp; res.statusCode === 200) {
          this.setState({
            usersList: res.slice(0)
          });
        }
        else {
          console.log(err);
        }
      });
    }
  
    render() {
      if (!this.state.usersList.length) {
        return null;
      }
  
      return (
        &lt;div className="users-list"&gt;
          { this._constructUsersList() }
        &lt;/div&gt;
      );
    }
  
    _constructUsersList() {
      return this.state.usersList.map((user, index) =&gt; {
        return (
          &lt;UserComponent
                key={ index }
                name={ user.name }
                age={ user.age } /&gt;
        );
      });
    }
  };
  
  
  export default UsersListComponent;
  </code></pre>
  
  <p>Now, what I'm doing in my test files (I have a setup comprised of Mocha + Chai + Sinon, all working):</p>
  
  <pre><code>import React from 'react';
  import { expect } from 'chai';
  import { shallow, mount, render } from 'enzyme';
  import sinon from 'sinon';
  import UsersListComponent from '../src/usersListComponent';
  
  
  describe('Test suite for UsersListComponent', () =&gt; {
    it('Correctly updates the state after AJAX call in `componentDidMount` was made', () =&gt; {
      const server = sinon.fakeServer.create();
      server.respondWith('GET', 'https://api.github.com/users', [
        200,
        {
          'Content-Type': 'application/json',
          'Content-Length': 2
        },
        '[{ "name": "Reign", "age": 26 }]'
      ]);
      let wrapper = mount(&lt;UsersListComponent /&gt;);
      server.respond();
      server.restore();
      expect(wrapper.update().state().usersList).to.be.instanceof(Array);
      console.log(wrapper.update().state().usersList.length);
    });
  });
  </code></pre>
  
  <p>State does not get updated, even though I call <code>update()</code> on wrapper. Length is still 0. Am I missing something here? Do I need to mock the server response in another way?</p>
  
  <p>Thnx for the help!</p>