chore: trying to figure out why #43 happens

Author: bahmutov

cypress/integration/ajax-list-spec.js

@@ -1,25 +1,37 @@
+/// <reference types="cypress" />
+'use strict'
+
 import AjaxList from '../../components/AjaxList.vue'
 const mountVue = require('../..')
 
 /* eslint-env mocha */
 describe('AjaxList', () => {
-  beforeEach(mountVue(AjaxList))
+  // because this component loads data right away
+  // we need to setup XHR intercepts BEFORE mounting it
+  // thus each test will first do its "cy.route"
+  // then will mount the component
 
   it('loads list of posts', () => {
     // now we can observe the XHR to the server
     cy.get('li').should('have.length', 3)
   })
 
+
   it('can inspect real data in XHR', () => {
     cy.server()
     cy.route('/users?_limit=3').as('users')
+    mountVue(AjaxList)()
+
     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')
+    mountVue(AjaxList)()
+
     cy.get('li').should('have.length', 1)
       .first().contains('foo')
   })
@@ -28,6 +40,8 @@ describe('AjaxList', () => {
     cy.server()
     const users = [{id: 1, name: 'foo'}]
     cy.route('GET', '/users?_limit=3', users).as('users')
+    mountVue(AjaxList)()
+
     cy.wait('@users').its('response.body').should('deep.equal', users)
   })
 
@@ -40,6 +54,8 @@ describe('AjaxList', () => {
       response: users,
       delay: 1000
     }).as('users')
+    mountVue(AjaxList)()
+
     cy.get('li').should('have.length', 0)
     cy.wait('@users')
     cy.get('li').should('have.length', 1)

src/index.js

@@ -1,3 +1,5 @@
+/// <reference types="cypress" />
+
 const Vue = require('vue/dist/vue')
 const { stripIndent } = require('common-tags')