title: Unit testing react component that makes ajax calls using JEST
body: <p>I've a react component that makes AJAX call in <code>componentDidMount</code> method. While I try to render it using <code>React.addons.TestUtils</code>, the component gets rendered without making AJAX call. How would I test react component using jest so that it makes AJAX call? Should I need to use phantomJS (or browser like env) as well to provide DOM abilities to react component?</p>
  
  <p><strong>React Component:</strong></p>
  
  <pre><code>return React.createClass({
  
    componentDidMount : function() {
      $.ajax({
      ... makes http request
      })
    }
  
    render : function() {
      &lt;div&gt;
        //view logic based on ajax response...
      &lt;/div&gt;
    }
  });
  </code></pre>
  
  <p><strong>TestCase:</strong></p>
  
  <pre><code>jest.dontMock(../MyComponent);
  
  var React = require('react/addons');
  
  var TestUtils = React.addons.TestUtils;
  
  var MyComponent = require(../MyComponent);
  
  describe('Sample Test', function(){     
  
      it('To Render the component', function() {
  
         var component = &lt;MyComponent /&gt;;
  
         var DOM = TestUtils.renderIntoDocument(component);
  
         .... // Some other code... 
         });
  })
  </code></pre>