feat: add experimental fetch polyfill support (#370)

for https://www.cypress.io/blog/2020/06/29/experimental-fetch-polyfill/

Author: bahmutov

README.md

@@ -531,6 +531,7 @@ Spec | Description
 [i18n](cypress/component/advanced/i18n) | Testing component that uses [Vue I18n](https://kazupon.github.io/vue-i18n/) plugin
 [mocking-axios](cypress/component/advanced/mocking-axios) | Mocking 3rd party CommonJS modules like `axios`
 [mocking-fetch](cypress/component/advanced/mocking-fetch) | Mocking `window.fetch` to stub responses and test the UI
+[fetch-polyfill](ypress/component/advanced/fetch-polyfill) | Using experimental `fetch` polyfill to spy on / stub those Ajax requests using regular Cypress network methods
 [mocking-components](cypress/component/advanced/mocking-components) | Mocking locally registered child components during tests
 [mocking-imports](cypress/component/advanced/mocking-imports) | Stub ES6 imports from the tests
 [render-functions](cypress/component/advanced/render-functions) | Mounting components with a [render function](https://www.tutorialandexample.com/vue-js-render-functions/)

cypress.json

@@ -4,5 +4,6 @@
   "video": false,
   "projectId": "134ej7",
   "testFiles": "**/*spec.js",
-  "experimentalComponentTesting": true
+  "experimentalComponentTesting": true,
+  "experimentalFetchPolyfill": true
 }

cypress/component/advanced/fetch-polyfill/README.md

@@ -0,0 +1,3 @@
+# fetch polyfill example
+
+[Users.vue](Users.vue) is using `fetch` to retrieve the users from the server. We can use [experimental fetch polyfill](https://www.cypress.io/blog/2020/06/29/experimental-fetch-polyfill/) and spy on / stub network requests, see [Users.spec.js](Users.spec.js)

cypress/component/advanced/fetch-polyfill/Users.spec.js

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+import { mount } from 'cypress-vue-unit-test'
+import Users from './Users.vue'
+
+describe('Fetching users with polyfill', () => {
+  it('renders real data', () => {
+    // no mocking
+    mount(Users)
+    cy.get('.user').should('have.length', 3)
+  })
+
+  it('can spy on the fetch requests', () => {
+    cy.server()
+    cy.route('/users?_limit=3').as('users')
+    mount(Users)
+    cy.wait('@users')
+      .its('responseBody.length')
+      .then((length) => {
+        cy.get('.user').should('have.length', length)
+      })
+  })
+
+  it('shows loading UI while fetch is happening', () => {
+    cy.server()
+    cy.route({
+      url: '/users?_limit=3',
+      response: 'fixture:users',
+      delay: 1000,
+    })
+
+    mount(Users)
+    cy.get('.loading').should('be.visible')
+    cy.get('.loading').should('not.exist')
+
+    cy.get('.user').should('have.length', 2)
+  })
+})

cypress/component/advanced/fetch-polyfill/Users.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h1>Users</h1>
+    <ul v-if="users && users.length">
+      <li class="user" v-for="user of users" v-bind:key="user.id">
+        <p><strong>{{user.id}}</strong> - {{user.name}}</p>
+      </li>
+    </ul>
+    <p class="loading" v-else>Loading...</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      users: []
+    }
+  },
+
+  created() {
+    fetch('https://jsonplaceholder.cypress.io/users?_limit=3')
+    .then(response => response.json())
+    .then(list => {
+      this.users = list
+    })
+  }
+}
+</script>

package-lock.json

@@ -93,6 +93,7 @@
     "babel-plugin-istanbul": "6.0.0",
     "common-tags": "1.8.0",
     "debug": "4.1.1",
-    "find-webpack": "2.0.0"
+    "find-webpack": "2.0.0",
+    "unfetch": "4.1.0"
   }
 }

package.json

@@ -1,4 +1,5 @@
 /* eslint-env mocha */
+import unfetch from 'unfetch'
 require('@cypress/code-coverage/support')
 
 /** Initialize an empty document with root element */
@@ -20,6 +21,25 @@ function renderTestingPlatform() {
   return cy.get('#cypress-jsdom', { log: false })
 }
 
+/**
+ * Replaces window.fetch with a polyfill based on XMLHttpRequest
+ * that Cypress can spy on and stub
+ * @see https://www.cypress.io/blog/2020/06/29/experimental-fetch-polyfill/
+ */
+function polyfillFetchIfNeeded() {
+  // @ts-ignore
+  if (Cypress.config('experimentalFetchPolyfill')) {
+    // @ts-ignore
+    if (!cy.state('fetchPolyfilled')) {
+      delete window.fetch
+      window.fetch = unfetch
+      // @ts-ignore
+      cy.state('fetchPolyfilled', true)
+    }
+  }
+}
+
 beforeEach(() => {
   renderTestingPlatform()
+  polyfillFetchIfNeeded()
 })