React Enzyme - Test `componentDidMount` Async Call : <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>
