title: Testing a React component with Jest / Enzyme & Axios
body: <p>I have a react component that uses Axios to fetch data:</p>
  
  <pre><code>import React from "react";
  import axios from "axios";
  
  export default class Example extends React.Component {
      constructor() {
          super();
          axios("http://localhost/data.json").then(response =&gt; {
              this.setState({
                  data: response.data
              });
          });
      }
  
      render() {
          return &lt;ul&gt;{this.data.map(item =&gt; &lt;li&gt;{item}&lt;/li&gt;)}&lt;/ul&gt;;
      }
  }
  </code></pre>
  
  <p>I'm trying to write some basic tests around this component. First I just wanted the component to render...</p>
  
  <pre><code>import React from "react";
  import { shallow } from "enzyme";
  
  import Example from "./example";
  
  it.only("Renders", () =&gt; {
      const wrapper = shallow(&lt;Example /&gt;);
      const li = wrapper.find("li");
      expect(li.length).toBe(2); // there are two items in the data file
  });
  </code></pre>
  
  <p>...but the first thing I get is a network error from axios.</p>
  
  <p>I'm new to testing and I know for the testing of components I need to get into mocking etc, but I was under the impression that you could still use live endpoints although it's not optimal.</p>
  
  <p>Is there a way to tell Jest to wait until the component has rendered before making the assertions?</p>
  
  <p>Any advice would be appreciated!</p>