title: How to test a react component renders a list with jest
body: <p>I'm trying to understand how unit testing works and have built a small React app that renders out a list of Pokemon.
  What I am trying to do is write a unit test that checks to see if the list is rendering properly. However, the snapshot that is generated shows that it only renders the 'loading ...' text which is what it is supposed to do while waiting for a response from the API.
  What am I doing wrong?</p>
  
  <p><strong>PokemonList.test.js</strong></p>
  
  <pre><code>import React from 'react';
  import PokemonList from '../components/PokemonList';
  import renderer from 'react-test-renderer';
  
  describe('PokemonList component renders a list of Pokemon', () =&gt; {
      it('renders correctly', () =&gt; {
          const fetched = true;
          const loading = true;
          const species = [{
              "0": {"name": "bulbasaur"},
              "1": {"name": "ivysaur"},
              "2": {"name": "venusaur"}
          }];
          const rendered = renderer.create(
              &lt;PokemonList fetched={fetched} loading={loading} species={species} /&gt;
          );
          expect(rendered.toJSON()).toMatchSnapshot();
      });
  });
  </code></pre>
  
  <p><strong>PokemonList.js</strong></p>
  
  <pre><code>// The PokemonList component show nothing when it mounts for the first time.
  // But right before it mounts to the DOM, it makes an API call to fetch the
  // first 151 Pokemon for the API and then displays them using the Pokemon component.
  
  import React from 'react';
  import Pokemon from './Pokemon';
  
  class PokemonList extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              species: [],
              fetched: false,
              loading: false,
          };
      }
  
      componentWillMount() {
          this.setState({
              loading: true
          });
          fetch('http://pokeapi.co/api/v2/pokemon?limit=151').then(res=&gt;res.json())
          .then(response=&gt;{
              this.setState({
                  species: response.results,
                  loading: true,
                  fetched: true
              });
          });
      }
  
      render() {
          const {fetched, loading, species} = this.state;
          let content ;
          if (fetched) {
              content = &lt;div className="pokemon--species--list"&gt;{species.map((pokemon, index) =&gt; &lt;Pokemon key={pokemon.name} id={index+1} pokemon={pokemon} /&gt;)}&lt;/div&gt;
          } else if (loading &amp;&amp; !fetched) {
              content = &lt;p className="loading"&gt; Loading ...&lt;/p&gt;
          } else {
              content = &lt;div/&gt;
          }
          return (
              &lt;div&gt;
                  {content}
              &lt;/div&gt;
          )
      }
  }
  
  export default PokemonList;
  </code></pre>
  
  <p><strong>PokemonList.test.js.snap</strong></p>
  
  <pre><code>exports[`PokemonList component renders a list of Pokemon renders correctly 1`] = `
  &lt;div&gt;
    &lt;p
      className="loading"&gt;
       Loading ...
    &lt;/p&gt;
  &lt;/div&gt;
  `;
  </code></pre>