Einführung

Wenn es um End-to-End-Tests geht, kann die Kontrolle externer Abhängigkeiten die Zuverlässigkeit und Geschwindigkeit Ihrer Tests erheblich verbessern. Cypress, ein modernes Webtest-Framework, bietet leistungsstarke Funktionen zum Verspotten und Stubbing von HTTP-Anfragen, sodass Sie verschiedene Szenarien simulieren können, ohne auf tatsächliche Backend-Dienste angewiesen zu sein. In diesem Beitrag untersuchen wir, wie Sie cy.intercept() von Cypress zum Verspotten und Stubbing von API-Aufrufen nutzen können, um Ihre Tests robuster und effizienter zu machen.

Warum Spott und Stubbing?

Das Verspotten und Stubbing von HTTP-Anfragen in Cypress bietet mehrere Vorteile:

1. Isolation: Testen Sie das Frontend unabhängig vom Backend und stellen Sie sicher, dass Ihre Tests nicht durch Backend-Änderungen oder Ausfälle beeinträchtigt werden.
2. Geschwindigkeit: Reduzieren Sie die Testausführungszeit, indem Sie tatsächliche Netzwerkaufrufe vermeiden.
3. Zuverlässigkeit: Erstellen Sie vorhersehbare und konsistente Testbedingungen, indem Sie verschiedene Reaktionen und Randfälle simulieren.
4. Flexibilität: Testen Sie verschiedene Szenarien wie Fehler, langsame Antworten und unterschiedliche Datennutzlasten, ohne dass Backend-Änderungen erforderlich sind.

Cypress einrichten

Wenn Sie Cypress noch nicht installiert haben, können Sie es mit den folgenden Befehlen einrichten:

npm install cypress --save-dev
npx cypress open

Stellen Sie sicher, dass Sie über die grundlegende Cypress-Projektstruktur verfügen, bevor Sie fortfahren.

Verwendung von cy.intercept()

Mit dem Befehl cy.intercept() in Cypress können Sie Netzwerkanforderungen und -antworten abfangen und ändern. Es ersetzt den veralteten Befehl cy.route() und bietet mehr Flexibilität und Leistung.

Grundlegendes Beispiel
Beginnen wir mit einem einfachen Beispiel, in dem wir eine API-Antwort verspotten:

// 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');
  });
});

In diesem Beispiel fangen wir eine GET-Anfrage an /api/todos ab und geben eine simulierte Antwort. Das as('getTodos') weist der abgefangenen Anfrage einen Alias ​​zu, was die Referenzierung in Ihren Tests erleichtert.

Erweiterte Spottszenarien

Simulieren von Fehlern
Sie können verschiedene HTTP-Fehlerstatus simulieren, um zu testen, wie Ihre Anwendung damit umgeht:

// 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');
  });
});

Verzögerte Antworten
Um zu testen, wie Ihre Anwendung mit langsamen Netzwerkantworten umgeht, können Sie eine Verzögerung einführen:

// 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');
  });
});

Spezifische Szenarien verspotten

Bedingtes Mocking
Sie können Antworten basierend auf dem Anforderungstext oder den Headern bedingt simulieren:

// 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');
  });
});

Best Practices für Mocking und Stubbing

1. Aliase verwenden: Weisen Sie abgefangenen Anfragen immer Aliase mit .as() zu. Dadurch werden Ihre Tests besser lesbar und einfacher zu debuggen.
2. Mit Vorrichtungen kombinieren: Speichern Sie große Scheindaten in Vorrichtungsdateien für eine bessere Wartbarkeit und Lesbarkeit. Verwenden Sie cy.fixture(), um Fixtures zu laden.
3. Vermeiden Sie übermäßiges Verspotten: Verspotten Sie nur das, was für den Test notwendig ist. Übermäßiges Verspotten kann zu Tests führen, die nicht reale Szenarien widerspiegeln.
4. Echte API-Aufrufe testen: Testen Sie regelmäßig mit dem echten Backend, um sicherzustellen, dass Ihre Anwendung mit tatsächlichen Daten ordnungsgemäß funktioniert.

Abschluss

Mocking und Stubbing in Cypress sind leistungsstarke Techniken, die Ihre Tests schneller, zuverlässiger und einfacher zu warten machen können. Durch das Abfangen von HTTP-Anfragen und die Bereitstellung benutzerdefinierter Antworten können Sie eine Vielzahl von Testszenarien erstellen, ohne auf externe Dienste angewiesen zu sein. Befolgen Sie die Best Practices und Beispiele in diesem Leitfaden, um Mocking und Stubbing in Ihren Cypress-Tests zu meistern.

Viel Spaß beim Testen!