feat: XHR spying and stubbing working, close #5

Author: bahmutov

README.md

@@ -11,7 +11,7 @@
 ## Known problems
 
 - [ ] some DOM events are not working when running all tests at once [#4](https://github.com/bahmutov/cypress-react-unit-test/issues/4)
-- [ ] cannot mock server XHR for injected components [#5](https://github.com/bahmutov/cypress-react-unit-test/issues/5)
+- [x] cannot mock server XHR for injected components [#5](https://github.com/bahmutov/cypress-react-unit-test/issues/5)
 - [ ] cannot spy on `window.alert` [#6](https://github.com/bahmutov/cypress-react-unit-test/issues/6)
 
 ## Install
@@ -115,6 +115,7 @@ All components are in [src](src) folder. All tests are in [cypress/integration](
 * [counter-spec.js](cypress/integration/counter-spec.js) clicks on the component and confirms the result
 * [stateless-spec.js](cypress/integration/stateless-spec.js) shows testing a stateless component from [stateless.jsx](src/stateless.jsx)
 * [transpiled-spec.js](cypress/integration/stateless-spec.js) shows testing a component with class properties syntax from [transpiled.jsx](src/stateless.jsx)
+* [users-spec.js](cypress/integration/users-spec.js) shows how to observe XHR requests, mock server responses for component [users.jsx](src/users.jsx)
 
 ## Large examples
 
@@ -126,3 +127,4 @@ Same feature for unit testing components from other framesworks using Cypress
 
 * [cypress-vue-unit-test](https://github.com/bahmutov/cypress-vue-unit-test) for Vue.js
 * [cypress-hyperapp-unit-test](https://github.com/bahmutov/cypress-hyperapp-unit-test) for Hyperapp
+* [cypress-svelte-unit-test](https://github.com/bahmutov/cypress-svelte-unit-test) for Svelte.js

cypress/integration/users-spec.js

@@ -0,0 +1,49 @@
+import { Users } from '../../src/users.jsx'
+import React from 'react'
+import { mount } from '../../lib'
+
+/* eslint-env mocha */
+describe('Users', () => {
+  beforeEach(() => {
+    mount(<Users />)
+  })
+
+  it('fetches 3 users from remote API', () => {
+    cy.get('li').should('have.length', 3)
+  })
+
+  it('can inspect real data in XHR', () => {
+    cy.server()
+    cy.route('/users?_limit=3').as('users')
+    cy.wait('@users').its('response.body').should('have.length', 3)
+  })
+
+  it('can display mock XHR response', () => {
+    cy.server()
+    const users = [{id: 1, name: 'foo'}]
+    cy.route('GET', '/users?_limit=3', users).as('users')
+    cy.get('li').should('have.length', 1)
+      .first().contains('foo')
+  })
+
+  it('can inspect mocked XHR', () => {
+    cy.server()
+    const users = [{id: 1, name: 'foo'}]
+    cy.route('GET', '/users?_limit=3', users).as('users')
+    cy.wait('@users').its('response.body').should('deep.equal', users)
+  })
+
+  it('can delay and wait on XHR', () => {
+    cy.server()
+    const users = [{id: 1, name: 'foo'}]
+    cy.route({
+      method: 'GET',
+      url: '/users?_limit=3',
+      response: users,
+      delay: 1000
+    }).as('users')
+    cy.get('li').should('have.length', 0)
+    cy.wait('@users')
+    cy.get('li').should('have.length', 1)
+  })
+})

lib/index.js

@@ -35,6 +35,14 @@ const copyStyles = component => {
   })
 }
 
+function setXMLHttpRequest (w) {
+  // by grabbing the XMLHttpRequest from app's iframe
+  // and putting it here - in the test iframe
+  // we suddenly get spying and stubbing 😁
+  window.XMLHttpRequest = w.XMLHttpRequest
+  return w
+}
+
 /* eslint-env mocha */
 export const mount = jsx => {
   // include React and ReactDOM from CDN to force DOM to register all DOM event listeners
@@ -51,7 +59,8 @@ export const mount = jsx => {
   document.write(html)
   document.close()
 
-  cy.window({ log: false})
+  cy.window({log: false})
+    .then(setXMLHttpRequest)
     .its('ReactDOM.render')
     .then(render => {
       Cypress._component = render(jsx, document.getElementById('app'))

package.json

@@ -29,6 +29,7 @@
   "devDependencies": {
     "@cypress/webpack-preprocessor": "^1.1.2",
     "@types/node": "^8.5.2",
+    "axios": "^0.17.1",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",

src/users.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import axios from 'axios'
+
+export class Users extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      users: []
+    }
+  }
+
+  componentDidMount () {
+    axios.get('http://jsonplaceholder.typicode.com/users?_limit=3')
+    .then(response => {
+      // JSON responses are automatically parsed.
+      this.setState({
+        users: response.data
+      })
+    })
+  }
+
+  render () {
+    return <div>
+      {this.state.users.map(user =>
+        <li key={user.id}><strong>{user.id}</strong> - {user.name}</li>)}
+    </div>
+  }
+}