automatically polyfill window.fetch with XMLHttpRequest

[bahmutov]

• Closes polyfill window.fetch  #7710

User facing changelog

Cypress will automatically replace window.fetch with polyfill that drops down to XMLHttpRequest object that can be intercepted using built-in Network API

Additional details

• polyfill using https://github.com/developit/unfetch that is small and has essential fetch methods
• testing against pull request in recipes where I have removed the existing polyfills

# in the local recipes repo ~/git/cypress-example-recipes
git checkout fetch-polyfill
cd examples/stubbing-spying__window-fetch
npm start

# run this repo run against that recipe
yarn dev --project ~/git/cypress-example-recipes/examples/stubbing-spying__window-fetch

How has the user experience changed?

Before if the web application used fetch, the user had to set up polyfill / delete window.fetch on each window load in order to use our network features. With this feature, the user can simply set in cypress.json experimentalFetchPolyfill: true and Cypress automatically polyfills window.fetch via XMLHttpRequest which we stub

Open questions

• do we need an experimental flag? I am afraid that unfetch might be different from the standard fetch behavior. For example, it does not support streaming responses... If we automatically polyfill native fetch, web apps that do not even need network support suddenly would stop working inside Cypress. Answer: Yes

PR Tasks

• Have tests been added/updated?
  • need e2e tests in packages/server
  • added test job against update window.fetch recipe to rely on automatic polyfill cypress-example-recipes#503
• Has the original issue been tagged with a release in ZenHub?
• Has a PR for user-facing changes been opened in cypress-documentation? Add experimentalFetchPolyfill docs cypress-documentation#2881
• Have new configuration options been added to the cypress.schema.json?

[cypress-bot]

Thanks for the contribution! Below are some guidelines Cypress uses when doing PR reviews.

• Please write [WIP] in the title of your Pull Request if your PR is not ready for review - someone will review your PR as soon as the [WIP] is removed.
• Please familiarize yourself with the PR Review Checklist and feel free to make updates on your PR based on these guidelines.

PR Review Checklist

If any of the following requirements can't be met, leave a comment in the review selecting 'Request changes', otherwise 'Approve'.

User Experience

• The feature/bugfix is self-documenting from within the product.
• The change provides the end user with a way to fix their problem (no dead ends).

Functionality

• The code works and performs its intended function with the correct logic.
• Performance has been factored in (for example, the code cleans up after itself to not cause memory leaks).
• The code guards against edge cases and invalid input and has tests to cover it.

Maintainability

• The code is readable (too many nested 'if's are a bad sign).
• Names used for variables, methods, etc, clearly describe their function.
• The code is easy to understood and there are relevant comments explaining.
• New algorithms are documented in the code with link(s) to external docs (flowcharts, w3c, chrome, firefox).
• There are comments containing link(s) to the addressed issue (in tests and code).

Quality

• The change does not reimplement code.
• There's not a module from the ecosystem that should be used instead.
• There is no redundant or duplicate code.
• There are no irrelevant comments left in the code.
• Tests are testing the code’s intended functionality in the best way possible.

Internal

• The original issue has been tagged with a release in ZenHub.

[cypress]

---

Test summary

7588 • 0 • 119 • 0

---

Run details

Project	cypress
Status	Passed
Commit	05e89b1
Started	Jun 15, 2020 2:56 PM
Ended	Jun 15, 2020 3:03 PM
Duration	07:04 💡
OS	Linux Debian - 10.1
Browser	Multiple

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[JessicaSachs]

This is super succinct. I read through unfetch. Nice find!

I have one nit which is that I'd really love to avoid toString + eval. I wrote notes on how we might use the proper XMLHttpRequest object. LMK if that makes sense.

[JessicaSachs]

I think we can pretty easily avoid eval + toString and use the correct XMLHttpRequest object if we patch-package and take in the XMLHttpRequest (or content window) reference

[bahmutov]

ughh, but that would be more complex to set up and maintain. Remember the has-binary2 disaster

[bahmutov]

Note: the webpack bundles the following file

var fetchPolyfill = __webpack_require__("../driver/node_modules/unfetch/dist/unfetch.mjs")["default"];

which in the unfetch package.json file is listed under module and jsnext:main