Per the 0.17.0 release at the very least window.fetch will actually work properly now.

It's on our radar to adding stubbing to these as well. We're a lot closer to being able to do it now.

I would love to see this feature. I am very excited about stubbing. It will definitely solve a lot of problems when doing these tests. window.fetch is very widely used by now 👍

My team would love this too! window.fetch is very commonly used in React applications now, so I'm sure other teams would appreciate this as well.

Same here. We use fetch for it's simplicity in our react application. Until yet we use our own proxy that mocks the ajax requests, but your XHR approuch is much more readable.

Maybe you could offer a way to use fetch outside the service-worker's context first and in a second phase you could add fetch in service-workers?

There is now an example of using cy.stub to control window.fetch. It's not the same API as cy.route but it will work today!

We have a bunch of examples of it here: https://github.com/cypress-io/cypress-example-recipes#controlling-behavior-with-spies-stubs-and-clocks

As not all browsers support window.fetch yet, I guess most use some form of polyfill for this. Then one could do something like this:

cy
  .visit('<some url>', {
    onBeforeLoad: (win) => {
      win.fetch = null
    }
  })

After doing this, the polyfill will just use XHR instead of fetch in the test, and one can use the normal Cypress's capturing/mocking tools. What do you think of this, @brian-mann?

Thank you for the alternative approach. Will try that.
What is the state of the real implementation? https://github.com/cypress-io/cypress/projects/20

@stigkj thx for the workaround/solution.
the solution in https://github.com/cypress-io/cypress-example-recipes#controlling-behavior-with-spies-stubs-and-clocks was working for several projects for me.
Now I need to test an app using redux-saga with yield call(POST, { url: '/api/login/users', options }); and there it is not working, your solution is working!

@stigkj thanks for the work around, like @mvandebunt this has worked for me in Chromium 56 :)

I find this a bit easier than the spy approach. I'm looking forward to Cypress getting better support for window.fetch :)

Yeah, it doesn't work for me either. My login fetch gets a 415 (Unsupported Content-Type).

Same here. We use a POST request to make a login, passing in the username and password in the request's body as a JSON object. However, using the experimental polyfill the request headers are changed, and the Content-Type is now text/plain;charset=UTF-8, which our backend server rejects.

I think this happens because we utilize the Headers class in our fetch call, and don't pass a plain object (e.g. { 'Content-Type': 'application/json' }). We do polyfill Headers (using fetch-headers), but seems like the polyfill used by experimentalFetchPolyfill (unfetch) doesn't support them even when they're polyfilled.

This workaround (in our app code) works, although slightly awkward:

fetch(url, {
   ...
-  headers,
+  headers: Object.fromEntries(headers)
})

Is it valid to use fetch polyfill called whatwg-fetch to capture fetch ?

@baeharam I did this for a project and it worked just fine.
I just ran into a Problem with very large response payloads.
If the response was bigger tham ~1mb the request failed.
Thats not a problem with the polyfill though, but rather with the way cypress mocks xhr requests.

@mefechoel Thanks for your feedback! I'll try whatwg-fetch for my graphql query 😄

Is there a way to only replace window.fetch on stubbed routes?

Released in 5.1.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v5.1.0, please open a new issue.

The features requested in this issue are now possible as part of cy.route2().

cy.route2() is currently experimental and requires being enabled by passing "experimentalNetworkStubbing": true through your Cypress configuration. This will eventually be merged in as part of our standard API.

Please see the cy.route2() docs for full details: https://on.cypress.io/route2

If you encounter any issues or unexpected behavior while using cy.route2() we encourage you to open a new issue so that we can work out all the issues before public release. Thanks!