Cypress: ZeptoJS XHR request not stubbed

[rbung]

Current behavior:

I migrate my site from jquery to zepto and I have some tests where I stub XHR requests with Cypress. Now, stubbing seems not to work with zepto.

Desired behavior:

Cypress should be able to stubbed XHR requests done with zepto

Steps to reproduce:

I made a repo to illustrate the issue : https://github.com/rbung/CypressZeptoIssue

Versions

Cypress version 3 & 2 seems to be impacted.
I'm working on MacOS.

[jennifer-shehane]

Yeah, so the request is actually going out and is mocking a response, BUT, I see that the response body is empty, which should not be the case since you provided a response.

My example code expanding on https://github.com/rbung/CypressZeptoIssue:

context('xhr is stub', function() {
  beforeEach(function() {
    cy.server()
    cy.route('api/tags', { tags: 'xhr is stub' }).as('fetchTags')
  })

  it('should stub XHR with zepto', function() {
    cy.visit('http://localhost:3000/zepto.html')
    cy.wait('@fetchTags').then((xhr) => {
      expect(xhr.status).to.eq(200)
      expect(xhr.response.body).to.have.property('tags', 'xhr is stub' )
    })
  })
})

[keraton]

Hi,

We found the root for this issue :
Apparently zepto are overriding the setRequestHeader by their own setRequestHeader (you can see the Zepto code on it). And apparently cypress is not happy with it.

The work around is to set setRequestHeader back with the native setRequestHeader :

 $.ajax({
    url: 'https://conduit.productionready.io/api/tags',
    success: function (data) {
      appDiv.innerHTML += `<p>${JSON.stringify(data)}</p>`
    },
    xhrFields : {
      setRequestHeader : new XMLHttpRequest().setRequestHeader
    }
  })

I hope this help.

[jennifer-shehane]

@keraton Nice debugging work! We can definitely look into this now - because this should not be happening.