Not able to test error states with Cypress

I have followed below link to setup miragejs with Cypress.

https://miragejs.com/quickstarts/cypress/setup

Issue: Setup doesn’t work for error responses.

When I add below code in my test.

  /* skipping this test for now becuase miragjs,
   doesn't return error response as expected. */
  server.del('/users/1', () => {
    return new Response(400, {}, { message: 'Invalid input' });
  });

I actually receive below response in my application code (My application is using plain fetch , no axios).

To my surprise response from fetch has status as 200 but has payload as my error response.

{"type":"default","status":200,"ok":true,"statusText":"OK","headers":{"map":{"content-type":"application/json"}},"url":"https://localhost:3030/stores/1","_bodyInit":"{\"message\":\"Invalid input\"}","_bodyText":"{\"message\":\"Invalid input\"}"}

Can someone help me to solve this, I am blocked.

[yugandhar-pathi]

@asantos00 Thanks a lot !! for your quick fix. Your fix just works great !!

[gtsop-pf]

Following up from my previous comment, I managed to get this working by keeping a reference of the Response class on Cypress and using that for my error codes. Here is my code:

cypress/support/index.js

import './commands';

import { setupCypressPassthrough } from '../../src/mirage';

setupCypressPassthrough();

src/mirage/setup-cypress-passthrough.js

import { makeServer } from './make-server';
import { Response } from 'miragejs';

export function setupCypressPassthrough() {
  // https://miragejs.com/quickstarts/cypress/#step-3-have-cypress-define-a-proxy-function-for-your-apps-api-requests
  Cypress.on('window:before:load', (win) => {
    win.handleFromCypress = function (request) {
      return fetch(request.url, {
        method: request.method,
        headers: request.requestHeaders,
        body: request.requestBody,
      }).then((res) => {
        let content = res.headers.get('content-type').includes('application/json')
          ? res.json()
          : res.text();
        return new Promise((resolve) => {
          content.then((body) => resolve([res.status, res.headers, body]));
        });
      });
    };
  });

  // https://miragejs.com/quickstarts/cypress/#step-5-write-tests-using-your-mirage-server
  let server;

  beforeEach(function () {
    server = makeServer({
      environment: 'development',
    });

    // provide server instance via `this.server` to test cases (`it` blocks)
    cy.wrap(server).as('server');

    cy.wrap(Response).as('Response');
  });

  afterEach(() => {
    server.shutdown();
  });
}

cypress/integration/home.spec.js

describe('Pages | Home', function () {
  it("Shows an error message when shops won't load", function () {
    cy.visit('/');

    this.server.get('/api/user/stores', () => {
      return new this.Response(401, {}, { error: 'fail' });
    });
  });
});