Introducción

Cuando se trata de pruebas de un extremo a otro, controlar las dependencias externas puede mejorar significativamente la confiabilidad y velocidad de sus pruebas. Cypress, un marco de prueba web moderno, ofrece poderosas capacidades para simular y bloquear solicitudes HTTP, lo que le permite simular diferentes escenarios sin depender de servicios backend reales. En esta publicación, exploraremos cómo aprovechar cy.intercept() de Cypress para simular y bloquear llamadas API y hacer que sus pruebas sean más sólidas y eficientes.

¿Por qué burlarse y atacar?

La burla y el stubping de solicitudes HTTP en Cypress brindan varios beneficios:

1. Aislamiento: Pruebe el frontend independientemente del backend, asegurándose de que sus pruebas no se vean afectadas por cambios o interrupciones del backend.
2. Velocidad: Reduzca el tiempo de ejecución de la prueba evitando llamadas de red reales.
3. Confiabilidad: Cree condiciones de prueba predecibles y consistentes mediante la simulación de varias respuestas y casos extremos.
4. Flexibilidad: Pruebe diferentes escenarios como errores, respuestas lentas y diferentes cargas de datos sin necesidad de cambios de backend.

Configurando ciprés

Si aún no has instalado Cypress, puedes configurarlo con los siguientes comandos:

npm install cypress --save-dev
npx cypress open

Asegúrese de tener lista la estructura básica del proyecto Cypress antes de continuar.

Usando cy.intercept()

El comando cy.intercept() en Cypress le permite interceptar y modificar solicitudes y respuestas de red. Reemplaza el comando obsoleto cy.route() y ofrece más flexibilidad y potencia.

Ejemplo básico
Comencemos con un ejemplo básico en el que simulamos una respuesta API:

// cypress/integration/mock_basic.spec.js
describe('Mocking API Responses', () => {
  it('should display mocked data', () => {
    cy.intercept('GET', '/api/todos', {
      statusCode: 200,
      body: [
        { id: 1, title: 'Mocked Todo 1', completed: false },
        { id: 2, title: 'Mocked Todo 2', completed: true }
      ]
    }).as('getTodos');

    cy.visit('/todos');
    cy.wait('@getTodos');

    cy.get('.todo').should('have.length', 2);
    cy.get('.todo').first().should('contain.text', 'Mocked Todo 1');
  });
});

En este ejemplo, interceptamos una solicitud GET a /api/todos y proporcionamos una respuesta simulada. as('getTodos') asigna un alias a la solicitud interceptada, lo que facilita su referencia en sus pruebas.

Escenarios de burla avanzados

Simulación de errores
Puedes simular varios estados de error HTTP para probar cómo los maneja tu aplicación:

// cypress/integration/mock_errors.spec.js
describe('Simulating API Errors', () => {
  it('should display error message on 500 response', () => {
    cy.intercept('GET', '/api/todos', {
      statusCode: 500,
      body: { error: 'Internal Server Error' }
    }).as('getTodosError');

    cy.visit('/todos');
    cy.wait('@getTodosError');

    cy.get('.error-message').should('contain.text', 'Failed to load todos');
  });
});

Retrasar respuestas
Para probar cómo su aplicación maneja las respuestas lentas de la red, puede introducir un retraso:

// cypress/integration/mock_delays.spec.js
describe('Simulating Slow Responses', () => {
  it('should display loading indicator during slow response', () => {
    cy.intercept('GET', '/api/todos', (req) => {
      req.reply((res) => {
        res.delay(2000); // 2-second delay
        res.send({ body: [] });
      });
    }).as('getTodosSlow');

    cy.visit('/todos');
    cy.get('.loading').should('be.visible');
    cy.wait('@getTodosSlow');
    cy.get('.loading').should('not.exist');
  });
});

Burlarse de escenarios específicos

Burla condicional
Puedes simular respuestas condicionalmente según el cuerpo de la solicitud o los encabezados:

// cypress/integration/mock_conditional.spec.js
describe('Conditional Mocking', () => {
  it('should mock response based on request body', () => {
    cy.intercept('POST', '/api/todos', (req) => {
      if (req.body.title === 'Special Todo') {
        req.reply({
          statusCode: 201,
          body: { id: 999, title: 'Special Todo', completed: false }
        });
      }
    }).as('createTodo');

    cy.visit('/todos');
    cy.get('input[name="title"]').type('Special Todo');
    cy.get('button[type="submit"]').click();

    cy.wait('@createTodo');
    cy.get('.todo').should('contain.text', 'Special Todo');
  });
});

Mejores prácticas para burlarse y atacar

1. Usar alias: Asigne siempre alias a las solicitudes interceptadas usando .as(). Esto hace que sus pruebas sean más legibles y fáciles de depurar.
2. Combinar con accesorios: Almacene grandes datos simulados en archivos de accesorios para una mejor mantenibilidad y legibilidad. Utilice cy.fixture() para cargar accesorios.
3. Evite la burla excesiva: Solo burlese de lo que sea necesario para la prueba. Burlarse demasiado puede llevar a pruebas que no reflejan escenarios del mundo real.
4. Pruebe llamadas API reales: Pruebe periódicamente con el backend real para garantizar que su aplicación funcione correctamente con datos reales.

Conclusión

Burlarse y tropezar en Cypress son técnicas poderosas que pueden hacer que sus pruebas sean más rápidas, más confiables y más fáciles de mantener. Al interceptar solicitudes HTTP y proporcionar respuestas personalizadas, puede crear una amplia gama de escenarios de prueba sin depender de servicios externos. Siga las mejores prácticas y los ejemplos proporcionados en esta guía para dominar la burla y el stubbing en sus pruebas de Cypress.

¡Felices pruebas!