title: Does "find" in Cypress wait for GraphQL requests to finish?
body: <p>I am learning to write tests for a MERNQ stack application and I am using cypress as my End to End testing tool. I am trying to make sure that my tests are written correctly so that they work as a long term solution. For now I just have one request for the route in question and I have the following test code:</p>
  
  <pre><code>describe('Song API', () =&gt; {
      it('should show at least one song', () =&gt; {
          cy.server();
          // cy.route('GET', '/graphql').as('graphql');
          cy.route({
              method: 'GET', // Route all GET requests
              url: 'http://localhost:8080/graphql', // that have a URL that matches '/graphql'
              response: {
                  data: {
                      loading: false,
                      songs: [
                          {
                              id: 1,
                              name: 'Boo Ya',
                          },
                      ],
                  },
              },
          }).as('getSongs');
          cy.visit('http://localhost:8080').then(() =&gt; {
              cy.get('.collection').find('.collection-item');
          });
      });
  });
  </code></pre>
  
  <p>I don't understand what about this code makes it wait for the graphql response to finish before running and additionally I am not getting the data that I set but instead the actual data from the database.</p>
  
  <p>This seems very strange to me.</p>
  
  <p>My component looks like this:</p>
  
  <pre><code>import React from 'react';
  import gql from 'graphql-tag';
  import { graphql } from 'react-apollo';
  
  const SongList = ({ data }) =&gt; {
      // console.log(data);
      function renderSongs() {
          console.log(data);
          if (data.loading) {
              return &lt;p&gt;Loading...&lt;/p&gt;;
          } else {
              return data.songs.map(song =&gt; {
                  return (
                      &lt;li key={song.key} className="collection-item"&gt;
                          {song.title}
                      &lt;/li&gt;
                  );
              });
          }
      }
  
      return &lt;ul className="collection"&gt;{renderSongs()}&lt;/ul&gt;;
  };
  
  const query = gql`
      query getSongs {
          songs {
              key: id
              title
          }
      }
  `;
  
  export default graphql(query)(SongList);
  </code></pre>
  
  <p>Any thoughts or remarks?</p>