automatically polyfill window.fetch with XMLHttpRequest

circle.yml

@@ -1273,9 +1273,8 @@ jobs:
       - test-binary-against-repo:
           repo: cypress-example-recipes
           command: npm run test:ci
-          # https://github.com/cypress-io/cypress-example-recipes/pull/501
-          pull_request_id: 501
-          folder: examples/unit-testing__lit-element
+          pull_request_id: 503
+          folder: examples/stubbing-spying__window-fetch
 
   "test-binary-against-kitchensink":
     <<: *defaults
@@ -1590,11 +1589,11 @@ linux-workflow: &linux-workflow
           - build-binary
           - build-npm-package
     - test-binary-against-recipe-pull-request:
-        name: Shadow DOM recipe
+        name: Test fetch polyfill
         filters:
           branches:
             only:
-              - pull/7469
+              - polyfill-fetch
         requires:
           - build-binary
           - build-npm-package

package.json

@@ -72,6 +72,9 @@
       "pre-commit": "lint-staged"
     }
   },
+  "dependencies": {
+    "unfetch": "4.1.0"
+  },
   "devDependencies": {
     "@cypress/bumpercar": "2.0.12",
     "@cypress/commit-message-install": "3.1.3",

packages/driver/README.md

@@ -44,6 +44,13 @@ In the browser
 localStorage.debug = "cypress:driver"
 ```
 
+## Patches
+
+- `sinon`
+- `unfetch` to polyfill `fetch`. Added `this` and changed function to arrow function to be able to load `fetch` in the spec window, but point the polyfill at the `window.XMLHttpRequest` in the application under test window.
+
+Note: when creating a patch, make sure there is no `package-lock.json` file! Also rename the patch to have ".dev.patch" extension.
+
 <!-- ## Catalog of Events
 
 TODO: this data is accurate but also somewhat out of date.

packages/driver/package.json

@@ -66,6 +66,7 @@
     "text-mask-addons": "3.8.0",
     "underscore": "1.9.1",
     "underscore.string": "3.3.5",
+    "unfetch": "4.1.0",
     "url-parse": "1.4.7",
     "vanilla-text-mask": "5.1.1",
     "wait-on": "3.3.0",

packages/driver/src/cypress/cy.js

@@ -31,6 +31,8 @@ const $CommandQueue = require('./command_queue')
 const $VideoRecorder = require('../cy/video-recorder')
 const $TestConfigOverrides = require('../cy/testConfigOverrides')
 
+const fetchPolyfill = require('unfetch').default
+
 const privateProps = {
   props: { name: 'state', url: true },
   privates: { name: 'state', url: false },
@@ -258,6 +260,11 @@ const create = function (specWindow, Cypress, Cookies, state, config, log) {
 
       contentWindow.CSSStyleSheet.prototype.insertRule = _.wrap(insertRule, cssModificationSpy)
       contentWindow.CSSStyleSheet.prototype.deleteRule = _.wrap(deleteRule, cssModificationSpy)
+
+      // drop "fetch" polyfill that replaces it with XMLHttpRequest
+      // from the app iframe that we wrap for network stubbing
+      // This works because the fetchPolyfill relies on `this.XMLHttpRequest`
+      contentWindow.fetch = fetchPolyfill.bind(contentWindow)
     } catch (error) {} // eslint-disable-line no-empty
   }
 

yarn.lock

@@ -24721,6 +24721,11 @@ undertaker@^1.2.1:
     object.reduce "^1.0.0"
     undertaker-registry "^1.0.0"
 
+[email protected]:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.1.0.tgz#6ec2dd0de887e58a4dee83a050ded80ffc4137db"
+  integrity sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg==
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"