title: How can I call fetch from within a cypress test?
body: <p>I'm using <a href="https://www.cypress.io/" rel="nofollow noreferrer">Cypress</a>. I have a little React app and a little Flask backend. I want my test to make a call to the backend to set up the state it's going to operate on. I used fetch. This works fine. Except Cypress is mad and doesn't consider the test a success. I am not a javascript developer really so this might be obvious, but I can't figure out how to make it happy.</p>
  <p>This is my test code:</p>
  <pre class="lang-js prettyprint-override"><code>    it.only(&quot;edits a job&quot;, async () =&gt; {
          const now = new Date().getTime()
          const title = `Edit-This-${now}`
          const newTitle = `SUCCESS-EDIT-${now}`
          const company = `Edit Company-${now}`
          const link = `https://example.com/edit-me-${now}`
          const status = &quot;Edit Test&quot;
          const body = JSON.stringify({company, title, link, status})
          await fetch('/add_job', {method: 'post', headers: {'Content-Type': 'application/json'}, body: body})
          cy.visit(&quot;http://localhost:3000/jobs_list&quot;)
          cy.contains(title)
          cy.contains(company)
          cy.contains(link)
          cy.contains(status)
  
          cy.get(`[name=edit-${title}`).click()
          cy.get(`[value=${title}`).clear().type(newTitle)
          cy.get(`[name=save-${newTitle}`).click()
  
          cy.contains(newTitle)
          console.log(&quot;what the heck&quot;)
          })
  </code></pre>
  <p>This seems to work just fine.  But at the end, there's a CypressError:</p>
  <pre><code>Cypress command timeout of 4530ms exceeded. (and Mocha's done() called multiple times)
  </code></pre>
  <p>I also tried not using async/await and putting the steps inside a <code>then</code> after fetch, but that didn't help. Passing <code>done</code> to the it block and calling <code>done()</code> at the end of that made it not run anything. That makes sense because cypress steps look synchronous but are in fact not, so it would have hit <code>done()</code> before executing any of them.</p>
  <p>Making the function passed to <code>it</code> not async and changing fetch to</p>
  <pre class="lang-js prettyprint-override"><code>cy.request('POST', 'http://localhost:3000/add_job', {'Content-Type': 'application/json', company, title, link, status})
  </code></pre>
  <p>instead of <code>fetch</code> seems to have worked, but I'd like to understand why.</p>