Verwenden von Cypress zum Schreiben von Tests für eine React -Anwendung

Testen von End-to-End (E2E) überprüft den Anwendungsfluss von Anfang bis Ende. Anstelle von manuellen Tests automatisiert Continuous Integration (CI) diesen Vorgang. Schreiben Sie Code, speichern Sie ihn und lassen Sie die Tools sicherstellen, dass die vorhandenen Funktionen nicht unterscheidet. Cypress ist ein leistungsstarkes E2E -Test -Framework, das diesen Prozess vereinfacht, insbesondere für moderne JavaScript -Bibliotheken wie React.

Einrichten einer Testanwendung

In diesem Tutorial wird eine Beispiel für Todo -Anwendung verwendet. Klonen Sie das Repository, um mitzumachen:

 Git-Klon [E-Mail geschützt]: Kinsomicrote/Cypress-React-Tutorial.git

Navigieren Sie zum Verzeichnis und installieren Sie Abhängigkeiten:

 CD Cypress-React-Tutorial
Garn installieren

Zypressen installieren:

 Garn hinzufügen Cypress - -dev

Offene Zypresse:

 NODE_MODULES/.BIN/Cypress Open

Fügen Sie dieses Skript zu package.json hinzu:

 "Skripte": {
  "Cypress": "Cypress Open"
}

Führen Sie jetzt yarn cypress um Zypressen zu öffnen. Starten Sie die React -App mit yarn start die Anwendung anzuzeigen.

Erstellen wir einen grundlegenden Test in cypress/integration/init.spec.js :

 beschreiben ('Cypress', () => {
  it ('arbeitet', () => {
    erwarten (wahr) .to.equal (wahr);
  });
});

Dies bestätigt, dass Cypress funktioniert. Lassen Sie uns nun die App besuchen:

 it ('besucht die App', () => {
  Cy.VISIT ('http: // localhost: 3000');
});

Stellen Sie eine Basis -URL in cypress.json ein, um eine Wiederholung der URL zu vermeiden:

 {
  "Baseurl": "http: // localhost: 3000"
}

Der Test kann jetzt vereinfacht werden zu:

 it ('besucht die App', () => {
  Cy.VISIT ('/');
});

Testformularsteuerungen und Eingänge

Erstellen Sie cypress/integration/form.spec.js um die Benutzerinteraktion zu testen.

 beschreiben ('Form', () => {
  vorab (() => {
    Cy.VISIT ('/');
  });

  it ('fokussiert die Eingabe', () => {
    Cy.Focused (). Sollte ('Have.class', 'Form-Control');
  });

  IT ('Akzeptiert Eingabe', () => {
    const input = "Lernen Sie etwas über Cypress";
    Cy.get ('. Form-Kontroll')
      .type (Eingabe)
      . sollte ('haben. Value', Eingabe);
  });

  it ('zeigt die Liste von Todos an “, () => {
    Cy.get ('li'). sollte ('Have.Length', 2);
  });

  it ('fügt ein neues Todo hinzu, () => {
    const input = "Lernen Sie etwas über Cypress";
    Cy.get ('. Form-Kontroll')
      .type (Eingabe)
      .type ('{Enter}')
      .get ('li')
      . sollte ('Have.Length', 3);
  });

  it ('löscht a todo', () => {
    cy.get ('li')
      .Erste()
      .Find ('. Btn-danger')
      .klicken()
      .get ('li')
      .should ('Have.Length', 1);
  });

  it ('löscht alle Todos', () => {
    cy.get ('li')
      .Erste()
      .Find ('. Btn-danger')
      .klicken()
      .get ('li')
      .Erste()
      .Find ('. Btn-danger')
      .klicken()
      .get ('. No Task')
      . sollte ('Have.Text', 'Alle deine Aufgaben sind vollständig. Schön gemacht!');
  });
});

Diese Tests decken Eingangsfokus, Eingabebereich, anfängliche Todo -Zählung, Hinzufügen eines neuen Todo, Löschen eines einzelnen Todo und Löschen aller Todos.

Testen von Netzwerkanfragen

Testsnetzwerkanforderungen stellt sicher, dass das Abheben von Daten korrekt funktioniert. Zum Beispiel mit der JSON -Platzhalter -API:

 beschreiben ('request', () => {
  IT ('Zeigt zufällige Benutzer aus API', () => {an
    Cy.Request ('https://jsonplaceholder.typicode.com/users')
      .should ((Antwort) => {
        erwarten (response.status) .to.eq (200);
        erwarten (response.body) .to.have.length (10);
        erwarten (reaktion). to.have.property ('Header');
        erwarten (Antwort). TO.HAVE.PROPERTY ('Dauer');
      });
  });
});

Dies überprüft den API -Antwortstatus, die Datenlänge und die Antworteigenschaften.

Ausführen von Tests aus der Befehlszeile

Führen Sie Cypress -Tests aus dem Terminal aus:

 NPX Cypress Run

Spezifische Tests durchführen:

 NPX Cypress Run --Spec "Cypress/Integration/Form.Spec.js"

Dies liefert eine Befehlszeilenzusammenfassung der Testergebnisse. Weitere erweiterte Befehlszeilenoptionen finden Sie in der Cypress-Dokumentation.

Abschluss

Cypress vereinfacht E2E -Tests und macht es für Entwickler zugänglich und vorteilhaft. Dieses Tutorial zeigt grundlegende bis mittlere Testtechniken und ermutigt Sie, seine Fähigkeiten weiter zu untersuchen. Denken Sie daran, die Cypress -Dokumentation für fortschrittlichere Funktionen und Best Practices zu konsultieren.

Das obige ist der detaillierte Inhalt vonVerwenden von Cypress zum Schreiben von Tests für eine React -Anwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!