title: How to TEST async calls made in componentDidMount that set the state of React Component
body: <p>What is the best way to <strong>test that an async call within <code>componentDidMount</code> sets the state for a React component?</strong> For context, the libraries I'm using for testing are <code>Mocha</code>, <code>Chai</code>, <code>Enzyme</code>, and <code>Sinon</code>.</p>
  
  <p>Here's an example code:</p>
  
  <pre><code>/* 
   * assume a record looks like this:
   * { id: number, name: string, utility: number }
   */
  
  // asyncComponent.js
  class AsyncComponent extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              records: []
          };
      }
  
      componentDidMount() {
          // assume that I'm using a library like `superagent` to make ajax calls that returns Promises
  
          request.get('/some/url/that/returns/my/data').then((data) =&gt; {
              this.setState({
                  records: data.records
              });
          });
      }
  
      render() {
          return (
              &lt;div className="async_component"&gt;
                  { this._renderList() }
              &lt;/div&gt;
          );
      }
  
      _renderList() {
          return this.state.records.map((record) =&gt; {
              return (
                  &lt;div className="record"&gt;
                      &lt;p&gt;{ record.name }&lt;/p&gt;
                      &lt;p&gt;{ record.utility }&lt;/p&gt;
                  &lt;/div&gt;
              );
          });
      }
  }
  
  
  // asyncComponentTests.js
  describe("Async Component Tests", () =&gt; {
      it("should render correctly after setState in componentDidMount executes", () =&gt; {
          // I'm thinking of using a library like `nock` to mock the http request
  
         nock("http://some.url.com")
             .get("/some/url/that/returns/my/data")
             .reply(200, {
                 data: [
                     { id: 1, name: "willson", utility: 88 },
                     { id: 2, name: "jeffrey", utility: 102 }
                 ]
             });
  
         const wrapper = mount(&lt;AsyncComponent /&gt;);
  
         // NOW WHAT? This is where I'm stuck.
      });
  });
  </code></pre>