`cy.intercept` request.body is ArrayBuffer for JSON requests with long Cyrillic strings

Current behavior

When sending request with cyrillic strings in json data to url, stubbed by cy.intercept, request.body object is ArrayBuffer, not plain object.

// intercept some url with any data
cy.intercept(URL, {
  body: { result: 'ok' },
}).as('testRequest');

// send json request with cyrillic string in data (length must be more than 6)
sendRequest({name: "Фрауиванович"})
cy.wait('@testRequest')
    .its('request')
    .then((req) => {
      console.log(req.body); // is ArrayBuffer object, not plain object
});

// send json request without cyrillic in data
sendRequest({name: "FrausIvanovich"})
cy.wait('@testRequest')
    .its('request')
    .then((req) => {
      console.log(req.body); // is plain object, as expected
});

Desired behavior

When sending request with cyrillic strings in json data to url, stubbed by cy.intercept, request.body is plain object

// send json request with cyrillic string in data (length must be more than 6)
sendRequest({name: "Фрауиванович"})
cy.wait('@testRequest')
    .its('request')
    .then((req) => {
      console.log(req.body); // is plain object
});

Test code to reproduce

Test code to reproduce: https://github.com/KarKarbI4/cypress-cyrillic-intercept-issue/blob/main/cypress/integration/spec.js Test repo: https://github.com/KarKarbI4/cypress-cyrillic-intercept-issue

Versions

Cypress: cypress@7.1.0, cypress@7.2.0 Browser: Google Chrome 90 OS: MacOS Big Sur 11.2.3

[sainthkh]

I submited PR at https://github.com/bevry/istextorbinary/pull/214. It’s now awaiting external fix.

[jennifer-shehane]

The example you gave would ‘sometimes fail’ the other assertions because the requests were being made synchronously, so sometimes the 3rd definition had already run by the time the first wait ran.

Regardless, the last test below will always reliably fail, as the response is an ArrayBuffer when the response data is Фраусиванович. Seems unexpected to me.

it('cy.intercept cyrillyc issue test', () => {
  cy.intercept('https://example.com/test', {
    body: { result: 'ok' },
  }).as('testRequest');

  cy.window().then(() => {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://example.com/test');
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify({ name: 'Frausivanovich' }))
  })
  cy.wait('@testRequest')
    .its('request')
    .then((req) => {
      expect(req.body).to.not.be.an('ArrayBuffer'); // ✅ passes
      expect(req.body).to.be.an('object'); // ✅ passes
    });

  cy.window().then(() => {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://example.com/test');
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify({ name: 'Фраус' }))
  })

  cy.wait('@testRequest')
    .its('request')
    .then((req) => {
      expect(req.body).to.not.be.an('ArrayBuffer'); // ✅ passes
      expect(req.body).to.be.an('object');  // ✅ passes
    });

  cy.window().then(() => {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://example.com/test');
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify({ name: 'Фраусиванович' }))
  })

  cy.wait('@testRequest')
    .its('request')
    .then((req) => {
      expect(req.body).to.be.an('ArrayBuffer'); // ✅ passes
      expect(req.body).to.be.an('object'); // ❗️ fails
    });
});